All language subtitles for 015 Operator Precedence.en_US

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.