Original subtitles

1 1

Let's keep exploring objects 2

2

and this lecture will bring us to object methods. 3

3

So we learned that objects just like a race 4

4

can hold different types of data. 5

5

And they can hold even a race, 6

6

and in fact, they could even hold objects inside objects. 7

7

But now we can take it even further. 8

8

And for that, remember how I said 9

9

that functions are really just another type of value. 10

10

And if a function is just a value 11

11

then that means that we can create a key value pair 12

12

in which the value is a function. 13

13

And that then means that we can in fact, 14

14

add functions to objects. 15

15

And so let's now see how. 16

16

And once more, I will get back this object here 17

17

but we will change it up a little bit this time around. 18

18

So here let's simplify and just put the birthYear. 19

19

So just 1991. 20

20

And I also want to add a Boolean here, hasDriversLicense. 21

21

Just to show you that we can hold all kinds 22

22

of different data types in one object. 23

23

But now let's also add a function here as a key value pair. 24

24

So to do that, all we have to do is to add another key here. 25

25

And the function that we want to add is again, 26

26

the calcAge function. 27

27

So that's one of the favorites, as you can see, 28

28

but it is because it's a very simple calculation 29

29

that we can do with the birth year. 30

30

So to do that, let's simply add the name 31

31

basically off the function here as a key. 32

32

So as a property, 33

33

so calcAge and then the colon, and now here 34

34

we simply specify the function as an expression 35

35

and that works because the expression produces the value. 36

36

And so we can just do this, 37

37

so function, and just like before , 38

38

we pass in the birth year 39

39

and we return 2037 minus the birth year that was passed in. 40

40

So this is pretty similar to simply writing this, right? 41

41

So a regular function expression. 42

42

So const calcAge like this, 43

43

this is how we used to do it before. 44

44

And so you see that this is pretty similar. 45

45

The difference is just in the syntax 46

46

because now calcAge is not a regular variable like here, 47

47

but it's a property of the Jonas object. 48

48

And so therefore we use the colon here 49

49

but the rest here is exactly the same. 50

50

And so that's why it was very important 51

51

that you understood what a function expression actually is 52

52

because here we need to function expression 53

53

to create this method. 54

54

And that's what this function is called. 55

55

So any function that is attached 56

56

to an object is called a method. 57

57

So of course we could have not used 58

58

a function declaration here. 59

59

So something like this, 60

60

so function calcAge, for example, that would not work, 61

61

we would certainly get an error here. 62

62

So unexpected token function, 63

63

because this is a declaration. 64

64

And so it doesn't work here, 65

65

here, we need an expression. 66

66

And so this will work indeed. 67

67

Okay? Does this make sense? 68

68

So if you can think of functions as simply being values 69

69

then you can see that a method is actually also a property. 70

70

It just happens to be a property 71

71

that holds a function value. 72

72

So here we have a string value, 73

73

here we have an array value, 74

74

here we have a Boolean value, 75

75

and here we have a function value. 76

76

All right. 77

77

So, I hope that's logical. 78

78

And now just like we can access any other property, 79

79

we can also access the calcAge property or method. 80

80

So jonas.calcAge and so calcAge is now the function value, 81

81

and just like any other function in order to call it, 82

82

we use the parenthesis. 83

83

And now we can pass in the year here. 84

84

And so that should then calculate our age. 85

85

And let's just unlock this result to the console here, 86

86

just to see if everything works. 87

87

And it does indeed. 88

88

Okay. And you could also have access 89

89

to this method using the bracket notation, 90

90

because again, it's just as if it was a normal property 91

91

and the brackets would actually be necessary here 92

92

so that this then here is the function 93

93

and then we call the function using the parenthesis. 94

94

So let's try that. 95

95

And, yeah, here this needs to be a string. 96

96

So like I showed you in the last lecture, 97

97

and now here we get 46 as well. 98

98

Okay. So just like I showed you in the last video 99

99

with the operator proceedings table, 100

100

the first thing that happens here, 101

101

is that jonas.calcAge is computed. 102

102

And so this here will become the function value. 103

103

And then with the parenthesis, 104

104

we call that function value here and passed in 1991. 105

105

And the same thing here, 106

106

so here we access the property calcAge using the brackets 107

107

and then this here will basically be replaced 108

108

with the function, 109

109

and then we call the function right here, just like before. 110

110

All right, now you might have noticed 111

111

that the birth year 1991, 112

112

that we passed here as an argument to the method 113

113

is actually already defined 114

114

in the Jonas object itself up here, right? 115

115

So we already have this information in the Jonas object. 116

116

And so writing the same number here and here is not ideal 117

117

because we might make a mistake and pass in the wrong year. 118

118

For example, right here. 119

119

So Jonas' birth year is 91 120

120

but here, we could, for some reason accidentally do 92 121

121

and then it would be wrong. 122

122

And even if we do not make any mistake, 123

123

this is still not ideal 124

124

because we are not keeping the code dry. 125

125

So we're violating the don't repeat yourself principle. 126

126

So if we know the birth year of Jonas, 127

127

it would only be written in one place, 128

128

not in multiple places, 129

129

because if that might change, 130

130

then we have to change it everywhere. 131

131

That's always the philosophy that we need to keep in mind. 132

132

So what if we could actually access this birth year property 133

133

directly from the Jonas object 134

134

instead of having to pass it in? 135

135

Well, it turns out that we actually can, 136

136

and that's because in every method, 137

137

JavaScript gives us access 138

138

to a special variable called this. 139

139

And so what we can do now is in this calcAge function, 140

140

we can read the birth year directly 141

141

from this object itself without having to pass it in 142

142

as a parameter here into this function. 143

143

Alright, so let me copy this and comment this one out 144

144

just so that we keep a record of what we did 145

145

but this here will be the new version. 146

146

So now we no longer need this parameter 147

147

and we will read the birth year directly from the object. 148

148

And for that again, we will use the this keyword. 149

149

So the this key word 150

150

or the this variable is basically equal to the object 151

151

on which the method is called, 152

152

or in other words, 153

153

it is equal to the object calling the method. 154

154

So, let's see who is calling the method. 155

155

So down here, here is calcAge, 156

156

and the object that is calling the method is Jonas, 157

157

because that's where the dot is. 158

158

And let's forget about this one, 159

159

actually comment it out here. 160

160

And so again 161

161

the object that is calling the calcAge method here is Jonas. 162

162

And so that means that inside this method 163

163

the this variable or the this keyword will point to Jonas. 164

164

And so let me just write this.birthYear here 165

165

and then I can explain it even a little bit better. 166

166

So, here we don't need to pass the 1991 here 167

167

and I will run this now and we still get the correct result. 168

168

So, great. 169

169

And to make this even more clear here, 170

170

let's also log this to the console, 171

171

and indeed, this is the whole Jonas object. 172

172

And so again, that's because the Jonas object 173

173

is the one who is calling this method, 174

174

so this function, 175

175

see here, it's jonas.calcAge 176

176

and so whatever appears before the dot 177

177

is the one who is calling the method. 178

178

And so therefore, in the method, 179

179

this points to Jonas now, 180

180

and if this points to Jonas, 181

181

then this.birthYear is of course 182

182

this value that we have right here. 183

183

Great. 184

184

So you see that the this keyword 185

185

is something really, really useful 186

186

and we will learn even more about the this keyword 187

187

in greater detail in a later section. 188

188

For now, I just wanted to introduce you to this concept 189

189

and I noticed can be a bit confusing. 190

190

So really make sure to maybe pause the video 191

191

and really analyze what's happening here. 192

192

Maybe you can even rewind a little bit 193

193

and hear my explanation again, 194

194

that might be useful too. 195

195

Now you might argue that maybe we don't even need 196

196

this confusing this keywords. 197

197

Why not just do jonas.birthYear, here instead? 198

198

Well, because that would actually still violate 199

199

the don't repeat yourself principle. 200

200

It would work just the same here now, 201

201

but then let's say 202

202

that we need to change the name of the object. 203

203

So we change it here to Jonas2 204

204

and then we call Jonas2 down here, 205

205

and then the code will no longer automatically work, 206

206

because now Jonas is not defined of course. 207

207

And so we would have to keep that in mind 208

208

and then come here and manually change this as well, 209

209

while if we had the this keyword, 210

210

then everything will keep working 211

211

without us having to change it there, 212

212

because now this will simply point to Jonas2, 213

213

because that is the object calling the method. 214

214

And so therefore it's always a good idea 215

215

to reference the object itself 216

216

and not hard-code the name of the object. 217

217

So let's put it back to Jonas and yeah, much better. 218

218

So this works great already, 219

219

and we're really going 220

220

into some more advanced territory here. 221

221

So I hope you're still following me 222

222

and you're still making sense of everything. 223

223

However, we can actually even take this a little bit further 224

224

but don't worry, it's not going to get a lot more confusing, 225

225

just a small variation of this, 226

226

because let's say that we need to access 227

227

the age multiple times throughout our program. 228

228

So that would be like calling this a couple of times. 229

229

So let's say in three places of our application, 230

230

we need to access the age, 231

231

and so, of course this will work, 232

232

and indeed it does. 233

233

And it always locks the Jonas object 234

234

because we still have this here. 235

235

So this makes it a bit easier to view. 236

236

And so what happens here 237

237

is that a function will get called a total of four times. 238

238

And so this computation here will be done four times. 239

239

And in this case that's not a big deal 240

240

but it might be a like a heavier computation 241

241

that actually takes some more time, 242

242

and so it would be a bad practice to do this multiple times. 243

243

Instead, what we can do is to just calculate the age once, 244

244

then store it in the object, 245

245

and then when we need it at a later point, 246

246

we can then just retrieve the age 247

247

as a property from the object. 248

248

So, I hope you're following me here. 249

249

So I will again copy this and comment it out 250

250

so that we keep all the three versions that we did here. 251

251

So, what I was trying to say 252

252

is that we can now use the this keyword 253

253

also to store a new property. 254

254

So, we can say this.age is equal to this here. 255

255

So we calculate the age, 256

256

and then we create a new property on the current object. 257

257

So in this case, on the Jonas object, 258

258

and remember that we can use the dot notation like this 259

259

to create new properties. 260

260

So we did that in a previous lecture as well. 261

261

Where was that? 262

262

Yeah, right here. 263

263

So here we created jonas.location 264

264

and set it to Portugal. 265

265

And so here we are essentially creating jonas.age 266

266

and setting it to this age that we just calculated. 267

267

And then we can simply return this age. 268

268

And of course we don't even need to return anything 269

269

if we didn't want to. 270

270

We could make this method only calculate the age 271

271

but not even return it, 272

272

but I think it's a good practice 273

273

to actually also return it. 274

274

And so now here we can replace the function call 275

275

with simply a request 276

276

for the age property, 277

277

and notice this trick that I did here again 278

278

with the command D, right, 279

279

So this gives me multiple cursors 280

280

and then I can do one operation 281

281

in multiple places at the same time. 282

282

So that's a really handy shortcut. 283

283

So, again, command D, or control D 284

284

and in the menu bar that means add next occurrence. 285

285

So let's test this and the results should be the same, 286

286

and it is, but we only needed to calculate the age once 287

287

then from here, 288

288

we simply retrieve the property 289

289

that we had already calculated before. 290

290

And so this is the most efficient solution let's say. 291

291

All right, and now I actually have another, 292

292

a small challenge for you 293

293

that you can do just in this video. 294

294

So I want you to write a method called getSummary 295

295

and this method should return a string 296

296

which should kind of summarize the data about Jonas, 297

297

or, of course, any other person data 298

298

that you might have used. 299

299

For example, 300

300

let me again, 301

301

actually we can get rid of this. 302

302

So let me write Challenge here again 303

303

and then do an example string. 304

304

So I want you to write for example this, 305

305

Jonas is a 46 year old teacher. 306

306

And we now could actually add all the data here 307

307

to the string, 308

308

but that would be too much work 309

309

and I'm a bit lazy now. 310

310

So let's just also say if I have a driver's license or not. 311

311

So Jonas is a 40 year old teacher 312

312

and he has a driver's license. 313

313

And it says that I have a driver's license 314

314

because it hasDriversLicense is true 315

315

but if it was false, then here, it should say 316

316

and he has no driver's license. 317

317

So it's either a or no. 318

318

So figure out how you can do that, 319

319

and so I hope you manage to do it. 320

320

It's a bit similar to what we did in the previous lecture 321

321

but this time I want you to actually write a method 322

322

on your own. 323

323

So give this a try and I see you here in a second. 324

324

Okay. So let's add getSummary 325

325

and remember that you to a need to have a comma 326

326

between the properties. 327

327

And so that's true also with methods, 328

328

so here we need a comma, 329

329

and then just a function 330

330

and it will then get all this data of course, 331

331

from the current object. 332

332

So actually let's first call this method, 333

333

so, and we're doing it inside of console log, 334

334

log because of course, 335

335

we want to be able to see the summary string 336

336

as a message in the console. 337

337

So jonas.getSummary. 338

338

Okay. So, which is the object calling the method? 339

339

It is Jonas. 340

340

And so therefore, the this keyword inside of getSummary 341

341

will be Jonas. 342

342

So I hope that this one is clear at this point. 343

343

So let's now build a string here, 344

344

and starting with the name, 345

345

it is at this.firstName is a, 346

346

and now the age, 347

347

so this, and now what do we do here? 348

348

Should we use the age property, or should we do calcAge? 349

349

Well, I would say that we should do calcAge 350

350

because we cannot assume that calcAge 351

351

was already called before. 352

352

Okay. 353

353

And if we don't call calcAge before we call getSummary 354

354

then the age property would not exist. 355

355

And so, 356

356

and so it's, it's better to actually do calcAge here. 357

357

And so I think we did this before, 358

358

so in a template string, we can easily do a function call. 359

359

That's not a problem at all. 360

360

So this.calcAge will call this other method 361

361

and this will then return the age. 362

362

Alright. And maybe it might be strange for you 363

363

to call the function also on this, 364

364

but well, the rule is just exactly the same. 365

365

This is Jonas in this object, 366

366

and so this is essentially the same as writing it here. 367

367

Alright. So this will become the age 368

368

and so, year old, 369

369

and now the job, jonas.job, 370

370

and he has, 371

371

and now we need to decide between a and no. 372

372

So let's do a turnery operator here. 373

373

So we get this.DriversLicense, 374

374

and basically if it's true 375

375

then we want the results of this operator to be a, 376

376

and if not, we want it to be no. 377

377

And then driver's license. 378

378

Okay? Makes sense? 379

379

So again, here we want either a or no, 380

380

depending on the state of the hasDriversLicense property. 381

381

So we get that property 382

382

by calling this.hasDriversLicense 383

383

and here we're using the turnery operator. 384

384

And so if this first part is true 385

385

then the result of the operator will be a, 386

386

and otherwise the result will be no. 387

387

And so that's what will then be put 388

388

into this place of the sentence. 389

389

Okay. And we already called the method down here 390

390

and we logged it to the console, 391

391

and so I think this should work now. 392

392

And it does. 393

393

So Jonas is a 46 year old teacher 394

394

and he has a driver's license. 395

395

Now just to test, let's set it to false and no, 396

396

and he has no driver's license. 397

397

Beautiful. 398

398

Okay. 399

399

And yeah, that's all the code 400

400

that I had to show you in this video. 401

401

And now just to finish the lecture, 402

402

which I know is already running quite long, 403

403

but I want to basically build a bridge 404

404

between this method and the array method lecture. 405

405

So remember that we used methods on a race previously, 406

406

so we can quickly go there. 407

407

So it was before this challenge. 408

408

Yes, indeed. 409

409

So for example here we have friends.push. 410

410

And so we have an array and on there we call a method. 411

411

So just like we did in this video, 412

412

now what this means is 413

413

that arrays are actually also objects, 414

414

they are just a special kind of object. 415

415

And so they have functions, or in other words 416

416

they have methods that we can use to manipulate them 417

417

like push, pop, shift and unshift and many more. 418

418

All right? So in this lecture, 419

419

we created our own methods on our own objects. 420

420

But here we basically used built in methods on a race. 421

421

And so once again that means 422

422

that the race are actually also objects, 423

423

that's why they can have methods as well. 424

424

And we will dive deeper into why things work like this, 425

425

but I wanted you to realize this early on in the course, 426

426

this is quite a complex topic, 427

427

and so there is really a very exciting journey 428

428

still ahead of you. 429

429

So I hope you're enjoying this journey so far. 430

430

And now to test your knowledge, 431

431

there is coding challenge number three, coming up next.