All language subtitles for 009 Basic Operators

Let's now learn some more JavaScript fundamentals.

And in this video in particular,

let's learn about some basic operators.

And let's start by defining what an operator actually is.

So an operator basically allows us to transform values

or combine multiple values

and really do all kinds of work with values.

And there are many categories of operators

like mathematical operators, comparison operators

logical operators, assignment operators, and many more.

So in this video,

let's look at some of these types of operators

starting with mathematical or arithmetic operators.

So we already used the plus and minus operators

but of course we can do all arithmetic operations.

So we can also do multiplication, division and many more.

And let's use the minus operator to calculate ages

based on a person's birth year.

So let's say ageJonas equals so the current year,

and I will simply assume that right now it's 2037.

So that's far in the future

but let's make this a bit fun and then minus a birth year.

So let's say 1991.

Okay.

And then let's just quickly log it to the console.

So ageJonas using the auto-completion here.

And so my age is 46, at least if we are currently in 2037.

Okay.

Now let's do the same for someone else.

So let's say ageSarah

and notice how we're using

nicely descriptive variable names here.

So the age of Jonas and the age of Sarah,

instead of, for example, saying age one and age two.

So again, right now it's 2037

and then let's say Sarah was born in 2018.

So let's log her age to the console as well.

And we could now write the same line as this.

So again, console.log

but we can actually also log multiple values

at the same time.

So for that we just write a comma like this,

and then the second value.

And we could do even more by adding more commas.

So here we could then log something else.

Give it a save.

And so here we see now 46 and 19 years.

Great.

So that's how we used the minus operator

to solve a very simple problem

in this case, simply to calculate an age.

However, we can actually do better here.

That's because we have this value here

that is repeating itself.

So this year 2037 is appearing both here and here.

And so that's not good because we are repeating this value.

So if the year now changes

then we would have to change it in these both places.

And we don't like that.

And so that's why we have the concept of variables.

So instead of having this value here,

let's say now and then we assign this value

to the now variable.

Okay.

And notice how I'm always by default using const.

Okay.

And that's because I'm not changing

any of these variables here anywhere in my code.

Only if I needed to change them, I would switch to that.

Okay. And now here I can replace this one with now

and this one and it should work the same and it does.

Great.

So that's a very good use case for a variable right there.

And of course we can use

all kinds of different math operations.

So let's say console.log

and now we could go ahead into

ageJonas times two,

so using this asterisk or star,

or we could also do

ageJonas and divided by two,

and notice how these are two different calculations here.

So one calculation

and another one,

or basically another operation.

And that's because as I mentioned before,

we can log different values at the same time

in one console.log.

So here we are creating one value

and here we are creating a second value.

Let's actually divide it by 10

and then let's also use the exponentiation operator.

So for example, two to the power of three, okay.

And here we can use a comment to explain what this means.

So that's a nice use case.

So three means two to the power of three,

which is equal to two times two times two.

So three times this,

so this should be eight, right?

Let's try that.

And indeed 46, which is Jonas' age, times two is 92,

then divided by six is 4.6.

So that's this.

And then two to the power of three is indeed eight.

Nice.

Next, there is another use case

that we didn't use yet for the plus operator.

And that's because we can use the plus operator

to join strings,

or in other words, to concatenate different strings.

So let's create two variables,

firstName equals Jonas

and lastName equals Schmedtmann.

And now I can concatenate these two strings using plus.

So let's log that to the console.

So firstName plus lastName.

And let's see.

And indeed we have now one big string

with both of the names together.

So both of the strings that we declared earlier.

But what if we wanted a space in between there?

Well, that's not too hard.

All we need to do is to create another string

which is just a space

and then concatenate it here with these two.

And we can actually do that right here.

So we want this string,

firstName which is just Jonas.

Remember the JavaScript engine

will simply replace this string with this one.

Then we create an empty string

or actually a string with a space

and then we add that one to lastName.

So that's gonna be Jonas plus a space plus Schmedtmann.

Let's see.

And indeed that's exactly the result that we were after.

Now there's actually a better way

of doing this kind of concatenation of strings,

which is called template strings,

but let's focus on operators now.

Okay.

So this is a very useful one

that we actually use quite often.

So another type of operator

is actually the typeof operator,

which we already used up here.

So I'm not gonna do that again.

So remember here we had the typeof operator

and that would then give us the type of the value.

So we already know how that one works.

So let's move on to the next category,

which are assignment operators.

And the most straightforward assignment operator

is just the equal sign.

So let's say,

let x equal 10 plus five.

And so this equal sign here is actually itself an operator,

alright?

So in this line of code, we do actually have two operators.

We have the plus and then the equal.

Now in this case, x will be assigned 15

because the plus operator is executed

before the assignment operator, okay?

And that's based on a couple of rules

about operator proceedings that I'm gonna show you

in the next video.

So let me actually show that to you

that it indeed works as I told you.

And yeah, so it's 15.

So 10 plus five is done first

and then the result of this operation,

which is 15, will then be assigned to x.

And so that itself is another operator

but there are more assignment operators.

So let me show one to you, which is this one,

x plus equal 10.

So we know that at this point after this line

x is 15, right?

So let's write that as a comment.

And then we have this next line.

So this weird x plus equal.

So what does plus equal actually mean?

Well, let's write that again as a comment.

So what this means is x equal x plus 10.

So instead of having to write all of this,

we can simply write x plus equal 10, all right?

And so x should now be 25

because this x year from the previous step is 15.

So here we are basically reassigning the x value.

That's why I used a let here.

So again, x at this point here will be 15

and then 15 plus 10 should be 25.

And indeed it's now 25.

So let's write that result here so that we can keep track

as I show you more operators,

because as you might imagine,

there are more operators like this.

For example, there is x and then times equal four.

And I hope you can imagine

that this will mean x is equal x times four

and this should be in this case 25 times four, so 100.

Let's check and yes, it works.

The same operator also exists with divided here,

but I'm not gonna go into that one.

So to finish, I will just show you the x plus plus operator.

And what this will do is

x equals x plus one.

So let's see.

And yes, we have 101.

And we also have x minus minus.

So if we do that twice now,

what do you think will happen here?

And indeed we get 99.

So minus minus is basically

just the opposite of plus plus.

So this one will decrease the value by one

and so we end up with 99.

Okay.

So let's actually write

that these are assignment operators

and these are, let's say math operators.

And so now let's talk about comparison operators,

and these are pretty great.

So basically, we use comparison operators

to produce Boolean values.

So let me show you how that works

and then I'm sure it will make sense

that the result of a comparison operator

should be a Boolean.

So let's say we are trying to figure out

if ageJonas is greater than ageSarah, right?

So what could the result of this be

if we think about this logically?

So ageJonas can either be greater than Sarah or not.

And so if it is greater

then the result of this should be true

and if it's not,

then it should just be false.

So indeed the result of this one is true

that's because Jonas' age is 46 and Sarah is 19.

So this is basically like asking the operator,

"Is the age of Jonas greater than the age of Sarah?"

And the operator will then essentially reply with

yes, it is, which means true

or no, it's not, which means false.

And this can be very useful later

when we start taking decisions with our code

based on conditions like this.

Okay.

Now of course there's also the less than,

so the opposite,

and also there is greater equal or less than equal.

So basically we have this one and we have this one

then we have greater equal and less than or equal.

So let's see a nice application

of the greater than equal operator.

So let's say we wanted to test if Sarah is of full age.

So that means that she must be at least 18 years old,

and at least means that she is greater than 18

or exactly 18.

And so we can use the appropriate operator for that.

So greater or equal 18.

Okay.

So 18 should already be included

and that's why we have this equal here.

So this should be true.

And yes, it is.

So if we make her one year younger,

so let's say she was born in 2019, then her age is 18,

as you see here,

and she is still of full eight.

So it's still true here.

And that's because we included 18 here

in the age basically by using this equal sign.

But now if we made her born in 2020, she would be 17

and then this should turn out to be false.

So that's checked out and yes, now it's false.

Great.

Now keep in mind that in real development

we would actually store these results here.

So for example, the result of this comparison operator

or this one year,

we would store these results in variables

and not just always lock the results to the console.

Okay.

But in this case, I just wanted to show

how all of this works.

And so we need to console

because really all we want to do is to see the results

because we're still learning.

Okay.

We could also just do all of this

right here in the console immediately

but then we would kind of lose the record

of what we're learning

and it would be not so easy to scroll up and down.

Okay.

But of course we could just do this, right.

We could just write ageSarah greater or equal 18,

and we would still get the same result.

And this works because the console actually has access

to all the variables that is running

in the current browser tab, right.

So all the variables that we have here

like firstName, for example,

they are all right here.

Can even auto complete them.

Okay.

But then again, if we would reload this page now,

then all we just did would be lost.

And of course we could also simply as I said,

just store these results

if we needed them later in our code.

so isFullAge and then we could do this.

And so this variable

would be the one holding the Boolean value then.

And actually as you see here in this popup,

vs code is so smart that it figures out automatically

that this variable here is gonna be a Boolean

because of the code that we wrote here

which of course has a Boolean as a result.

Okay.

So now just to finish,

let's say that we don't want the intermediate age variables

and do this kind of comparison here,

all in one go.

So this here.

So let me show that to you in the code.

So again, imagine we have a lot of code

and we don't want to calculate these ages here separately.

So we could just do

now minus 1991,

and then test if it's greater than now, minus 2020.

Well, let's actually put it back to 2019

as we had before, or actually 2018 I think.

So this now is basically just the same as this year.

We simply are doing it now all in one step.

So this code is the same as this as it's highlighted here.

And this is the same as this one.

And so this whole line of code

is essentially the same as doing this.

Now the big question here is,

how does JavaScript know

if it should do the math first

or if it should do the comparison first, right?

Because we could think

that the first thing to do is to calculate this,

so basically 46

and then JavaScript could compare that 46 to now right away,

right?

That's what would happen

if the operation would simply proceed from left to right.

But we will see that it doesn't.

So we will see that this actually works just fine, right.

And so JavaScript has some way of knowing

that it should first do this operation,

then this one,

so that it has the two numbers

and then only at the end,

once it has the two ages,

it will compare them with this operator in the middle.

So how does that work?

Well, that's what we're gonna talk about, right,

in the next video.