1
[Link],430 --> [Link],430
And this lecture,
2
[Link],430 --> [Link],530
we're gonna talk about the precedence
3
[Link],530 --> [Link],253
of different operators.
4
[Link],990 --> [Link],700
So I already commented out the code from the last lecture,
5
[Link],700 --> [Link],730
but let's actually bring some of it back here.
6
[Link],730 --> [Link],543
And in particular, the calculation of this ages.
7
[Link],090 --> [Link],480
So like this.
8
[Link],480 --> [Link],580
And then also this code that we discussed
9
[Link],580 --> [Link],310
by the end of the last video.
10
[Link],310 --> [Link],690
Remember that?
11
[Link],690 --> [Link],450
So the question that I asked by the end of the last video
12
[Link],450 --> [Link],040
was why these two subtractions here so this one,
13
[Link],040 --> [Link],403
and this one are executed before this comparison operator.
14
[Link],440 --> [Link],763
So basically the question is why does this work?
15
[Link],470 --> [Link],683
Okay, because we see that it does actually work.
16
[Link],800 --> [Link],390
So this number here is clearly gonna be higher
17
[Link],390 --> [Link],373
than this one.
18
[Link],230 --> [Link],300
Well, it works this way because JavaScript
19
[Link],300 --> [Link],489
has a well-defined order of operator precedence.
20
[Link],489 --> [Link],180
So basically the order in which operators are executed.
21
[Link],180 --> [Link],930
And to actually see the precedence of all the different
22
[Link],930 --> [Link],433
operators, let's check out a very handy precedence table.
23
[Link],330 --> [Link],150
So let's Google MDN.
24
[Link],150 --> [Link],610
Which stands for Mozilla Developer Network
25
[Link],610 --> [Link],893
and then operator precedence.
26
[Link],420 --> [Link],690
And so the one you're looking for is this one.
27
[Link],690 --> [Link],633
So the one that starts with [Link].
28
[Link],970 --> [Link],370
So MDN is a very well known
29
[Link],370 --> [Link],080
and widely used documentation site.
30
[Link],080 --> [Link],400
And we will actually use MDN a lot throughout the course.
31
[Link],400 --> [Link],490
And in one of the future sections,
32
[Link],490 --> [Link],460
I will show you a bit better how to use this site.
33
[Link],460 --> [Link],610
But for now we're looking for a table that is here
34
[Link],610 --> [Link],560
on this page and it's this one.
35
[Link],560 --> [Link],500
So here we can see that grouping using parenthesis here,
36
[Link],500 --> [Link],428
has the highest precedence of 21.
37
[Link],428 --> [Link],640
And then we have all the operators that we already saw.
38
[Link],640 --> [Link],210
So here plus minus, plus plus,
39
[Link],210 --> [Link],160
so they have a precedence of 17.
40
[Link],160 --> [Link],820
Then we have a bunch of other stuff here that we don't know
41
[Link],820 --> [Link],523
yet, but here is also type of, that we already do know.
42
[Link],360 --> [Link],430
We have the exponentiation operator that I showed you.
43
[Link],430 --> [Link],000
We have all these math operators here.
44
[Link],000 --> [Link],430
We have all comparison operators, right?
45
[Link],430 --> [Link],970
We have some well, some other equality operators here,
46
[Link],970 --> [Link],110
and a bunch of other operators.
47
[Link],110 --> [Link],750
And this is actually a nice reference where you can see all
48
[Link],750 --> [Link],040
the operators that exist in JavaScript in one handy table.
49
[Link],040 --> [Link],410
But let's not stay in the context of our current example
50
[Link],410 --> [Link],870
which is this one here.
51
[Link],870 --> [Link],850
And let's understand what exactly happens here,
52
[Link],850 --> [Link],800
in terms of operator precedence.
53
[Link],800 --> [Link],310
So we already know that these two calculations here are done
54
[Link],310 --> [Link],950
before the comparison.
55
[Link],950 --> [Link],623
And so let's actually see that in the table.
56
[Link],730 --> [Link],020
So here we have the comparison.
57
[Link],020 --> [Link],330
So this greater than and you see that it has a lower
58
[Link],330 --> [Link],890
precedence than the subtraction here.
59
[Link],890 --> [Link],330
So this has 14 and this has 12, right?
60
[Link],330 --> [Link],060
And of course you don't need to know any
61
[Link],060 --> [Link],170
of these precedence numbers.
62
[Link],170 --> [Link],510
Okay, don't worry about that.
63
[Link],510 --> [Link],260
It doesn't matter, no one knows these.
64
[Link],260 --> [Link],514
You just have to have a general idea of which operators
65
[Link],514 --> [Link],743
are executed first.
66
[Link],700 --> [Link],156
So usually all the math operators are executed
67
[Link],156 --> [Link],630
before the comparison operators for example,
68
[Link],630 --> [Link],200
because that makes sense.
69
[Link],200 --> [Link],480
And so with this, we explain why this kind of comparison
70
[Link],480 --> [Link],177
that we have here works.
71
[Link],177 --> [Link],630
Now in this table,
72
[Link],630 --> [Link],130
we can also see which operators are executed from left
73
[Link],130 --> [Link],230
to right and which one from right to left.
74
[Link],230 --> [Link],063
Like for example,
75
[Link],063 --> [Link],820
the exponentiation operator is executed from right to left.
76
[Link],820 --> [Link],870
While most operators especially the mathematical ones
77
[Link],870 --> [Link],600
are executed from left to right.
78
[Link],600 --> [Link],453
For example,
79
[Link],950 --> [Link],950
let's say we wanted to calculate 25 minus 10 minus five.
80
[Link],770 --> [Link],623
And so this one should be 10, right?
81
[Link],630 --> [Link],033
So let's check that.
82
[Link],899 --> [Link],780
And indeed we get 10.
83
[Link],780 --> [Link],630
But if it was right to left,
84
[Link],630 --> [Link],330
then it would be five minus 10 minus 25
85
[Link],330 --> [Link],690
which would then be something completely different.
86
[Link],690 --> [Link],020
So this is an example of left to right operation.
87
[Link],020 --> [Link],620
But assignment, for example,
88
[Link],620 --> [Link],723
is a good example of right to left execution.
89
[Link],650 --> [Link],293
So let's see where we actually have assignment here.
90
[Link],550 --> [Link],080
So it should be one of the lowest ones.
91
[Link],080 --> [Link],830
And indeed it is.
92
[Link],830 --> [Link],063
So it's number three.
93
[Link],750 --> [Link],450
And so as I said, this one is right to left.
94
[Link],450 --> [Link],130
And so let me show you a nice example
95
[Link],130 --> [Link],510
of why this is important.
96
[Link],510 --> [Link],940
So let's declare two variables,
97
[Link],940 --> [Link],210
let X and Y and here's something new.
98
[Link],210 --> [Link],433
So we can define two variables at the same time like this.
99
[Link],470 --> [Link],730
So now in one line we declared two empty values.
100
[Link],730 --> [Link],810
So two values which are gonna hold for now
101
[Link],810 --> [Link],310
the value of undefined, right?
102
[Link],310 --> [Link],860
So that's X and Y.
103
[Link],860 --> [Link],950
And now, we can do this.
104
[Link],950 --> [Link],020
We can say that X should be equal to Y should be equal
105
[Link],020 --> [Link],020
to 25 minus 10, minus five which we already know is 10.
106
[Link],210 --> [Link],623
And so let's now log both of these values to the console.
107
[Link],520 --> [Link],133
And what do you think will happen?
108
[Link],800 --> [Link],680
You can really try to think about this
109
[Link],680 --> [Link],163
before checking the result.
110
[Link],860 --> [Link],570
And so what is it gonna be?
111
[Link],570 --> [Link],810
And actually let's delete this one first,
112
[Link],810 --> [Link],833
so to avoid some confusion there.
113
[Link],710 --> [Link],543
And.
114
[Link],760 --> [Link],570
So, we see that X and Y are both 10.
115
[Link],570 --> [Link],120
And so let's analyze why that happens.
116
[Link],120 --> [Link],140
So when JavaScript first finds this line of code
117
[Link],140 --> [Link],480
here to execute.
118
[Link],480 --> [Link],090
It will look at all the operators that are present
119
[Link],090 --> [Link],760
and it will see the minus operators.
120
[Link],760 --> [Link],610
And so it will start with these,
121
[Link],610 --> [Link],310
because they have a higher precedence, right?
122
[Link],310 --> [Link],457
So assignment has only three, but the,
123
[Link],680 --> [Link],390
where is it?
124
[Link],390 --> [Link],223
Here it is.
125
[Link],223 --> [Link],920
So the subtraction has a 14.
126
[Link],920 --> [Link],230
And so of course it's gonna be executed first
127
[Link],230 --> [Link],600
and left to right.
128
[Link],600 --> [Link],110
And so, as we already know,
129
[Link],110 --> [Link],363
this year will turn out to be 10.
130
[Link],090 --> [Link],950
And so let's just write that here.
131
[Link],950 --> [Link],830
So after these minus operations
132
[Link],830 --> [Link],420
we end up with this code basically.
133
[Link],420 --> [Link],420
So X equals Y equals 10, right?
134
[Link],540 --> [Link],720
Because again, 10 is the result of doing these operations.
135
[Link],720 --> [Link],200
And so now we only have two operators left
136
[Link],200 --> [Link],430
which are the equal operators.
137
[Link],430 --> [Link],470
And so now they are executed
138
[Link],470 --> [Link],950
but as I showed you before they are executed right to left.
139
[Link],950 --> [Link],950
So from this side here, starting from the 10 to this side.
140
[Link],950 --> [Link],950
And so what happens is that we will have Y equals 10.
141
[Link],570 --> [Link],290
And so at this point, Y is equal to 10.
142
[Link],290 --> [Link],290
And so what we have then is X equal to 10, okay.
143
[Link],290 --> [Link],770
And then after that, we're only left with X equal 10.
144
[Link],770 --> [Link],410
And so at the end, both X and Y are gonna be 10.
145
[Link],410 --> [Link],660
Okay, maybe that sounded a bit confusing,
146
[Link],660 --> [Link],060
but that's just how it works
147
[Link],060 --> [Link],310
when you evaluate from right to left.
148
[Link],310 --> [Link],510
And actually that's the way it has to be,
149
[Link],510 --> [Link],770
because if it was the other way around this wouldn't work.
150
[Link],770 --> [Link],010
Just imagine if we had this assignment
151
[Link],010 --> [Link],070
working from left to right.
152
[Link],070 --> [Link],840
Then X would be equal to Y
153
[Link],840 --> [Link],390
and Y is undefined at this point.
154
[Link],390 --> [Link],200
Remember, because we declared it here as an empty variable.
155
[Link],200 --> [Link],230
And so again,
156
[Link],230 --> [Link],286
if assignment would be from left to right then first
157
[Link],286 --> [Link],450
X would be equal to Y which would be undefined
158
[Link],450 --> [Link],660
and then Y would be equal to 10.
159
[Link],660 --> [Link],497
And so that's not the result that we expect here.
160
[Link],497 --> [Link],060
And so once more, the way this works
161
[Link],060 --> [Link],750
is actually very logical and makes a lot of sense.
162
[Link],750 --> [Link],670
So I hope that made sense.
163
[Link],670 --> [Link],503
And now to finish,
164
[Link],503 --> [Link],429
let's just check out the one with the highest precedence,
165
[Link],429 --> [Link],230
which is just grouping.
166
[Link],230 --> [Link],380
So basically using parenthesis.
167
[Link],380 --> [Link],909
And that actually works just like in mathematics
168
[Link],909 --> [Link],884
where operations within parenthesis are also executed first.
169
[Link],884 --> [Link],300
So I hope you remember that from school.
170
[Link],300 --> [Link],770
And the great example is to calculate
171
[Link],770 --> [Link],300
the average of two values.
172
[Link],300 --> [Link],700
So we have age Jonas and age Sarah.
173
[Link],700 --> [Link],353
And so let's calculate the average age of these two people.
174
[Link],120 --> [Link],380
So let's actually start by logging their ages
175
[Link],380 --> [Link],183
to the console, just so we see.
176
[Link],850 --> [Link],950
So age Jonas and age Sarah.
177
[Link],950 --> [Link],330
And now I want to calculate the average.
178
[Link],330 --> [Link],530
And actually that stood out here above that.
179
[Link],440 --> [Link],400
So let's say average age.
180
[Link],400 --> [Link],090
And once more, don't forget the descriptive variable names.
181
[Link],090 --> [Link],340
So average age describes exactly what this variable
182
[Link],340 --> [Link],210
is going to hold.
183
[Link],210 --> [Link],300
So to calculate an average, we need to add two values
184
[Link],300 --> [Link],930
together and then divide them by two.
185
[Link],930 --> [Link],760
At least that's when we have just two values.
186
[Link],760 --> [Link],050
So let's say,
187
[Link],050 --> [Link],010
age Jonas plus age Sarah.
188
[Link],010 --> [Link],230
So that's the addition and then divided by two.
189
[Link],230 --> [Link],750
But now what is going to happen?
190
[Link],750 --> [Link],073
Well, according to our precedence table,
191
[Link],930 --> [Link],930
we have the division here happening before the subtraction.
192
[Link],360 --> [Link],740
So this is 15 and this is 14.
193
[Link],740 --> [Link],360
And so what happens first is age Sarah is gonna be divided
194
[Link],360 --> [Link],473
by two and then the age of Jonas is gonna be added.
195
[Link],940 --> [Link],893
So let's actually log that results here as well.
196
[Link],560 --> [Link],510
And so here the average age is now 55.5.
197
[Link],510 --> [Link],560
Which really doesn't make any sense because how can
198
[Link],560 --> [Link],130
the average be larger than one of the two ages, right?
199
[Link],130 --> [Link],430
And so that's where the parenthesis come in.
200
[Link],430 --> [Link],010
So by using parenthesis, once more,
201
[Link],010 --> [Link],170
just like in mathematics,
202
[Link],170 --> [Link],050
we can make it so that this operation here,
203
[Link],050 --> [Link],270
is executed first.
204
[Link],270 --> [Link],910
Okay, so basically everything that is within
205
[Link],910 --> [Link],910
the parenthesis which have the precedence of 21, right?
206
[Link],472 --> [Link],472
So now this one is executed first and then the division.
207
[Link],160 --> [Link],280
And so yeah, now it makes sense.
208
[Link],280 --> [Link],113
Okay.
209
[Link],113 --> [Link],720
I hope that wasn't too confusing.
210
[Link],720 --> [Link],230
And now you're actually ready
211
[Link],230 --> [Link],620
for your first coding challenge.
212
[Link],620 --> [Link],230
So I hope to see you soon in the next video
213
[Link],230 --> [Link],943
for your first challenge.
