Original subtitles

1 1

Maybe it didn't seem like it 2

2

but hoisting is actually a fairly straightforward process. 3

3

So let's just go through the different scenarios here 4

4

starting with variables. 5

5

So let's just create three variables here 6

6

using the three different ways of declaring them. 7

7

So now let for the job, teacher 8

8

and then const for the birth year 9

9

let's just call it year 1991. 10

10

And now let's try to use 11

11

all of these three variables 12

12

before declaring them, just to see what happens. 13

13

So me, job and year. 14

14

So from the rules that we learned 15

15

in the previous lecture, 16

16

what do you expect will happen now? 17

17

Well, the first console dot log result in undefined, 18

18

and that's because variables declared 19

19

with var are actually hoisted, 20

20

but they are hoisted to the value of undefined. 21

21

And so therefore when we try to access them 22

22

undefined is exactly the result that we get. 23

23

And so that's the reason why we see this here. 24

24

Then on the contrary we have this let variable, 25

25

and so here we see that we cannot 26

26

access job before initialization. 27

27

And so that's exactly the kind of error 28

28

that I showed you in the last slide. 29

29

And the origin of this error 30

30

is the fact that the job variable is still 31

31

in the temporal dead zone here at this point. 32

32

Right, so remember that the temporal dead zone 33

33

of a variable declared with a let or const, 34

34

starts from the beginning of the current scope 35

35

and so that's basically here, 36

36

so in this case, it's the global scope. 37

37

So from the beginning of the scope 38

38

until the point of the code where it is defined 39

39

and so here. 40

40

And this means that at this point of course, 41

41

the job variable is still in the temporal dead zone, 42

42

and the same is true for year. 43

43

And so now we get the same error here 44

44

for the year variable as well. 45

45

All right, so let's comment out both of these. 46

46

Let me just right here 47

47

that is hoisting with variables 48

48

and now let's try out functions. 49

49

So let's create a function declarations 50

50

and function expressions here. 51

51

So function, and again I will use a simple add 52

52

let me just call it, addDecl, 53

53

which stands for declaration a, b 54

54

and return a plus b, 55

55

and now a function expression. 56

56

So addExpression, at once more return a plus b. 57

57

And now since we're doing these two, 58

58

let's also create an arrow. 59

59

So addArrow, a, b and return a plus b implicitly. 60

60

So I hope you remember 61

61

that this is how the arrow function works. 62

62

And now once again 63

63

let's try to use these functions, 64

64

before they are defined. 65

65

And so I will log them to the console, 66

66

so the result of calling them 67

67

because they returned something, 68

68

and so we need to log the result to the console 69

69

so as you already know. 70

70

So let's add two plus three, 71

71

and now what do you think will happen? 72

72

Do you think that it will be undefined again 73

73

just like we have here with the var variable? 74

74

Let's see. 75

75

And no, we actually get the result of five. 76

76

And so indeed we were able 77

77

to call the function declaration 78

78

before it was actually defined here in the code. 79

79

All right, and now let's try the same 80

80

for the other two expression and addArrow, 81

81

but now I hope that you can already 82

82

anticipate what is gonna happen. 83

83

And so indeed we get an 84

84

cannot access addExpression before initialization. 85

85

And so that's exactly the same error 86

86

that we got before here 87

87

with this let and const variables. 88

88

And that's because this function here right now 89

89

is simply a const variable too. 90

90

And so it means that it's now also 91

91

in the temporal dead zone right? 92

92

So again we are simply assigning 93

93

a function value to this variable. 94

94

And since this variable was defined with const, 95

95

it is now in a temporal dead zone 96

96

and therefore we get this exact 97

97

same error message as before. 98

98

And the same of course 99

99

is gonna happen with the arrow, right? 100

100

But now let me show you what happens 101

101

when we change these to var. 102

102

So do you think that now it will work somehow? 103

103

Okay, we still get an error, 104

104

but it is another error message here. 105

105

So right now addExpression is not a function. 106

106

And once again 107

107

the same is gonna be happening for the arrow. 108

108

Okay, and now let's think about the reason 109

109

for this different error message here. 110

110

So as you already know, any variables declared 111

111

with var will be hoisted and set to undefined. 112

112

And now this addExpression here is essentially that, 113

113

it's a variable declared with var 114

114

and so right now it is undefined. 115

115

And then here we are trying 116

116

to call undefined basically. 117

117

So we are doing essentially this so undefined 118

118

and then we are trying to call it. 119

119

And so we should not get the exact same error. 120

120

So you see it's not a function. 121

121

And in fact, let me show it 122

122

to you here even better. 123

123

So addArrow should now be undefined, 124

124

and indeed, here it is. 125

125

And once more that is because 126

126

we now declared these two here with var. 127

127

Okay, so let's simply take both of these out 128

128

and for you to keep this as a reference, 129

129

I will leave this one as a var 130

130

and this as a const, 131

131

but just know that both of them will not work. 132

132

The only function that you can use 133

133

before declaring it, is the add function declaration. 134

134

Okay. So now we covered all the rules here 135

135

and saw how hoisting works. 136

136

But now let's show me a very cool example 137

137

which can demonstrate a pitfall of hoisting. 138

138

And so it's a mistake that we can easily make 139

139

if we're not careful 140

140

and at the same time use var, 141

141

to declare our variables. 142

142

So let's just write example here. 143

143

So to start, let's declare a fictional function here, 144

144

so a function which is a function declaration, 145

145

and that's important. 146

146

So a fictional function that will delete 147

147

the shopping cart. 148

148

So let's say that we have 149

149

like an eCommerce website or application. 150

150

So let's simply log here, all products deleted. 151

151

And so this is a dangerous function 152

152

okay, that we should not be calling without care. 153

153

Next, let's also declare a variable 154

154

which contains the number of products. 155

155

And so now I will use a var 156

156

and this will then show you once more 157

157

why we should not use var products equals 10. 158

158

And now here at the top of our code, 159

159

we are going to write some logic 160

160

which will delete the shopping cart, 161

161

whenever the number of products is zero. 162

162

Now we already know that zero is a false value 163

163

and so we can write this, right? 164

164

So in this case, we want to call, 165

165

deleteShoppingCart now right? 166

166

So again, here we have var numProducts set to 10, 167

167

but then here we have this logic 168

168

in which we want to write that 169

169

when there is no products, 170

170

we want to delete the shopping cart. 171

171

But now what would actually happens? 172

172

So we get all products deleted 173

173

even though numProducts is actually 10. 174

174

So why did that happen? 175

175

Well, it is because of hoisting. 176

176

So at this point of the code here, 177

177

the numProducts variable is in fact, 178

178

not 10 instead, what is it? 179

179

Well, it is undefined. 180

180

And that's because of the way hoisting works 181

181

with var variables. 182

182

So we just show that to you very quickly, 183

183

and so indeed, now here from line 71, 184

184

which is this one, we get this undefined. 185

185

And we know that undefined is also a false value, 186

186

and so therefore, this code will instill execute 187

187

even though we thought that numProducts is 10, 188

188

but in fact, it's undefined, 189

189

and so that will also trigger the execution 190

190

of this if block here. 191

191

Now of course, 192

192

this is just a fictional tiny example 193

193

but in a large code base 194

194

with thousands of lines of code 195

195

and without best practices, 196

196

something like this can totally happen 197

197

and it's gonna be a bug, 198

198

that will be hard to find. 199

199

So what are these best practices? 200

200

What is the conclusion of all this? 201

201

Well, as a first step, as I told you many times 202

202

just don't use var to declare variables. 203

203

Use const most of the time to declare variables 204

204

and let, if you really need to change 205

205

the variable later. 206

206

Also in order to write clean code, 207

207

you should declare your variables 208

208

at the top of each scope. 209

209

That will just make your code 210

210

at least look a little bit better. 211

211

Finally, always declare all your functions first 212

212

and use them only after the declaration. 213

213

And this applies to all types of functions, 214

214

even function declarations, which are hoisted. 215

215

So you could use function declarations 216

216

before you declare them, 217

217

but still just don't do that it's just not clean. 218

218

Okay, so what I just told you 219

219

are the best practices, 220

220

not the rules of how it works in JavaScript. 221

221

All right, and now just to finish, 222

222

since we're talking about the differences 223

223

between let, const and var here, 224

224

let's just take two minutes 225

225

to see yet another small difference between them. 226

226

So let's again declare one variable for each 227

227

let y equals two. 228

228

So the values don't matter at all here. 229

229

And now let's just take a look 230

230

at the window object in the console. 231

231

Okay, x has been out of course, z here, 232

232

and so let's now take a look here 233

233

at the window object here in the console. 234

234

And window is the global object 235

235

of JavaScript in the browser. 236

236

And you can see all kinds of stuff in here, 237

237

for example, the alert window 238

238

that we have used before 239

239

or also some other functions 240

240

that we probably might have used already before. 241

241

So I'm not gonna go into that here, 242

242

but what is important, 243

243

so let's go all the way to the down here 244

244

and you can of course explore this by yourself 245

245

in case you're interested in, 246

246

but what matters here 247

247

is that besides all these functions, 248

248

we also get a property of x equals one. 249

249

And that's exactly the variable 250

250

that we declared right here using the var keyword. 251

251

However, we cannot find y or z here 252

252

anywhere in this object. 253

253

And that's because they were declared 254

254

with let or const. 255

255

And so variables declared that way 256

256

do not create properties on the window object. 257

257

So let me actually demonstrate this to you even better. 258

258

So we can say or we can test, 259

259

x equal, equal, equal window dot x. 260

260

So here we are testing if x 261

261

is actually a property of the window object. 262

262

And so if it is, then of course 263

263

x must be the same as window dot x. 264

264

And actually it is true. 265

265

And now the same for y and z, 266

266

and so in these cases, it is both false. 267

267

So in conclusion I just wanted to let you know 268

268

that variables declared with var, 269

269

will create a property 270

270

on the global window object. 271

271

And that can have some implications in some cases. 272

272

And again, you can take some time 273

273

to explore the window object 274

274

because it's quite interesting to see 275

275

everything that is in there. 276

276

All right, but with that being said 277

277

let's now finally move on to our next topic 278

278

which is gonna be the disc keyword.