Original subtitles

1 1

So let's know, learn about the bind method. 2

2

And just like the call method, 3

3

bind also allows us to manually set this keywords 4

4

for any function call. 5

5

Now, the difference is that bind 6

6

does not immediately call the function. 7

7

Instead it returns a new function 8

8

where this keyword is bound. 9

9

So it's set to whatever value we pass into bind. 10

10

So let's continue with our airline example 11

11

from the previous lecture here. 12

12

And now let's say that we need to use the book function 13

13

for Eurowings all the time. 14

14

So, remember we have this Eurowings object 15

15

and then we used a book.call, 16

16

to use the book function 17

17

with Eurowings set to this keyword. 18

18

So that's what we did in the last lecture. 19

19

So let me just copy this code here. 20

20

But now, as I said, 21

21

we can use the bind method to create a new function 22

22

with the this keyword also set to Eurowings, all right? 23

23

So again, this will not call the book function. 24

24

Instead it will return a new function 25

25

where this keyword will always be set to Eurowings. 26

26

And so let's create a new function here called bookEW, 27

27

where its just a code of Eurowings. 28

28

All right? 29

29

And so now let's use this function. 30

30

So bookEW, Steven Williams 31

31

and we're missing the flight number here. 32

32

So 23. 33

33

And so as you see, this now looks 34

34

like the normal book function call again. 35

35

And that's because this function here 36

36

already has the this keyword set in stone basically. 37

37

And so here, of course, we no longer need to specify 38

38

to these keywords again. 39

39

So the signature here, so the name of the parameters 40

40

is back to being simply the flight number 41

41

and the passenger name, okay? 42

42

And so now again, we see that Steven booked a seat 43

43

on Eurowings flight EW23. 44

44

And so that worked perfectly. 45

45

Let's also of course, see at the object again. 46

46

So with all the bookings and indeed here is Steven Williams 47

47

in the flight that we just booked. 48

48

Great, so this is really, really useful. 49

49

And we could now of course go ahead and do the same 50

50

for all the airlines. 51

51

So creating one booking function for each of the airlines. 52

52

And this then makes it a little bit easier 53

53

to book a flight for each of the airlines, 54

54

if we have to do it multiple times. 55

55

So instead of having to use a call all the time, 56

56

we can just do bind once. 57

57

So defining the disk keyword once like this 58

58

and from there on, we can always use these functions. 59

59

.bind and this one, Swiss, all right? 60

60

Now, I'm not gonna use them all here now 61

61

because we already know how that works, 62

62

all right? 63

63

So this is great, 64

64

but we can actually take this even further. 65

65

So in the call method, we can pass multiple arguments here 66

66

besides this keywords, right? 67

67

And so in the bind method, we can actually do the same. 68

68

And then all of these arguments 69

69

will also be basically set in stone. 70

70

So they will be defined 71

71

and the function will then always be called 72

72

with these same arguments. 73

73

For example, we could use bind to create a function 74

74

for one specific airline and a specific flight number. 75

75

So let's say, bookEW, just like we had here, 76

76

but then really specific, only for flight 23. 77

77

So that would be book.bind 78

78

and then of course we have to again, define Eurowings, 79

79

but then we can start to finding the list of arguments 80

80

or the list of parameters 81

81

and setting the first one to 23, okay? 82

82

And so if we look at our bind function now, 83

83

remember that it needs the flight number and the name. 84

84

But now in our bookEW23 function, 85

85

it is as if this first argument was already set. 86

86

And so all remaining function now only need the name. 87

87

So this function, 88

88

this one now only needs the name, 89

89

because the number was already preset here 90

90

in the bind method. 91

91

So, let's see. 92

92

So, our newly created function bookEW23, 93

93

and let's now book a flight for myself. 94

94

And let's book a flight for Martha, 95

95

let's say, Cooper. 96

96

And, yeah, let's check out our output here. 97

97

And so these are the two. 98

98

And indeed both of them are for Eurowings flight EW23, 99

99

all right? 100

100

And so that's exactly what we were expecting. 101

101

Again, because we preset that 23 right here. 102

102

If we preset this here 103

103

to one, two, three, four, five, 104

104

then of course, both of these new flights here 105

105

would be booked onto that flight number, okay? 106

106

So this allows us to set in stone, certain arguments. 107

107

And so this function, the resulting function, 108

108

then becomes even simpler. 109

109

So right now all we need to pass in 110

110

is the passenger name, right? 111

111

And then everything else basically happens automatically. 112

112

And taking this even further, 113

113

we could even define, have the passenger name here 114

114

for example, like this. 115

115

And then this function would always book a flight for Jonas 116

116

on flight 23. 117

117

But that would probably take it a little bit too far now. 118

118

And I deleted the 23 here, 119

119

of course, I didn't want that. 120

120

So this is correct. 121

121

And by the way, what we did here, 122

122

so, basically specifying parts of the argument beforehand, 123

123

is actually a common pattern called partial application. 124

124

So essentially, partial application 125

125

means that a part of the arguments 126

126

of the original function are already applied, 127

127

so which means, already set. 128

128

And so that's exactly what the bookEW23 function is, right? 129

129

It's essentially the book function 130

130

but with 23 already predefined. 131

131

Great. 132

132

So, hopefully this was a nice example for you to understand 133

133

the call apply and bind methods, 134

134

but there are also other situations 135

135

in which we can use the bind method 136

136

and where it is very useful. 137

137

And one example of that is when we use objects together 138

138

with event listeners. 139

139

So let's write that here actually, 140

140

with event listeners. 141

141

And so now this button here 142

142

will finally come into play. 143

143

And maybe you've been wondering about that. 144

144

But let's start by adding a new property 145

145

only to the Lufthansa object 146

146

and let's set it to 300. 147

147

So meaning that this company has 300 planes. 148

148

And then we also add a new method 149

149

only to the Lufthansa object, 150

150

which is to buy a new plane. 151

151

So function, 152

152

and now what we want to do is, this.planes++. 153

153

So essentially we want to add a new plane, 154

154

whenever we click on this button. 155

155

So eventually that's what we will want to do. 156

156

And then let's also log this.planes to the console. 157

157

And probably we should also log this keywords 158

158

to the console as well. 159

159

And now let's actually attach our event handler 160

160

to this element, 161

161

let's inspect it here, okay? 162

162

It should need to go to elements. 163

163

So, this is the button here 164

164

and it has the class, buy. 165

165

So document.queryselector.buy, 166

166

addEventListener for click. 167

167

And then the second argument, 168

168

as you already know, is the handler function. 169

169

So addEventListener here is the higher order function 170

170

which receives a callback function. 171

171

And so that should be lufthansa.buyPlane, all right? 172

172

So essentially, this function here 173

173

is what we want to happen, 174

174

which again takes the current number of planes 175

175

and increases it by one. 176

176

So let's do that. 177

177

And now as I click on this button, let's see what happens. 178

178

And we get not a number here. 179

179

So this .Planes is now not a number. 180

180

And the reason for that is that this keyword 181

181

is this button element, okay? 182

182

And do you know why that is? 183

183

Well, in one of the theory lectures, 184

184

we learned that in an event handler function, 185

185

that this keyword always points to the element 186

186

on which that handler is attached to. 187

187

So, this is the handler function, right? 188

188

And so it is attached to this element, 189

189

so to this button. 190

190

And therefore, inside of the handler function 191

191

or the event listener, it doesn't really matter. 192

192

But inside of this function, 193

193

this keyword will point to the button element. 194

194

And so that's why this keyword here 195

195

returns this button, okay? 196

196

So here you have yet another proof 197

197

that this keyword really is set dynamically. 198

198

Because if we simply called a Lufthansa.buyPlane out here, 199

199

then of course, this keyword would be Lufthansa, 200

200

so this object, right? 201

201

Because that's the object calling the function. 202

202

But in this case it is of course, 203

203

this event listener function calling this function. 204

204

And so therefore, the button itself 205

205

will then become this keyword, okay? 206

206

Here we now see the results 207

207

of calling this function out here. 208

208

And so now we started with 300 209

209

and it was increased just as we wanted it to be. 210

210

So let's take this out here 211

211

and let's go back to clicking here 212

212

to see the result we had before. 213

213

So that's this button. 214

214

Now, of course, in this handler function here, 215

215

we still need this keyword to point 216

216

to the Lufthansa object itself, right? 217

217

Otherwise this logic here will not work. 218

218

So what this means is that we need to manually define 219

219

to this keyword right here. 220

220

So right here. 221

221

Now, how should we do that? 222

222

Should we use the call method or the bind method? 223

223

Well, we need to pass in a function here 224

224

and not to call it. 225

225

And so we already know that the call method 226

226

calls the function. 227

227

And so that's not what we need. 228

228

And so therefore, we use bind. 229

229

Because we already know that bind 230

230

is gonna return a new function. 231

231

And so this keyword should be Lufthansa, 232

232

and so that's exactly what we define, okay? 233

233

And now as we click here we should see the Lufthansa object 234

234

being this keywords. 235

235

Indeed, and that's now exactly what we got here. 236

236

So that's the result of this line of code. 237

237

And so again, this now points to Lufthansa, 238

238

because that's what we told JavaScript to do right here. 239

239

And so indeed now the number of planes 240

240

is increasing each time that we click on this button. 241

241

Great, so we have our problem solved. 242

242

And in fact, we will do this a couple more times 243

243

throughout the course. 244

244

So this one is an important one. 245

245

And in general, the bind method 246

246

is something you really need to understand, all right? 247

247

Now, just one final example here, 248

248

which is again, gonna be about partial application, 249

249

because this is another big use case for the bind method. 250

250

And in this case of partial application, 251

251

many times we are not even interested in this keywords, 252

252

but we still use bind for this, all right? 253

253

Now, remember that partial application 254

254

means that we can preset parameters, all right? 255

255

So let's start by creating a general function 256

256

which adds a tax to some value. 257

257

So let's start with the tax rate and then the value itself. 258

258

And let's write an arrow function here. 259

259

And so this works by doing 260

260

value + value * the tax rate, right? 261

261

So imagine that the tax rate would be 10% 262

262

and the value 100. 263

263

And so adding the tax to 100 would be 110. 264

264

Well, let's actually do 200 to make it a bit more clear. 265

265

And of course we need to call the function here itself, 266

266

okay? 267

267

So now 10% of 200 is 20, 268

268

and so the results should be 220 and that didn't work. 269

269

And yeah, that's because we need to define this here 270

270

as a decimal number here of course. 271

271

So only then this rate here can make sense, okay? 272

272

So 220 now. 273

273

So this here is the general function for adding tax. 274

274

But now let's say that there is one tax 275

275

that we use all the time. 276

276

And so let's create a function for that. 277

277

So for example, here in Portugal, 278

278

the VAT, which is value added tax, is 23%. 279

279

And so we can now use the bind function 280

280

on this function and preset the rate always, 281

281

so that it always will be this 23%. 282

282

And then we have a function 283

283

which only calculates the VAT 284

284

for whatever value we pass into it. 285

285

So, addTax.bind 286

286

and then the first argument of bind 287

287

is this keywords, remember? 288

288

But in this case, we don't care 289

289

about the this keyword at all. 290

290

It's not even here in the function. 291

291

And so, we just say, null. 292

292

It could be any other value 293

293

because nothing will happen with it, 294

294

but it's kind of a standard to just use null. 295

295

And now we can set the rate here. 296

296

So let's preset it to 23%, 297

297

so 0.23, all right? 298

298

And so this sets the rate value here in stone. 299

299

So essentially, this would be the same 300

300

as writing... 301

301

Let's paste it here. 302

302

So this must be, addVAT equals, 303

303

and the rate is preset to 0.23. 304

304

So this is essentially what our addVAT function 305

305

now looks like, okay? 306

306

So, because we already set 0.23 in stone. 307

307

So, now we can start using that. 308

308

So this should be 123 and it is. 309

309

We can use anything we want now like 23 310

310

and so on and so forth. 311

311

So I hope this makes sense. 312

312

When you want to do this yourself, 313

313

just keep in mind that the order of the arguments then 314

314

is important. 315

315

If you want it to preset the rate, 316

316

then it has to be the first argument in this function. 317

317

Otherwise, this will not really work here, okay? 318

318

Now you could argue that what we just did here 319

319

could easily have been done with default parameters. 320

320

But this is actually different, 321

321

because this here is creating a brand new, 322

322

simply, more specific function 323

323

based on a more general function, 324

324

which is the addTax function. 325

325

And of course, the example here 326

326

could be a lot more complex too, right? 327

327

So this really is different 328

328

because using binds, 329

329

actually it really gives us a new function. 330

330

So, it's as if we returned a new specific function 331

331

from the addTax function. 332

332

And actually now I have a nice challenge for you 333

333

which is to essentially rewrite this whole example here, 334

334

but using the technique of one function 335

335

returning another function. 336

336

So we have one lecture about that 337

337

and maybe you can go back and take a look at that. 338

338

And then I want you to essentially, 339

339

create a function that can return a function 340

340

which will do just what this one does. 341

341

So that's probably really challenging. 342

342

So don't beat yourself up if you cannot do it. 343

343

I know it is a challenge, 344

344

but you can still try to take a minute or two 345

345

and, yeah, really try it. 346

346

If you can't do it, 347

347

then just watch the solution in a minute, okay? 348

348

Just don't use bind of course, 349

349

because with that we already have the solution. 350

350

So use the technique that I showed you earlier 351

351

with the grid function, remember? 352

352

And so here you can do something similar. 353

353

So, see you in a second with the solution. 354

354

Alright. 355

355

I hope you tried that out. 356

356

And here is how I would have done it. 357

357

So, the first function here, 358

358

I'm gonna call it addTaxRate. 359

359

And I could do this with the arrow functions, 360

360

but then that looks really confusing. 361

361

So let's just focus on the functionality here. 362

362

So this is the first function which only receives the rate. 363

363

So similar to what we did here. 364

364

And then what it does is to return a new function. 365

365

And then this new function 366

366

is the one that takes in the value. 367

367

And it will then return just as the other function, 368

368

value + value * the rate, okay? 369

369

And so now based on this one, 370

370

we could create addVAT2. 371

371

And so that would be, addTaxRate 372

372

and then call it with 0.23. 373

373

And then let's just do the same 374

374

to see if the results are the same. 375

375

So, VAT2, and two, give it a try and here you go. 376

376

So the results are the same. 377

377

And so this addVAT2 is the same function as this one. 378

378

So just to recap, we created this function, 379

379

which then returns this one. 380

380

So the first one is the one that needs the rate, 381

381

because the rate is also what we used 382

382

to define this addVAT function here, right? 383

383

And so the resulting function 384

384

is then the one who takes in the value. 385

385

And that's why we have value here in the inner function too. 386

386

Now this is just another way of doing the same thing 387

387

and this is already pretty advanced stuff really. 388

388

So, absolutely don't be upset 389

389

if you didn't do this by yourself. 390

390

But anyway, in the next video 391

391

we have coding challenge number one 392

392

of this section coming up. 393

393

And so I hope to see you there very soon.