Original subtitles

1 1

Let me now show you some pitfalls 2

2

of the this keyword related to regular functions 3

3

and arrow functions. 4

4

This way we can learn when we should use and avoid 5

5

each of them. 6

6

And to start, let's get back the Jonas object 7

7

from before, 8

8

and I will also add a first name property. 9

9

All right, and now let's add a second method here, 10

10

but this time using an arrow function. 11

11

So we will do a very simple greet method. 12

12

And so an arrow function here, 13

13

which simply logs to the console 14

14

Hey, and then the name. 15

15

And so we're gonna take this name from the object. 16

16

So this dot first name, 17

17

or at least, that's what we think we're doing. 18

18

So let me now show you what happens, 19

19

as I call jonas.greet. 20

20

And maybe you can also anticipate it based on the knowledge 21

21

that you already have off the this keywords 22

22

when used in an arrow function. 23

23

So let's see what the result is here. 24

24

And we get, Hey undefined. 25

25

So that's not Hey Jonas, as we might have expected. 26

26

And the reason is exactly the one that I mentioned 27

27

in the last lecture, 28

28

which is the fact that an arrow function 29

29

does not get its own this keyword, 30

30

it will simply use the this keyword from its surroundings. 31

31

So in other words, its parents this keyword, 32

32

and the parent scope of this greet method 33

33

is the global scope. Okay? 34

34

Just note here that this is actually not a code block. 35

35

So you might think that, like this kind of block here, 36

36

ought to create its own scope, but it doesn't. 37

37

So this is not a code block. It is an object literal. 38

38

So it's just a way that we literally define objects. Okay? 39

39

So all of this here is in the global scope still. 40

40

And so therefore, that includes this greet method. 41

41

It is in the global scope, 42

42

and so therefore, the arrow function here, 43

43

which does not have its own this keyword, 44

44

will use the this keyword from the global scope. 45

45

And remember that is the window object. Right? 46

46

And so this dot first name is also undefined. 47

47

And I think that this is actually something 48

48

that we haven't seen before. 49

49

So when we try to access a property that doesn't exist 50

50

on a certain object, we do not get an error, 51

51

but simply undefined. 52

52

And so that is what is happening here. 53

53

That's why we get undefined, 54

54

because this is the window object, 55

55

so just as we saw before, and then on the window object, 56

56

there is no first name, and so we get undefined. Okay? 57

57

And actually, this behavior can become pretty dangerous, 58

58

in case we use var, to declare variables. 59

59

Because remember from a previous lecture, 60

60

that variables declared with var, actually create properties 61

61

on the global object. 62

62

And so let's imagine we have this. 63

63

So var first name equals Matilda. 64

64

And so now as we run the greet function, 65

65

it will say, Hey Matilda, okay? 66

66

So why is that? 67

67

So again, it is because inside of this function here, 68

68

the this keyword is window. 69

69

And actually, let me print that here to the console as well, 70

70

just so we can really see that here happening. Okay. 71

71

So again, window is this keyword inside 72

72

of this arrow function, even though that arrow function 73

73

was called by the Jonas object. 74

74

But that rule does not apply here, 75

75

because again, it's an arrow function. 76

76

And so if we take a look at this window object now, 77

77

and here, close to F, for first name, 78

78

you see here, that it does indeed have a property 79

79

called first name with the value of Matilda. 80

80

And again, that's because if we declare variables with var, 81

81

that creates these kind of properties on the global object. 82

82

And so therefore, this dot first name, 83

83

which translates to window dot first name is then Matilda. 84

84

And so that's why we then get Hey Matilda here. 85

85

So that's yet another reason not to use var. 86

86

So you see there's a pretty long list against var. 87

87

So from this example, the big takeaway 88

88

is that as a best practice, 89

89

you should never ever use an arrow function as a method. 90

90

And in my opinion, that's even true if you're not even using 91

91

the this keyword in a particular method. 92

92

Because if you have this rule of never using an arrow 93

93

function as a method, then you never have to think about 94

94

which type of function you should use. 95

95

You will always just use a normal function expression, 96

96

and like this, you will then prevent this kind of mistakes 97

97

from happen. 98

98

So this mistake that we saw here with Hey Matilda 99

99

is easy to prevent by simply not using var. 100

100

But even then, Hey undefined is still a buck. 101

101

It's still not correct. 102

102

And so that would have easily been avoided 103

103

by just using a regular function. Right? 104

104

If we had this, then of course now this object Jonas, 105

105

which is calling the function 106

106

would then be the this keyword. Right? 107

107

So you see first name Jonas, and then Hey Jonas. 108

108

Because now this method actually does get its own 109

109

this keyword. 110

110

But let's put it back. 111

111

And, Okay. Great. 112

112

And now, one final example of a pitfall of this keyword 113

113

is when we have a function inside of a method. 114

114

And that is a pretty common thing to happen. 115

115

And so let's now take a look at an example of that. 116

116

So let's create another Jonas object here. 117

117

Or, actually don't. 118

118

Actually let's just use this object here 119

119

that we already have. 120

120

And let's enhance this calcAge method. 121

121

So what I want in here is a function 122

122

that will basically return if the person is a millennial. 123

123

So easy enough, 124

124

let's create an isMillennial function in here. 125

125

And let's simply log to the console, 126

126

if this dot year is greater equal 1981, 127

127

and so that's the same rule that we used before, 128

128

so that the birth year needs to stay between 1981 and 1996. 129

129

So below 1996. 130

130

And then let's also call that function right here. 131

131

So isMillennial will be called 132

132

as we called the calcAge function. 133

133

So let's also do that. 134

134

So Jonas dot calcAge 135

135

So we're calling this method here, the calcAge method, 136

136

which is a regular method, so not an arrow function. 137

137

And so therefore, the this keyword right here 138

138

should be the Jonas object. 139

139

But then in here, we have a regular function, so this one, 140

140

and here we are then calling it again. 141

141

Now inside of this function, we are using the this keyword. 142

142

And so let's now see what happens as we reload the page. 143

143

And we get cannot read property year of undefined 144

144

on line 138. 145

145

So that's right here. 146

146

So what this means is that the this keyword 147

147

must be undefined. 148

148

That's what it says here. 149

149

So let's just log that as well, 150

150

and here, we can get rid of this one now, okay. 151

151

And indeed, the this key word here is undefined. 152

152

So why is that? 153

153

Well, if we think about this, then this here 154

154

is really just a regular function call, isn't it? 155

155

It is a regular function call, 156

156

even though it happens inside of a method. 157

157

And the rule says that inside a regular function call, 158

158

which this clearly is, that this keyword must be undefined. 159

159

And so therefore it is undefined right here. 160

160

So this is just as if this function was outside 161

161

of this method. 162

162

So if we copy this function out here, 163

163

we would get the exact same result. 164

164

Now some people consider that this is a bug in JavaScript 165

165

but in my opinion, it's not really. 166

166

It's just how the this keyword works. 167

167

It's a clear rule that a regular function call 168

168

has the this keyword set to undefined. 169

169

And so that's just what is happening here. 170

170

Now there are two solutions to this problem. 171

171

The first solution is to use an extra variable 172

172

that we usually call self. 173

173

So outside of the function, let's say self 174

174

and then we set that to this. 175

175

Because here we are still outside 176

176

of this isMillennial function. 177

177

And so here, we still have access to this keyword 178

178

set to Jonas. Right? 179

179

And so then in here, we can use simply self. 180

180

And let's do that just here. 181

181

And here I will duplicate this line 182

182

so that we can keep the original one. 183

183

And so now let's use self here. 184

184

And so then through the scope chain, 185

185

this self will be equal to this. 186

186

So self is referenced here, 187

187

but it's not of course in the scope. 188

188

And so JavaScript goes up the scope chain, 189

189

into the parent scope, which is calcAge. 190

190

So here is where self is defined, and it is defined as this. 191

191

So as to this keyword. 192

192

And so this is a way in which we can preserve 193

193

the this keyword. 194

194

This can also be called debt, so that you might also see. 195

195

And so as we reload, now, this actually works. 196

196

So now we get the value of true. 197

197

So this was kind of the pre ES6 solution, 198

198

but you might still find this solution 199

199

in some older code bases. 200

200

However, now in ES6 we have a more modern 201

201

and better solution. 202

202

And that solution is to use an arrow function. Alright. 203

203

So let's actually copy all of this, 204

204

because I want to preserve both versions here. 205

205

And now I will just comment out this first. 206

206

Let's say solution one, 207

207

but now here we have solution two, 208

208

which does not need this extra variable. 209

209

Okay, so let's get rid of this 210

210

bring this back and here this again. 211

211

And now, again, the solution to the problem 212

212

that we saw before is that we can now use an arrow function. 213

213

And that is going to work because the arrow function 214

214

does not have its own this keyword. Right? 215

215

So let's remember again, that when we just call this, 216

216

we get that to this keyword is undefined. 217

217

And that's because a regular function 218

218

gets its own this keyword. 219

219

But the arrow function will not, 220

220

it will simply use this keyword of its parent scope. 221

221

And in this case, that will be the calcAge method, 222

222

and in here the this keyword is Jonas, so the Jonas object. 223

223

And therefore then here in an arrow function, 224

224

that would also be the this keyword. 225

225

And then it is gonna work as expected, 226

226

and indeed, now it is true. 227

227

And again, this worked because this arrow function 228

228

uses the this keyword from its parent scope. 229

229

And in this case, in the parent scope, 230

230

the this keyword is Jonas. 231

231

So basically an arrow function inherits the this keyword 232

232

from the parent scope. 233

233

And that is exactly what we need here. All right. 234

234

And so here, you see that it's pretty important 235

235

to know exactly how each of the different type of functions 236

236

work in regards to the this keyword. 237

237

Because then you can really use them according 238

238

to your specific needs. 239

239

Great. So I hope that especially this solution here 240

240

made sense to you. 241

241

And that when you need it at some point in your journey, 242

242

or in your job, you can remember that this is a very useful 243

243

use case of the arrow function. 244

244

Now, just to finish this lecture, 245

245

I also want to quickly touch on the arguments keywords. 246

246

Maybe you remember me talking about that, 247

247

also in a previous lecture. 248

248

So in the video about execution context, 249

249

and the call stack, 250

250

we learned that functions also get access 251

251

to an arguments keyword. 252

252

So not just the this keyword, but also an arguments keyword. 253

253

Now, just like the this keyword, the arguments keyword 254

254

is only available in regular functions. 255

255

So let's create another function here. 256

256

So first an expression. 257

257

So again, basically that's our functions for adding 258

258

and actually let me just grab them from here. 259

259

I think I defined them somewhere up here. 260

260

Yes. 261

261

So there's no need to rewrite 262

262

the same code over and over again. 263

263

Just add a comment here, 264

264

arguments keyword. 265

265

And then let me also print to the console, that keyword. 266

266

So let me quickly call this function here now. 267

267

So two and five 268

268

so just so we see the arguments keyword. 269

269

And so down here it is 270

270

and you see that we get basically an array 271

271

with two and five. 272

272

And so that's exactly the two parameters that we passed in. 273

273

And this can be useful when we need a function 274

274

to accept more parameters than we actually specified. 275

275

So this is something that we never did before. 276

276

So up until this point, we have only ever specified 277

277

exactly the arguments that we have here in the list 278

278

of parameters. 279

279

So we have two parameters, and so two arguments. 280

280

But it is completely legal to add more arguments. 281

281

They will not have a name, so we didn't name them, 282

282

but they exist. 283

283

And we can see them here in the arguments array. All right. 284

284

So they do appear here, and we can use them 285

285

therefore in the functions. 286

286

For example, we could use a loop, 287

287

and then loop over this array 288

288

and add all the numbers together. 289

289

But now my point here is that the arrow function 290

290

does not get this keyword. 291

291

So that's also log it to the console here 292

292

so let's put this here in curly braces, 293

293

then remember when we have more than one line of code, 294

294

we need to explicitly return. 295

295

And so let's try to take a look at the arguments keyword 296

296

here as well. 297

297

So add arrow two, five, eight, let's say, 298

298

but then we get an error. 299

299

So arguments is not defined. All right. 300

300

So this was simply just to show you 301

301

that the arguments keyword exists, 302

302

but that it only exists in regular functions. 303

303

So in function expressions like this, 304

304

but also in function declarations, 305

305

but not in an arrow function. 306

306

But anyway, the arguments keyword is not that important 307

307

in modern JavaScript anymore, 308

308

because now we have a more modern way 309

309

of dealing with multiple parameters. 310

310

But still it's important that you are aware 311

311

that this arguments keywords exists. 312

312

All right, and now with all these lectures 313

313

on regular functions and arrow functions, 314

314

you should know all the differences between them, 315

315

and even more importantly, when to use each of them.