Jonas: Hey there in this lecture
we will continue talking about operators
and operator precedence.
So for this example let's say that we want to calculate
if John is of full age only based on the year
in which he was born.
So let's first declare a couple of variables,
so now is 2018.
The year John was born was 1989
and then we also define the full age variable
and that's the age at which you officially become
of full age, so in most of Europe that's 18
maybe in the US it's 21, I'm not sure,
but let's use 18 here for this example.
Okay, and so what we can do is to calculate the age
and then compare it with 18 here,
and we're missing the equal sign of course.
So what I want to do is to do all of the calculation
all in one line, okay.
So var is full age
and then equal now
minus year John
and that will calculate the age
and then we want to test if it's greater or equal
to the full age.
Okay, so does that make sense?
So let's take a look at this
and try to figure out why this works.
So you see that we have actually two operators,
we have the minus and then this logical of greater
or equal operator all in one line, so all in here.
Now how does JavaScript know which operator
actually to execute first?
Because imagine that first this here would be executed.
So we would as if year John is greater or equal
of full age which would return a true of false value
and then we would do now minus this true of false value
and so this would be nothing significant.
So this would not be what we want.
Instead what we want is for this year to be executed first.
So now minus the year of John
and then we want to compare that age
with the full age.
So this year works and let's actually test that
and I'm going to show you why in a second.
Okay, so this actually returns true
and of course John is of full age.
So in 2018 born in 1989 he is 29
and so of course he is of full age.
Now in order to figure out why this works here
we have to think about operator precedence,
which means which operator is executed first.
So if you come here to my resources page
at codingheros.io/resources
down here in the JavaScript section
you will find this operator precedence.
Okay, so let's open up that link
and then down here we have the operator precedence table.
So what we see here is that the operators that are here
on the top of the list will be executed before the others.
So you see that the ones with the highest precedence
is using this grouping here with the parenthesis
and I'm gonna show you that in a second,
but what we're interested in here
is or plus, or actually or minus operator
which is this one and or logical operator
greater or equal, so this one here.
So what we can see from this table
is that the minus operator has a precedence of 16.
Okay, so that's what this value here
is is the precedence value which is greater
than the one from the greater or equal operator
which is only 11.
So what means is that this minus here
will be executed first.
So all of this is executed first
and then we end up with the result here.
So in this case it will be 29.
Then only after that 29 will be compared
with the full age with this operator
which has a lower precedence with only 11, okay.
So after that we end up with the result,
which in this case here will be false.
So let's actually write that here
or actually it is true.
So right now we have var is full age equals true.
What I want to show you next
is that the equal operator itself,
and where is it, here it is.
So the assignment operator as it's called
is also an operator itself.
I mentioned that to you in one of the last lectures
and now it makes sense.
Okay, so you see that this equal operator
is the one with the lowest or almost one of the lowest
precedence and that makes total sense,
because of course we want the assignment to happen
as the last step.
So after all the other operators have done its work,
in this case our minus and or equal or greater than operator
they all have done their work now
and we end up with the true result.
So as a final step it is then assigned
to the is full age variable.
All right, does that make sense?
So actually we not only have two operators,
but we have three.
The first one that gets executed is this one
then this one and finally the assignment operator.
All right, and whenever we need to know
if something works, the order in which your operators work
you can always just consult this table here
which is why I put it here right on my resources page
under the JavaScript section.
All right, so let's now look at another example
where we want to calculate the average age of
John and his friend.
So let's say age John, because we
hadn't really calculated it,
we only calculated it here.
So let's actually grab this here,
so now minus the year John
and then the age of Mark
and let's just say it's 35 without any calculations here.
So the average will be
to basically calculate the sum and then divide it by two.
So age John plus age Mark
divided by two, but this is not really correct, right.
You know that from your math class
that you had in school probably.
So you know that this dividing operator here
will have precedence over the plus, okay.
So that's confirmed and in JavaScript it also
works like that and you can see that
right here.
So the division here has a higher precedence of 14
than the addition of 13.
Actually when we talked about this example here
I mistakenly used this operator here,
which is the unary plus, but I meant this one here.
So this addition operator, but of course it still
has a higher precedence than the greater.
Okay, so it doesn't really matter
using this here or the unary plus operator.
Okay, it's a different operator, but in terms of precedence
the addition is still higher than this logical operator.
Okay, anyway what we need to do here
is to group this here together with parenthesis
just like, again, you learned in your math class probably.
So that makes sense because we see up here
that with the highest precedence we have the grouping.
Okay, so that's using parenthesis.
So if we do this
well then this operation here
has the highest precedence.
So first we add up the age of John and Mark
and only then we can divide it by two
in order to create the average age.
So let's just take a look at it in the console
just to make sure that everything is working correctly.
So indeed it is 32 and that's because,
and let's quickly do it in the console,
35 plus 29 is 64
and 64 divide by two is of course 32.
So this calculation here is correct.
Let's just add some comments here.
So this is with multiple operators
and here we have grouping
and now let's do some more examples with grouping
and multiple assignments.
So let's say that you have a value that you want to assign
to multiple variables at the same time
and that's totally possible in JavaScript.
So let's create two variables X and Y.
Right now I'm not really creating variables
with a meaningful name here, but that's no problem
this is just twiddling some mathematical operations.
Okay, and so
let's just start by saying X equals
and just a math operations here,
let's say three plus five
and then times four minus six.
Okay, and so just something like this.
So we already know which will have precedence here, right.
So the grouping has precedence and this will then
turn out to be eight, so let's actually write it down here.
So after the first step we have
eight times four minus six
then the next step will be this multiplication here, right.
So eight times four is 32 minus six
and finally this will then turn out to be 26.
Okay, so X will be 26 and let's log that to the console
just to make sure
and indeed here it is.
So 26 is the result of this calculation.
So as before it did all of these operations
and only then it did the assignment.
Now if we wanted to assign this to X and Y at the same time
we could very simply do X equals Y
and then equals this entire calculations here.
Now the question here is why this actually works.
Imagine that you're reading this line here
and we see X is equal to Y.
So at this point Y is still undefined, right,
because we didn't define any value for it before this line.
So it would be kind of logical that X
would be undefined at this point, but it is not.
Let's take a look at that actually.
This is something that we didn't do before,
which is to log two things at the same time.
So we can say console log and then X
and then a comma and then another variable.
So we see 26 and 26,
so two results at the same time with the console.log.
So what we see here is that 26 is
not undefined, which would be logical.
So again because Y is undefined at this point
and if we say X equal to something that is undefined
well then X should also be undefined, but it's not.
So let's take a look at why that happens
and I can show it to you here in the table again.
So we have the precedence here
that we already taught before, but we also have
the associativity and what that simply means
is the direction in which the operation is executed.
So if you come down here to for example
the multiplication or the addition
we have left to right.
Okay, and so all that means
is that for example if we had,
let's add it as a comment,
if we had two plus four plus five
then it would do it from the left side to the right side.
So first the two plus four, which is six,
and then six plus five to 11.
But there are some operators that work the other way around,
so which are right from left
and the assignment operator is one of them.
So here we have assignment
and assignment works from right to left.
Okay, so that's the other way around.
So that is why this piece of code here actually works,
because we end up with the result here of 26
and then the assignment works from right to left.
So it doesn't start by doing X equal Y,
but instead it starts by saying Y equals 26.
Only then it does X equals 26.
Okay, does that make sense?
So again, the assignment operator
works not from the left to the right,
but from the right to the left.
So here we end up with the result of 26
and then that is assigned to Y
and then that again in turn is assigned to X.
So therefore we end up with 26 in both these variables.
Okay, so that is the associativity
that's the the second part of the table
that I wanted to show you.
So we don't just have to keep precedence in mind,
but also the associativity.
All right, now just to finish this lecture
I just want to show you some more operators.
So let's say that we wanted to double X.
So something like X equals
X times two, right.
So that would be the double of X,
but you see that we're actually repeating the X here.
Okay, so in JavaScript there is a way of
making this a bit more simple, which is simply saying
X multiply equal two.
Okay, so this is the exact same thing.
So what this means is that basically
it will do X times two
without us having to write out that X times here
like we did here, okay.
So let's take a look at the result
and so 52 is indeed 26 times two,
which was X before.
The same thing would work for plus, minus, or multiply.
So we can say X plus equal 10
and so what do you think this will turn out to be?
I hope that you guessed 62, right.
So that is 52, which is the result from before, plus 10.
So it's the exact same thing as writing X
equals X plus 10, all right.
So that makes our lives a bit easier.
These operators you have them down here
in the assignment section,
because they are actually assignment operators just like
the normal assignment operator.
Okay, now just the last one that I want to show you
is the increment.
So what we can do instead of writing X equals
X plus one would be to write it like this
so we could do X plus equals one,
but there is an even simpler way
if we only want to add one
and that is to simply write X plus plus.
So this operator simply adds one unit
to the variable that we're using this operator on.
Okay, so this is all the same thing here,
but of course this one is the easiest to write
and the most handy one.
So just to prove to you that it actually works
let's log this one to the console as well.
So it's of course 63.
The same way it works with minus minus.
So right now it should be 61
and yep indeed it is.
So that was a lot to take in up until this point.
You learned all about variables, data types,
and also operators.
So I hope that it's all making sense to you,
that you're having some fun,
and so next up there's coming a coding challenge
where you can put all of these new skills to practice
in a fun and small challenge that I have for you
in the next video.