Original subtitles

1 1

In this lecture, 2

2

we're gonna go back to the this keyword 3

3

and learn how we can set the this keyword manually 4

4

and also why we would want to do that. 5

5

So let's say we are an airline again 6

6

and in this case, Lufthansa, 7

7

which is the biggest European airline group, by the way. 8

8

And so let's create a very simple object 9

9

for this airline with a very simple booking method as well. 10

10

So we have the airline name. 11

11

We have the code basically. 12

12

We also want to keep an array of bookings. 13

13

So also inside of the object, 14

14

and then the book method. 15

15

And remember from the previous section, 16

16

I will now start using the way of writing methods, 17

17

using the enhanced object literal syntax. 18

18

And so that's simply by defining the method like this 19

19

without having to write a function. 20

20

So remember, before this, 21

21

we used to do this, right? 22

22

And if you still prefer this syntax, 23

23

you can still do this one. 24

24

But I do actually prefer the new syntax. 25

25

And so I'll just start using this one now. 26

26

So the flight number 27

27

and also the passenger name here. 28

28

So then let's log something to the console. 29

29

And again, this could have been boilerplate code here 30

30

but it's also good to practice writing this. 31

31

So this should be a template string booked a seat on, 32

32

so basically, we want to print like Jonas booked a seat 33

33

on Lufthansa flight 34

34

and then the flight number. 35

35

And so here we are now going to get the airline name 36

36

from the object. 37

37

And so we already learned 38

38

that for that, we use the this keyword, right? 39

39

And then flight this.iataCode. 40

40

So that's gonna be the LH 41

41

and then the flight number itself 42

42

that we pass into the function. 43

43

So the flightNumber. 44

44

So for now, this is just a nice review 45

45

of how the this keyword works, right? 46

46

And of course, I will now assume that you know 47

47

how all of this works 48

48

because otherwise, I will have to explain the same things 49

49

over and over again. 50

50

And so as I mentioned before, 51

51

you should only progress once you really understand 52

52

a certain topic. 53

53

Anyway, let's now use the book function here. 54

54

And I'll use the flight number 239 55

55

and then with my own name. 56

56

And let's right away book another Lufthansa flight 57

57

for let's say Mike Smith on flight number 635. 58

58

John Smith. 59

59

And now, if we take a look at the results, 60

60

then indeed, everything works just as expected, right? 61

61

And so it's important to understand 62

62

that the this keyword here points 63

63

to the lufthansa object itself 64

64

because that's the object 65

65

on which the book method here was called. 66

66

So again, that's just what I explained before, right? 67

67

But now let's say that after some years, 68

68

the Lufthansa Group created a new airline. 69

69

So let's create eurowings here. 70

70

And then a very similar object. 71

71

So with the airline, the code. 72

72

And also an empty bookings array. 73

73

Okay? 74

74

Oh, and by the way, 75

75

we actually also want our book method here 76

76

to add a new object to our bookings here. 77

77

So that's super important as well. 78

78

So I forget that. 79

79

So let's go back here. 80

80

So we will say again this 81

81

and then the bookings array 82

82

and then let's put a new object in there 83

83

with the flight 84

84

and so that's essentially gonna be this one. 85

85

So the code plus the flight number. 86

86

And then also the passenger name. 87

87

And then let's quickly log that to the console here. 88

88

So this.bookings is not a function 89

89

and of course, it's not. 90

90

We need the push method indeed. 91

91

And so now you see that we have an array 92

92

of our two bookings here. 93

93

So that works perfectly. 94

94

But now anyway, going back here to Eurowings, 95

95

of course, we also want to be able 96

96

to take bookings for a Eurowings flight, 97

97

so as being this airline, right? 98

98

Now, taking this exact same method here 99

99

and simply copying it and pasting it here 100

100

is a bad practice, right? 101

101

So of course, we are not gonna do that. 102

102

So instead, we will just take the method 103

103

and store it in an external function. 104

104

And then we can reuse that function 105

105

for all of the different airlines. 106

106

So what I mean is to create a new function called book 107

107

and we will simply set it to lufthansa.book, all right? 108

108

So again, this is possible 109

109

because JavaScript has first class functions. 110

110

And so we can simply take this function value here. 111

111

So that's this function 112

112

and then store it into a new variable, 113

113

which is then gonna be also the book function, okay? 114

114

Now, we could have written the function here also literally 115

115

but that's just not necessary. 116

116

We have it right here 117

117

and so let's just leave it there 118

118

and assign it to book right here. 119

119

Okay, so let's try to use this book function 120

120

to do a new booking now. 121

121

But what do you think is gonna happen? 122

122

So 23, and then let's say Sarah Williams 123

123

and let's give it a save 124

124

and now we get cannot read property airline of undefined. 125

125

So do you know why this happened? 126

126

Well, it's because this function here, 127

127

the book function is now just a regular function call 128

128

and so as we learned in one of the previous sections, 129

129

in a regular function call, 130

130

the this keyword points to undefined, 131

131

at least in strict mode. 132

132

All right? 133

133

So once more, this book function is no longer this method. 134

134

Okay? 135

135

It's just not. 136

136

It is now this separate function here. 137

137

It's a copy of this one 138

138

but it's not a method anymore, 139

139

it's now a function. 140

140

And so here it's a regular function call. 141

141

And so therefore, the this keyword inside of it 142

142

will now point to undefined. 143

143

And that's why I kept telling you earlier 144

144

that the this keyword depends on how the function 145

145

is actually called. 146

146

Okay, so make sure to understand these dynamics here. 147

147

But now how do we actually fix this problem? 148

148

So in other words, how do we tell JavaScript 149

149

that we want to create a booking 150

150

on the new Eurowings airline? 151

151

Or even how do we tell it that we want 152

152

to book on Lufthansa here? 153

153

Well, basically, we need to tell JavaScript explicitly 154

154

what the this keyword here should be like. 155

155

So if we want to book a Lufthansa flight, 156

156

the this keyword should point to Lufthansa 157

157

but if we want to book a Eurowings flight, 158

158

then the this keyword should point to Eurowings. 159

159

So how do we do that? 160

160

How do we tell JavaScript explicitly 161

161

or manually what this this keyword should look like? 162

162

Well, there are three function methods to do that 163

163

and they are call, apply and bind. 164

164

So when we first talked about the this keyword, 165

165

I think I mentioned these methods back then 166

166

and so now we're gonna use them, 167

167

at least the call and apply methods. 168

168

Okay, so let me show you how. 169

169

So instead of just doing this, 170

170

which doesn't work, 171

171

let's actually comment that out. 172

172

Does NOT work. 173

173

So instead, we use book.call, all right? 174

174

And remember that a function is really just an object 175

175

and objects have methods 176

176

and therefore, functions can have methods too 177

177

and the call method is one of them. 178

178

And in the call method, 179

179

the first argument is exactly 180

180

what we want the this keyword to point to. 181

181

So let's say we want a Eurowings flight 182

182

and then as usual, 183

183

the rest of the arguments. 184

184

So 23 and Sarah Williams. 185

185

All right? 186

186

And then let's log to the console also the eurowings object. 187

187

Let's run this and then I'll explain a bit better 188

188

what just happened. 189

189

But indeed, we now have the bookings array 190

190

and in there, we have the object 191

191

with the EW23 and so EW comes from here. 192

192

So exactly from the eurowings object 193

193

and then also, of course, the name. 194

194

And again, it is inside the bookings array 195

195

of the Eurowings object. 196

196

So let's recap what happened here. 197

197

So this time, we did actually 198

198

not call the book function ourselves. 199

199

Instead, we called the call method 200

200

and it's then this call method, 201

201

which will call the book function 202

202

with the this keyword set to eurowings. 203

203

So whatever we pass has the first argument 204

204

of the call method. 205

205

And so this allows us to manually 206

206

and explicitly set the this keyword 207

207

of any function that we want to call. 208

208

Then all the arguments after the first one 209

209

are simply the arguments of the original function. 210

210

And so in the case of the book function, 211

211

of course, that's the flight number 212

212

and the passenger name. 213

213

And of course, now we can do the same also for Lufthansa. 214

214

So book.call, this time with lufthansa 215

215

and let's book someone else on flight 239. 216

216

Let's say Mary Cooper 217

217

and let's log again the lufthansa object 218

218

but let's do it now here. 219

219

And indeed, the string that we get here 220

220

is completely correct 221

221

and in here, so in the Lufthansa bookings array, 222

222

we now have, of course, three bookings. 223

223

Okay? 224

224

And so that, of course, happened because this time, 225

225

we set the this keyword inside 226

226

of the function call to lufthansa. 227

227

And so now this here is again back to pointing to Lufthansa, 228

228

while before, right here, 229

229

it was being pointed to Eurowings, all right? 230

230

So even though the code of this function 231

231

is inside of the lufthansa object, 232

232

we made it so that the this keyword in here 233

233

pointed to eurowings. 234

234

So to this object, this new one right here, okay? 235

235

So we have a way now 236

236

of manually manipulating the this keyword 237

237

using the call method. 238

238

And of course, we could now keep going 239

239

and create more airlines into the Lufthansa Group, 240

240

like the Swiss Air Lines. 241

241

Air Lines. 242

242

Now, of course, these property names, 243

243

they all need to have the exact same format 244

244

as this original object here 245

245

because this method is trying to read just these properties. 246

246

So it's always iataCode 247

247

and bookings, as you see here, and airline. 248

248

And so of course, 249

249

we need to use exactly these property names here as well 250

250

but just like this, 251

251

we can now go ahead 252

252

and use our book function on the Swiss Air Line. 253

253

And so this time, we will set the this keyword 254

254

in the book.call to the swiss object. 255

255

583 and let's book another flight for Mary Cooper here. 256

256

And indeed, it worked again. 257

257

So here is the booking again. 258

258

Okay? 259

259

There's just some weird thing here 260

260

and so oh, actually here, 261

261

it needs to be airline as well. 262

262

So I was telling you you need to use the same property names 263

263

and I wasn't even doing it myself. 264

264

So it needs to be airline, just like it is here 265

265

and the same here too. 266

266

And now the string is, of course, correct here. 267

267

Okay. 268

268

Let me add a comment here. 269

269

Call method because in fact, 270

270

there is a similar method to the call method, 271

271

which is called the apply method. 272

272

And the apply method does basically exactly the same thing. 273

273

The only difference is that apply 274

274

does not receive a list of arguments 275

275

after the this keyword, 276

276

so it doesn't receive this list here 277

277

but instead, it's gonna take an array 278

278

of the arguments, okay? 279

279

And so it will then take the elements 280

280

from that array and pass it into the function. 281

281

So let's say 282

282

flightData, 283

283

so I'm just gonna create quickly an array here 284

284

with the flight number and the passenger name. 285

285

So book on the same flight George Cooper 286

286

and now we can use apply on the book function. 287

287

So apply. 288

288

And then just as here in the call method, 289

289

the first argument is the this keyword. 290

290

But now the second argument, 291

291

it needs to be as I just said an array of data. 292

292

So let's pass in the flightData array here. 293

293

But then let's just take a look. 294

294

I'll just take this one here actually. 295

295

And so indeed, here it worked again. 296

296

All right? 297

297

This apply method is not that used anymore 298

298

in modern JavaScript because now, 299

299

we actually have a better way of doing the exact same thing. 300

300

And do you know what I'm talking about? 301

301

So let me show it to you. 302

302

Book.call, so instead of using apply, 303

303

we can still use call, 304

304

again with swiss 305

305

and then we can simply use the spread operator 306

306

to take the data out of flightData 307

307

and basically put them here. 308

308

So this here is the same as this one. 309

309

And so right now, with modern JavaScript, 310

310

I prefer to just always use the call method 311

311

and then spread out the arguments from an array like this. 312

312

So again, this here is exactly the same as this. 313

313

So in summary, we now have yet another tool 314

314

in our toolbox here 315

315

and this one is one that allows us 316

316

to explicitly define the this keyword 317

317

in any function that we want. 318

318

But there is actually yet another method 319

319

which allows us to do the same thing 320

320

and that's the bind method. 321

321

It's more important actually 322

322

than the call and apply methods, 323

323

so I'm gonna leave it for the next lecture.