And this lecture,
we're gonna talk about the precedence
of different operators.
So I already commented out the code from the last lecture,
but let's actually bring some of it back here.
And in particular, the calculation of this ages.
So like this.
And then also this code that we discussed
by the end of the last video.
Remember that?
So the question that I asked by the end of the last video
was why these two subtractions here so this one,
and this one are executed before this comparison operator.
So basically the question is why does this work?
Okay, because we see that it does actually work.
So this number here is clearly gonna be higher
than this one.
Well, it works this way because JavaScript
has a well-defined order of operator precedence.
So basically the order in which operators are executed.
And to actually see the precedence of all the different
operators, let's check out a very handy precedence table.
So let's Google MDN.
Which stands for Mozilla Developer Network
and then operator precedence.
And so the one you're looking for is this one.
So the one that starts with developer.mozilla.org.
So MDN is a very well known
and widely used documentation site.
And we will actually use MDN a lot throughout the course.
And in one of the future sections,
I will show you a bit better how to use this site.
But for now we're looking for a table that is here
on this page and it's this one.
So here we can see that grouping using parenthesis here,
has the highest precedence of 21.
And then we have all the operators that we already saw.
So here plus minus, plus plus,
so they have a precedence of 17.
Then we have a bunch of other stuff here that we don't know
yet, but here is also type of, that we already do know.
We have the exponentiation operator that I showed you.
We have all these math operators here.
We have all comparison operators, right?
We have some well, some other equality operators here,
and a bunch of other operators.
And this is actually a nice reference where you can see all
the operators that exist in JavaScript in one handy table.
But let's not stay in the context of our current example
which is this one here.
And let's understand what exactly happens here,
in terms of operator precedence.
So we already know that these two calculations here are done
before the comparison.
And so let's actually see that in the table.
So here we have the comparison.
So this greater than and you see that it has a lower
precedence than the subtraction here.
So this has 14 and this has 12, right?
And of course you don't need to know any
of these precedence numbers.
Okay, don't worry about that.
It doesn't matter, no one knows these.
You just have to have a general idea of which operators
are executed first.
So usually all the math operators are executed
before the comparison operators for example,
because that makes sense.
And so with this, we explain why this kind of comparison
that we have here works.
Now in this table,
we can also see which operators are executed from left
to right and which one from right to left.
Like for example,
the exponentiation operator is executed from right to left.
While most operators especially the mathematical ones
are executed from left to right.
For example,
let's say we wanted to calculate 25 minus 10 minus five.
And so this one should be 10, right?
So let's check that.
And indeed we get 10.
But if it was right to left,
then it would be five minus 10 minus 25
which would then be something completely different.
So this is an example of left to right operation.
But assignment, for example,
is a good example of right to left execution.
So let's see where we actually have assignment here.
So it should be one of the lowest ones.
And indeed it is.
So it's number three.
And so as I said, this one is right to left.
And so let me show you a nice example
of why this is important.
So let's declare two variables,
let X and Y and here's something new.
So we can define two variables at the same time like this.
So now in one line we declared two empty values.
So two values which are gonna hold for now
the value of undefined, right?
So that's X and Y.
And now, we can do this.
We can say that X should be equal to Y should be equal
to 25 minus 10, minus five which we already know is 10.
And so let's now log both of these values to the console.
And what do you think will happen?
You can really try to think about this
before checking the result.
And so what is it gonna be?
And actually let's delete this one first,
so to avoid some confusion there.
And.
So, we see that X and Y are both 10.
And so let's analyze why that happens.
So when JavaScript first finds this line of code
here to execute.
It will look at all the operators that are present
and it will see the minus operators.
And so it will start with these,
because they have a higher precedence, right?
So assignment has only three, but the,
where is it?
Here it is.
So the subtraction has a 14.
And so of course it's gonna be executed first
and left to right.
And so, as we already know,
this year will turn out to be 10.
And so let's just write that here.
So after these minus operations
we end up with this code basically.
So X equals Y equals 10, right?
Because again, 10 is the result of doing these operations.
And so now we only have two operators left
which are the equal operators.
And so now they are executed
but as I showed you before they are executed right to left.
So from this side here, starting from the 10 to this side.
And so what happens is that we will have Y equals 10.
And so at this point, Y is equal to 10.
And so what we have then is X equal to 10, okay.
And then after that, we're only left with X equal 10.
And so at the end, both X and Y are gonna be 10.
Okay, maybe that sounded a bit confusing,
but that's just how it works
when you evaluate from right to left.
And actually that's the way it has to be,
because if it was the other way around this wouldn't work.
Just imagine if we had this assignment
working from left to right.
Then X would be equal to Y
and Y is undefined at this point.
Remember, because we declared it here as an empty variable.
And so again,
if assignment would be from left to right then first
X would be equal to Y which would be undefined
and then Y would be equal to 10.
And so that's not the result that we expect here.
And so once more, the way this works
is actually very logical and makes a lot of sense.
So I hope that made sense.
And now to finish,
let's just check out the one with the highest precedence,
which is just grouping.
So basically using parenthesis.
And that actually works just like in mathematics
where operations within parenthesis are also executed first.
So I hope you remember that from school.
And the great example is to calculate
the average of two values.
So we have age Jonas and age Sarah.
And so let's calculate the average age of these two people.
So let's actually start by logging their ages
to the console, just so we see.
So age Jonas and age Sarah.
And now I want to calculate the average.
And actually that stood out here above that.
So let's say average age.
And once more, don't forget the descriptive variable names.
So average age describes exactly what this variable
is going to hold.
So to calculate an average, we need to add two values
together and then divide them by two.
At least that's when we have just two values.
So let's say,
age Jonas plus age Sarah.
So that's the addition and then divided by two.
But now what is going to happen?
Well, according to our precedence table,
we have the division here happening before the subtraction.
So this is 15 and this is 14.
And so what happens first is age Sarah is gonna be divided
by two and then the age of Jonas is gonna be added.
So let's actually log that results here as well.
And so here the average age is now 55.5.
Which really doesn't make any sense because how can
the average be larger than one of the two ages, right?
And so that's where the parenthesis come in.
So by using parenthesis, once more,
just like in mathematics,
we can make it so that this operation here,
is executed first.
Okay, so basically everything that is within
the parenthesis which have the precedence of 21, right?
So now this one is executed first and then the division.
And so yeah, now it makes sense.
Okay.
I hope that wasn't too confusing.
And now you're actually ready
for your first coding challenge.
So I hope to see you soon in the next video
for your first challenge.