1

00:00:01,430 --> 00:00:02,430

2
00:00:02,430 --> 00:00:04,530
we're gonna talk about the precedence

3
00:00:04,530 --> 00:00:06,253
of different operators.

4
00:00:07,990 --> 00:00:11,700
So I already commented out the code from the last lecture,

5
00:00:11,700 --> 00:00:14,730
but let's actually bring some of it back here.

6
00:00:14,730 --> 00:00:18,543
And in particular, the calculation of this ages.

7
00:00:21,090 --> 00:00:22,480
So like this.

8
00:00:22,480 --> 00:00:25,580
And then also this code that we discussed

9
00:00:25,580 --> 00:00:28,310
by the end of the last video.

10
00:00:28,310 --> 00:00:29,690
Remember that?

11
00:00:29,690 --> 00:00:33,450
So the question that I asked by the end of the last video

12
00:00:33,450 --> 00:00:38,040
was why these two subtractions here so this one,

13
00:00:38,040 --> 00:00:42,403
and this one are executed before this comparison operator.

14
00:00:43,440 --> 00:00:46,763
So basically the question is why does this work?

15
00:00:48,470 --> 00:00:51,683
Okay, because we see that it does actually work.
16
00:00:52,800 --> 00:00:56,390
So this number here is clearly gonna be higher

17
00:00:56,390 --> 00:00:57,373
than this one.

18
00:00:58,230 --> 00:01:01,300
Well, it works this way because JavaScript

19
00:01:01,300 --> 00:01:05,489
has a well-defined order of operator precedence.

20
00:01:05,489 --> 00:01:10,180
So basically the order in which operators are executed.

21
00:01:10,180 --> 00:01:12,930
And to actually see the precedence of all the different

22
00:01:12,930 --> 00:01:17,433
operators, let's check out a very handy precedence table.

23
00:01:18,330 --> 00:01:21,150
So let's Google MDN.

24
00:01:21,150 --> 00:01:23,610
Which stands for Mozilla Developer Network

25
00:01:23,610 --> 00:01:27,893
and then operator precedence.

26
00:01:29,420 --> 00:01:31,690
And so the one you're looking for is this one.

27
00:01:31,690 --> 00:01:35,633
So the one that starts with developer.mozilla.org.

28
00:01:36,970 --> 00:01:39,370
So MDN is a very well known

29
00:01:39,370 --> 00:01:42,080
and widely used documentation site.

30
00:01:42,080 --> 00:01:45,400
And we will actually use MDN a lot throughout the course.

31
00:01:45,400 --> 00:01:47,490
And in one of the future sections,

32
00:01:47,490 --> 00:01:50,460
I will show you a bit better how to use this site.

33
00:01:50,460 --> 00:01:53,610
But for now we're looking for a table that is here

34
00:01:53,610 --> 00:01:56,560
on this page and it's this one.

35
00:01:56,560 --> 00:02:00,500
So here we can see that grouping using parenthesis here,

36
00:02:00,500 --> 00:02:03,428
has the highest precedence of 21.

37
00:02:03,428 --> 00:02:07,640
And then we have all the operators that we already saw.

38
00:02:07,640 --> 00:02:11,210
So here plus minus, plus plus,

39
00:02:11,210 --> 00:02:14,160
so they have a precedence of 17.

40
00:02:14,160 --> 00:02:16,820
Then we have a bunch of other stuff here that we don't know

41
00:02:16,820 --> 00:02:20,523
yet, but here is also type of, that we already do know.

42
00:02:21,360 --> 00:02:24,430
We have the exponentiation operator that I showed you.

43
00:02:24,430 --> 00:02:27,000
We have all these math operators here.

44
00:02:27,000 --> 00:02:31,430
We have all comparison operators, right?

45
00:02:31,430 --> 00:02:35,970
We have some well, some other equality operators here,

46
00:02:35,970 --> 00:02:39,110
and a bunch of other operators.

47
00:02:39,110 --> 00:02:41,750
And this is actually a nice reference where you can see all

48
00:02:41,750 --> 00:02:46,040
the operators that exist in JavaScript in one handy table.

49
00:02:46,040 --> 00:02:49,410
But let's not stay in the context of our current example

50
00:02:49,410 --> 00:02:50,870
which is this one here.

51
00:02:50,870 --> 00:02:53,850
And let's understand what exactly happens here,

52
00:02:53,850 --> 00:02:56,800
in terms of operator precedence.

53
00:02:56,800 --> 00:03:01,310
So we already know that these two calculations here are done

54
00:03:01,310 --> 00:03:02,950
before the comparison.

55
00:03:02,950 --> 00:03:05,623
And so let's actually see that in the table.

56
00:03:06,730 --> 00:03:09,020
So here we have the comparison.

57
00:03:09,020 --> 00:03:12,330
So this greater than and you see that it has a lower

58
00:03:12,330 --> 00:03:15,890
precedence than the subtraction here.

59
00:03:15,890 --> 00:03:19,330
So this has 14 and this has 12, right?
60
00:03:19,330 --> 00:03:21,060
And of course you don't need to know any

61
00:03:21,060 --> 00:03:23,170
of these precedence numbers.

62
00:03:23,170 --> 00:03:24,510
Okay, don't worry about that.

63
00:03:24,510 --> 00:03:27,260
It doesn't matter, no one knows these.

64
00:03:27,260 --> 00:03:30,514
You just have to have a general idea of which operators

65
00:03:30,514 --> 00:03:32,743
are executed first.

66
00:03:33,700 --> 00:03:36,156
So usually all the math operators are executed

67
00:03:36,156 --> 00:03:39,630
before the comparison operators for example,

68
00:03:39,630 --> 00:03:41,200
because that makes sense.

69
00:03:41,200 --> 00:03:44,480
And so with this, we explain why this kind of comparison

70
00:03:44,480 --> 00:03:46,177
that we have here works.

71
00:03:46,177 --> 00:03:47,630
Now in this table,

72
00:03:47,630 --> 00:03:51,130
we can also see which operators are executed from left

73
00:03:51,130 --> 00:03:54,230
to right and which one from right to left.

74
00:03:54,230 --> 00:03:55,063
Like for example,
75
00:03:55,063 --> 00:03:58,820
the exponentiation operator is executed from right to left.

76
00:03:58,820 --> 00:04:01,870
While most operators especially the mathematical ones

77
00:04:01,870 --> 00:04:04,600
are executed from left to right.

78
00:04:04,600 --> 00:04:05,453
For example,

79
00:04:07,950 --> 00:04:12,950
let's say we wanted to calculate 25 minus 10 minus five.

80
00:04:14,770 --> 00:04:18,623
And so this one should be 10, right?

81
00:04:19,630 --> 00:04:21,033
So let's check that.

82
00:04:21,899 --> 00:04:23,780
And indeed we get 10.

83
00:04:23,780 --> 00:04:26,630
But if it was right to left,

84
00:04:26,630 --> 00:04:29,330
then it would be five minus 10 minus 25

85
00:04:29,330 --> 00:04:32,690
which would then be something completely different.

86
00:04:32,690 --> 00:04:36,020
So this is an example of left to right operation.

87
00:04:36,020 --> 00:04:37,620
But assignment, for example,

88
00:04:37,620 --> 00:04:40,723
is a good example of right to left execution.

89
00:04:41,650 --> 00:04:44,293
So let's see where we actually have assignment here.

90
00:04:45,550 --> 00:04:49,080
So it should be one of the lowest ones.

91
00:04:49,080 --> 00:04:50,830
And indeed it is.

92
00:04:50,830 --> 00:04:52,063
So it's number three.

93
00:04:53,750 --> 00:04:57,450
And so as I said, this one is right to left.

94
00:04:57,450 --> 00:04:59,130
And so let me show you a nice example

95
00:04:59,130 --> 00:05:01,510
of why this is important.

96
00:05:01,510 --> 00:05:03,940
So let's declare two variables,

97
00:05:03,940 --> 00:05:08,210
let X and Y and here's something new.

98
00:05:08,210 --> 00:05:12,433
So we can define two variables at the same time like this.

99
00:05:13,470 --> 00:05:16,730
So now in one line we declared two empty values.

100
00:05:16,730 --> 00:05:19,810
So two values which are gonna hold for now

101
00:05:19,810 --> 00:05:22,310
the value of undefined, right?

102
00:05:22,310 --> 00:05:24,860
So that's X and Y.

103
00:05:24,860 --> 00:05:26,950
And now, we can do this.

104
00:05:26,950 --> 00:05:31,020
We can say that X should be equal to Y should be equal

105
00:05:31,020 --> 00:05:36,020
to 25 minus 10, minus five which we already know is 10.

106
00:05:38,210 --> 00:05:41,623
And so let's now log both of these values to the console.

107
00:05:42,520 --> 00:05:45,133
And what do you think will happen?

108
00:05:46,800 --> 00:05:48,680
You can really try to think about this

109
00:05:48,680 --> 00:05:50,163
before checking the result.

110
00:05:51,860 --> 00:05:54,570
And so what is it gonna be?

111
00:05:54,570 --> 00:05:56,810
And actually let's delete this one first,

112
00:05:56,810 --> 00:05:58,833
so to avoid some confusion there.

113
00:05:59,710 --> 00:06:00,543
And.

114
00:06:01,760 --> 00:06:05,570
So, we see that X and Y are both 10.

115
00:06:05,570 --> 00:06:08,120
And so let's analyze why that happens.

116
00:06:08,120 --> 00:06:11,140
So when JavaScript first finds this line of code

117
00:06:11,140 --> 00:06:12,480
here to execute.

118
00:06:12,480 --> 00:06:15,090
It will look at all the operators that are present
119
00:06:15,090 --> 00:06:17,760
and it will see the minus operators.

120
00:06:17,760 --> 00:06:19,610
And so it will start with these,

121
00:06:19,610 --> 00:06:23,310
because they have a higher precedence, right?

122
00:06:23,310 --> 00:06:27,457
So assignment has only three, but the,

123
00:06:30,680 --> 00:06:32,390
where is it?

124
00:06:32,390 --> 00:06:33,223
Here it is.

125
00:06:33,223 --> 00:06:35,920
So the subtraction has a 14.

126
00:06:35,920 --> 00:06:38,230
And so of course it's gonna be executed first

127
00:06:38,230 --> 00:06:39,600
and left to right.

128
00:06:39,600 --> 00:06:41,110
And so, as we already know,

129
00:06:41,110 --> 00:06:43,363
this year will turn out to be 10.

130
00:06:45,090 --> 00:06:46,950
And so let's just write that here.

131
00:06:46,950 --> 00:06:48,830
So after these minus operations

132
00:06:48,830 --> 00:06:52,420
we end up with this code basically.

133
00:06:52,420 --> 00:06:57,420
So X equals Y equals 10, right?
134
00:06:57,540 --> 00:07:01,720
Because again, 10 is the result of doing these operations.

135
00:07:01,720 --> 00:07:04,200
And so now we only have two operators left

136
00:07:04,200 --> 00:07:06,430
which are the equal operators.

137
00:07:06,430 --> 00:07:08,470
And so now they are executed

138
00:07:08,470 --> 00:07:12,950
but as I showed you before they are executed right to left.

139
00:07:12,950 --> 00:07:17,950
So from this side here, starting from the 10 to this side.

140
00:07:17,950 --> 00:07:22,950
And so what happens is that we will have Y equals 10.

141
00:07:23,570 --> 00:07:26,290
And so at this point, Y is equal to 10.

142
00:07:26,290 --> 00:07:31,290
And so what we have then is X equal to 10, okay.

143
00:07:31,290 --> 00:07:34,770
And then after that, we're only left with X equal 10.

144
00:07:34,770 --> 00:07:39,410
And so at the end, both X and Y are gonna be 10.

145
00:07:39,410 --> 00:07:41,660
Okay, maybe that sounded a bit confusing,

146
00:07:41,660 --> 00:07:43,060
but that's just how it works

147
00:07:43,060 --> 00:07:46,310
when you evaluate from right to left.

148
00:07:46,310 --> 00:07:48,510
And actually that's the way it has to be,

149
00:07:48,510 --> 00:07:51,770
because if it was the other way around this wouldn't work.

150
00:07:51,770 --> 00:07:54,010
Just imagine if we had this assignment

151
00:07:54,010 --> 00:07:56,070
working from left to right.

152
00:07:56,070 --> 00:07:58,840
Then X would be equal to Y

153
00:07:58,840 --> 00:08:01,390
and Y is undefined at this point.

154
00:08:01,390 --> 00:08:06,200
Remember, because we declared it here as an empty variable.

155
00:08:06,200 --> 00:08:07,230
And so again,

156
00:08:07,230 --> 00:08:10,286
if assignment would be from left to right then first

157
00:08:10,286 --> 00:08:13,450
X would be equal to Y which would be undefined

158
00:08:13,450 --> 00:08:16,660
and then Y would be equal to 10.

159
00:08:16,660 --> 00:08:19,497
And so that's not the result that we expect here.

160
00:08:19,497 --> 00:08:22,060
And so once more, the way this works

161
00:08:22,060 --> 00:08:25,750
is actually very logical and makes a lot of sense.

162
00:08:25,750 --> 00:08:27,670
So I hope that made sense.

163
00:08:27,670 --> 00:08:28,503
And now to finish,

164
00:08:28,503 --> 00:08:33,429
let's just check out the one with the highest precedence,

165
00:08:33,429 --> 00:08:35,230
which is just grouping.

166
00:08:35,230 --> 00:08:37,380
So basically using parenthesis.

167
00:08:37,380 --> 00:08:40,909
And that actually works just like in mathematics

168
00:08:40,909 --> 00:08:44,884
where operations within parenthesis are also executed first.

169
00:08:44,884 --> 00:08:48,300
So I hope you remember that from school.

170
00:08:48,300 --> 00:08:50,770
And the great example is to calculate

171
00:08:50,770 --> 00:08:53,300
the average of two values.

172
00:08:53,300 --> 00:08:56,700
So we have age Jonas and age Sarah.

173
00:08:56,700 --> 00:09:00,353
And so let's calculate the average age of these two people.

174
00:09:02,120 --> 00:09:04,380
So let's actually start by logging their ages

175
00:09:04,380 --> 00:09:07,183
to the console, just so we see.

176
00:09:10,850 --> 00:09:14,950
So age Jonas and age Sarah.

177
00:09:14,950 --> 00:09:17,330
And now I want to calculate the average.
178
00:09:17,330 --> 00:09:19,530
And actually that stood out here above that.

179
00:09:20,440 --> 00:09:23,400
So let's say average age.

180
00:09:23,400 --> 00:09:28,090
And once more, don't forget the descriptive variable names.

181
00:09:28,090 --> 00:09:31,340
So average age describes exactly what this variable

182
00:09:31,340 --> 00:09:33,210
is going to hold.

183
00:09:33,210 --> 00:09:36,300
So to calculate an average, we need to add two values

184
00:09:36,300 --> 00:09:38,930
together and then divide them by two.

185
00:09:38,930 --> 00:09:41,760
At least that's when we have just two values.

186
00:09:41,760 --> 00:09:43,050
So let's say,

187
00:09:43,050 --> 00:09:48,010
age Jonas plus age Sarah.

188
00:09:48,010 --> 00:09:52,230
So that's the addition and then divided by two.

189
00:09:52,230 --> 00:09:54,750
But now what is going to happen?

190
00:09:54,750 --> 00:09:57,073
Well, according to our precedence table,

191
00:09:57,930 --> 00:10:02,930
we have the division here happening before the subtraction.

192
00:10:03,360 --> 00:10:06,740
So this is 15 and this is 14.
193
00:10:06,740 --> 00:10:10,360
And so what happens first is age Sarah is gonna be divided

194
00:10:10,360 --> 00:10:13,473
by two and then the age of Jonas is gonna be added.

195
00:10:14,940 --> 00:10:18,893
So let's actually log that results here as well.

196
00:10:21,560 --> 00:10:25,510
And so here the average age is now 55.5.

197
00:10:25,510 --> 00:10:28,560
Which really doesn't make any sense because how can

198
00:10:28,560 --> 00:10:33,130
the average be larger than one of the two ages, right?

199
00:10:33,130 --> 00:10:35,430
And so that's where the parenthesis come in.

200
00:10:35,430 --> 00:10:39,010
So by using parenthesis, once more,

201
00:10:39,010 --> 00:10:41,170
just like in mathematics,

202
00:10:41,170 --> 00:10:44,050
we can make it so that this operation here,

203
00:10:44,050 --> 00:10:46,270
is executed first.

204
00:10:46,270 --> 00:10:48,910
Okay, so basically everything that is within

205
00:10:48,910 --> 00:10:53,910
the parenthesis which have the precedence of 21, right?

206
00:10:54,472 --> 00:10:59,472
So now this one is executed first and then the division.

207
00:11:00,160 --> 00:11:04,280
And so yeah, now it makes sense.

208
00:11:04,280 --> 00:11:05,113
Okay.

209
00:11:05,113 --> 00:11:07,720
I hope that wasn't too confusing.

210
00:11:07,720 --> 00:11:09,230
And now you're actually ready

211
00:11:09,230 --> 00:11:11,620
for your first coding challenge.

212
00:11:11,620 --> 00:11:14,230
So I hope to see you soon in the next video

213
00:11:14,230 --> 00:11:15,943
for your first challenge.