Original subtitles

1 1

And this lecture, 2

2

we're gonna talk about the precedence 3

3

of different operators. 4

4

So I already commented out the code from the last lecture, 5

5

but let's actually bring some of it back here. 6

6

And in particular, the calculation of this ages. 7

7

So like this. 8

8

And then also this code that we discussed 9

9

by the end of the last video. 10

10

Remember that? 11

11

So the question that I asked by the end of the last video 12

12

was why these two subtractions here so this one, 13

13

and this one are executed before this comparison operator. 14

14

So basically the question is why does this work? 15

15

Okay, because we see that it does actually work. 16

16

So this number here is clearly gonna be higher 17

17

than this one. 18

18

Well, it works this way because JavaScript 19

19

has a well-defined order of operator precedence. 20

20

So basically the order in which operators are executed. 21

21

And to actually see the precedence of all the different 22

22

operators, let's check out a very handy precedence table. 23

23

So let's Google MDN. 24

24

Which stands for Mozilla Developer Network 25

25

and then operator precedence. 26

26

And so the one you're looking for is this one. 27

27

So the one that starts with developer.mozilla.org. 28

28

So MDN is a very well known 29

29

and widely used documentation site. 30

30

And we will actually use MDN a lot throughout the course. 31

31

And in one of the future sections, 32

32

I will show you a bit better how to use this site. 33

33

But for now we're looking for a table that is here 34

34

on this page and it's this one. 35

35

So here we can see that grouping using parenthesis here, 36

36

has the highest precedence of 21. 37

37

And then we have all the operators that we already saw. 38

38

So here plus minus, plus plus, 39

39

so they have a precedence of 17. 40

40

Then we have a bunch of other stuff here that we don't know 41

41

yet, but here is also type of, that we already do know. 42

42

We have the exponentiation operator that I showed you. 43

43

We have all these math operators here. 44

44

We have all comparison operators, right? 45

45

We have some well, some other equality operators here, 46

46

and a bunch of other operators. 47

47

And this is actually a nice reference where you can see all 48

48

the operators that exist in JavaScript in one handy table. 49

49

But let's not stay in the context of our current example 50

50

which is this one here. 51

51

And let's understand what exactly happens here, 52

52

in terms of operator precedence. 53

53

So we already know that these two calculations here are done 54

54

before the comparison. 55

55

And so let's actually see that in the table. 56

56

So here we have the comparison. 57

57

So this greater than and you see that it has a lower 58

58

precedence than the subtraction here. 59

59

So this has 14 and this has 12, right? 60

60

And of course you don't need to know any 61

61

of these precedence numbers. 62

62

Okay, don't worry about that. 63

63

It doesn't matter, no one knows these. 64

64

You just have to have a general idea of which operators 65

65

are executed first. 66

66

So usually all the math operators are executed 67

67

before the comparison operators for example, 68

68

because that makes sense. 69

69

And so with this, we explain why this kind of comparison 70

70

that we have here works. 71

71

Now in this table, 72

72

we can also see which operators are executed from left 73

73

to right and which one from right to left. 74

74

Like for example, 75

75

the exponentiation operator is executed from right to left. 76

76

While most operators especially the mathematical ones 77

77

are executed from left to right. 78

78

For example, 79

79

let's say we wanted to calculate 25 minus 10 minus five. 80

80

And so this one should be 10, right? 81

81

So let's check that. 82

82

And indeed we get 10. 83

83

But if it was right to left, 84

84

then it would be five minus 10 minus 25 85

85

which would then be something completely different. 86

86

So this is an example of left to right operation. 87

87

But assignment, for example, 88

88

is a good example of right to left execution. 89

89

So let's see where we actually have assignment here. 90

90

So it should be one of the lowest ones. 91

91

And indeed it is. 92

92

So it's number three. 93

93

And so as I said, this one is right to left. 94

94

And so let me show you a nice example 95

95

of why this is important. 96

96

So let's declare two variables, 97

97

let X and Y and here's something new. 98

98

So we can define two variables at the same time like this. 99

99

So now in one line we declared two empty values. 100

100

So two values which are gonna hold for now 101

101

the value of undefined, right? 102

102

So that's X and Y. 103

103

And now, we can do this. 104

104

We can say that X should be equal to Y should be equal 105

105

to 25 minus 10, minus five which we already know is 10. 106

106

And so let's now log both of these values to the console. 107

107

And what do you think will happen? 108

108

You can really try to think about this 109

109

before checking the result. 110

110

And so what is it gonna be? 111

111

And actually let's delete this one first, 112

112

so to avoid some confusion there. 113

113

And. 114

114

So, we see that X and Y are both 10. 115

115

And so let's analyze why that happens. 116

116

So when JavaScript first finds this line of code 117

117

here to execute. 118

118

It will look at all the operators that are present 119

119

and it will see the minus operators. 120

120

And so it will start with these, 121

121

because they have a higher precedence, right? 122

122

So assignment has only three, but the, 123

123

where is it? 124

124

Here it is. 125

125

So the subtraction has a 14. 126

126

And so of course it's gonna be executed first 127

127

and left to right. 128

128

And so, as we already know, 129

129

this year will turn out to be 10. 130

130

And so let's just write that here. 131

131

So after these minus operations 132

132

we end up with this code basically. 133

133

So X equals Y equals 10, right? 134

134

Because again, 10 is the result of doing these operations. 135

135

And so now we only have two operators left 136

136

which are the equal operators. 137

137

And so now they are executed 138

138

but as I showed you before they are executed right to left. 139

139

So from this side here, starting from the 10 to this side. 140

140

And so what happens is that we will have Y equals 10. 141

141

And so at this point, Y is equal to 10. 142

142

And so what we have then is X equal to 10, okay. 143

143

And then after that, we're only left with X equal 10. 144

144

And so at the end, both X and Y are gonna be 10. 145

145

Okay, maybe that sounded a bit confusing, 146

146

but that's just how it works 147

147

when you evaluate from right to left. 148

148

And actually that's the way it has to be, 149

149

because if it was the other way around this wouldn't work. 150

150

Just imagine if we had this assignment 151

151

working from left to right. 152

152

Then X would be equal to Y 153

153

and Y is undefined at this point. 154

154

Remember, because we declared it here as an empty variable. 155

155

And so again, 156

156

if assignment would be from left to right then first 157

157

X would be equal to Y which would be undefined 158

158

and then Y would be equal to 10. 159

159

And so that's not the result that we expect here. 160

160

And so once more, the way this works 161

161

is actually very logical and makes a lot of sense. 162

162

So I hope that made sense. 163

163

And now to finish, 164

164

let's just check out the one with the highest precedence, 165

165

which is just grouping. 166

166

So basically using parenthesis. 167

167

And that actually works just like in mathematics 168

168

where operations within parenthesis are also executed first. 169

169

So I hope you remember that from school. 170

170

And the great example is to calculate 171

171

the average of two values. 172

172

So we have age Jonas and age Sarah. 173

173

And so let's calculate the average age of these two people. 174

174

So let's actually start by logging their ages 175

175

to the console, just so we see. 176

176

So age Jonas and age Sarah. 177

177

And now I want to calculate the average. 178

178

And actually that stood out here above that. 179

179

So let's say average age. 180

180

And once more, don't forget the descriptive variable names. 181

181

So average age describes exactly what this variable 182

182

is going to hold. 183

183

So to calculate an average, we need to add two values 184

184

together and then divide them by two. 185

185

At least that's when we have just two values. 186

186

So let's say, 187

187

age Jonas plus age Sarah. 188

188

So that's the addition and then divided by two. 189

189

But now what is going to happen? 190

190

Well, according to our precedence table, 191

191

we have the division here happening before the subtraction. 192

192

So this is 15 and this is 14. 193

193

And so what happens first is age Sarah is gonna be divided 194

194

by two and then the age of Jonas is gonna be added. 195

195

So let's actually log that results here as well. 196

196

And so here the average age is now 55.5. 197

197

Which really doesn't make any sense because how can 198

198

the average be larger than one of the two ages, right? 199

199

And so that's where the parenthesis come in. 200

200

So by using parenthesis, once more, 201

201

just like in mathematics, 202

202

we can make it so that this operation here, 203

203

is executed first. 204

204

Okay, so basically everything that is within 205

205

the parenthesis which have the precedence of 21, right? 206

206

So now this one is executed first and then the division. 207

207

And so yeah, now it makes sense. 208

208

Okay. 209

209

I hope that wasn't too confusing. 210

210

And now you're actually ready 211

211

for your first coding challenge. 212

212

So I hope to see you soon in the next video 213

213

for your first challenge.