Original subtitles

1 1

So we talked about these destructuring arrays, 2

2

but we can also destructure objects. 3

3

So let's do that now. 4

4

And this time let's actually write the code 5

5

before the previous lecture. 6

6

So write here after this restaurant object, 7

7

so that we don't have to scroll too much. 8

8

Also, I added this object here to the restaurant object. 9

9

And so that was already in your starter files, 10

10

but I didn't have it here yet. 11

11

Anyway, let's now talk about object destructuring. 12

12

And so to do that, 13

13

we use the curly braces to destructure. 14

14

So to destructure objects we use the curly braces. 15

15

Because this is also how we create objects, right? 16

16

Then all we have to do is to provide the variable names 17

17

that exactly match the property names 18

18

that we want to retrieve from the object. 19

19

So the obvious choice here of object to destructure, 20

20

is restaurant. 21

21

So let's take the name, categories and opening hours. 22

22

So again let's start with const 23

23

in order to actually define some variable names. 24

24

And now as I said, 25

25

we need to write the exact property names here 26

26

to now extract variables from this object. 27

27

Now, since in an object, 28

28

the order of elements does not matter, 29

29

we don't need to manually skip elements 30

30

like we did in an array. 31

31

So we can simply write name. 32

32

So that's the restaurant name here. 33

33

And then also remember that in objects, 34

34

the order of the elements does not matter. 35

35

And so we can also then take now the opening hours, 36

36

which is kind of the last property 37

37

and only then the categories. 38

38

And then we simply say equal restaurant. 39

39

So that's exactly the same as with arrays, 40

40

but now here we use the curly braces 41

41

and we have to specify the name of the properties. 42

42

But just like with arrays, 43

43

this now creates three brand new variables. 44

44

So based on this restaurant object. 45

45

So, let's see name, opening hours and categories. 46

46

And indeed here they are. 47

47

Okay. 48

48

So that's the fundamentals of destructuring objects. 49

49

And once again, 50

50

this is an extremely useful addition to the language. 51

51

Especially when we deal with the result of an API call, 52

52

which basically means to get data 53

53

from another web application, 54

54

like weather data or data about movies 55

55

or something like that. 56

56

And this data 57

57

usually comes in the form of objects basically. 58

58

And then destructuring is really a lifesaver. 59

59

It allows us to write a lot less code. 60

60

So this is really used in modern applications. 61

61

But now what if we wanted the variable names to be different 62

62

from the property names? 63

63

Well, we can do it like this. 64

64

Now, of course we still need to reference the property names 65

65

like we did before, 66

66

otherwise JavaScript has no way of knowing 67

67

what we actually want. 68

68

So let's write name again, 69

69

but then we can use the colon and specify a new name. 70

70

Let's say we actually want it to be called restaurantName. 71

71

And then here, 72

72

let's say we want the openingHours, 73

73

but we want the variable to be called just hours. 74

74

And then once again, we want to take the categories, 75

75

but we want the variable name to be called tags. 76

76

And then again, equal to restaurant. 77

77

And so the variables that we now created 78

78

are called restaurantName, hours and tags. 79

79

So basically this, this and this. 80

80

And VS code is nice enough to put them 81

81

in this purple color here too. 82

82

And so you see 83

83

that these three are actually the exact same name, 84

84

but we were able to give them new variable names. 85

85

Which again that's gonna be immensely helpful 86

86

when dealing with third-party data. 87

87

And another useful feature 88

88

for when we are dealing with third-party data like that. 89

89

So like an object that we get from somewhere else, 90

90

for example, an API call, as I was just explaining. 91

91

It can be really useful to have default values 92

92

for the case that we're trying to read a property 93

93

that does not exist on the object. 94

94

So usually then we get an undefined. 95

95

For example if we were trying to say restaurant.menu, 96

96

this would be undefined 97

97

because there is no property called menu. 98

98

We have starterMenu and mainMenu, but not just menu. 99

99

Okay? 100

100

And so we can set default values 101

101

just like we can actually in arrays. 102

102

So let's say that we are trying to destructuring the menu. 103

103

And so we use equal to set a default value, all right? 104

104

And then we can do the same with the starter menu, 105

105

for example. 106

106

And then we can even combine this syntax here 107

107

with what we did previously. 108

108

So let me show you. 109

109

So let's say that we're trying to retrieve the starterMenu. 110

110

So this one, but we then want to give it another name. 111

111

So starterMenu, and we want to call it just starters. 112

112

And we also want to give it a default value 113

113

in case it doesn't exist. 114

114

So in this case, just an empty array. 115

115

Now, in this case, it actually does exist. 116

116

So starterMenu does exist. 117

117

And so therefore this default value will not apply, 118

118

but it should apply to menu. 119

119

Because as I was just saying, 120

120

there is no property on the restaurant object called menu. 121

121

So menu and starters. 122

122

And so here indeed, we get the default value, 123

123

which is the empty array. 124

124

And here we get the starter menu. 125

125

And without this, we would then get undefined, 126

126

as I was saying. 127

127

You see? 128

128

And so this is a nice way of setting a default value. 129

129

And once again, 130

130

keep in mind that this is especially helpful 131

131

when we do not have or data hard-coded like we have it here. 132

132

So this is just hard-coded data in our application. 133

133

But in the real world, 134

134

we usually get the data from somewhere else. 135

135

And then we might not always know 136

136

how exactly the data looks like. 137

137

And so then it's useful to set defaults like this. 138

138

Next up, we need to talk about mutating variables 139

139

while destructuring objects. 140

140

So we did that before with arrays 141

141

when we were switching variables, remember that? 142

142

So let's see. 143

143

Down here, you see that we mutated these variables 144

144

that we created before. 145

145

But with objects, it works a little bit differently. 146

146

And so let's write that here, mutating variables. 147

147

And here let's write default values. 148

148

So let's say that we already have some variables here. 149

149

So a and b. 150

150

And then we have this object, 151

151

which has a property a of 23, property b of seven 152

152

and c of 14, let's say. 153

153

All right? 154

154

And now we want to destructure this object. 155

155

And actually let's first store it into a variable 156

156

that makes it a bit easier to work with it. 157

157

And so, now actually let us destructure this array. 158

158

Now we cannot say const like a, b, 159

159

because a and b are already declared up here, right? 160

160

We can also not do let, 161

161

because again, that would create new variables 162

162

and we already have them there, okay? 163

163

So here we are missing the object that we are destructuring. 164

164

But as I was saying, we cannot do this. 165

165

And so, in fact we want to mutate these variables. 166

166

So a should become 23 and b should become seven. 167

167

But now as we save this, watch what happens. 168

168

And so we get a syntax error. 169

169

And the reason for that 170

170

is that when we start a line with a curly brace like this, 171

171

then JavaScript expects a code block, all right? 172

172

And since we cannot assign anything to a code block, 173

173

like we did here with the equal sign, 174

174

then we get this error, 175

175

unexpected token with the equal there. 176

176

So to solve this here, 177

177

the trick is to wrap all of this into a parenthesis. 178

178

And so that's the thing that I wanted to show you here. 179

179

Okay? 180

180

So now if we log a and b, it will work. 181

181

So you see, now we get 23 and seven. 182

182

So basically we did override these two initial variables, 183

183

but in order to do it, 184

184

we had to wrap this destructuring assignment 185

185

into parenthesis. 186

186

All right. 187

187

And now, we already know how object destructuring works. 188

188

And so now we need to talk about nested objects, 189

189

just like we did with nested arrays. 190

190

So let's say we wanted to create two variables, 191

191

open and close. 192

192

And these should contain the open and close hours 193

193

for Friday. 194

194

Okay? 195

195

So you see that opening hours is an object. 196

196

And then in that object, we have another object. 197

197

So this Friday is an object inside an object, 198

198

which itself is inside the restaurant object. 199

199

Okay? 200

200

Now the opening hours is already an object here 201

201

that we have already stored in a variable. 202

202

So that's the object that we're gonna destructure. 203

203

So nested objects. 204

204

So again, we're gonna start with opening hours, 205

205

and now we want to retrieve Saturday. 206

206

So let's start with doing that. 207

207

So just Saturday for now, or actually a Friday. 208

208

So I think I said Friday. 209

209

So let's see. 210

210

And so indeed Friday is this object that we get here. 211

211

But remember that we actually want two variables, 212

212

one called open and the other one called close. 213

213

And this is how that works. 214

214

So we know that this is an object, 215

215

and now we can further destructure that object 216

216

using this syntax. 217

217

So the colon, and then again, 218

218

the exact property name of that inner object. 219

219

Okay? 220

220

So that looks confusing, 221

221

but that's just the syntax that we have to use. 222

222

So maybe you don't even need to memorize this, 223

223

but when you need this someday and you will, 224

224

then you can just come to this video and see how it works. 225

225

And so indeed now we get or numbers, 11 and 23. 226

226

And we could of course take this even further 227

227

and even assign different variables to these, 228

228

just like we did up here. 229

229

So with the colon again. 230

230

So we could call this one just o, 231

231

and this one just c. 232

232

So this is taking it to an extreme, 233

233

but as I said in the beginning, 234

234

destructuring is really powerful. 235

235

So there's a lot of stuff we can do with it. 236

236

And that's why I'm showing you all of it right now. 237

237

Okay? 238

238

And now to finish, 239

239

let me actually show you a really cool practical application 240

240

of this destructuring. 241

241

And for that, we're gonna go back to our object here. 242

242

So to our example of the section. 243

243

And now we will create another method. 244

244

So many times in JavaScript, 245

245

we have functions with a lot of parameters. 246

246

But then it can be hard to know the order of parameters 247

247

for someone that is using this function. 248

248

And so instead of defining the parameters manually, 249

249

we can just pass an object into the function as an argument, 250

250

and the function will then immediately destructure 251

251

that object. 252

252

So let me show you what I mean. 253

253

And let's say we want an order delivery. 254

254

So that's a new function. 255

255

Okay? 256

256

And so here, let's just for now call this argument object. 257

257

And then I will log that object to the console here. 258

258

And now let me call this actually. 259

259

And I will do it right here. 260

260

So that we can see everything at the same time. 261

261

So, that is restaurant.orderDelivery. 262

262

And now here comes that object of options. 263

263

So as I said, we can now specify some options here. 264

264

Let's say the time of delivery. 265

265

Let's set it to 23:30, 266

266

which is like 10:30 PM. 267

267

Let's also say address 268

268

Via del Sole, 21. 269

269

And then we also specify the main index 270

270

and the start index. 271

271

So a little bit, 272

272

like we did up here in this function. 273

273

starterIndex. 274

274

Okay? 275

275

Oh, and here we need to also give it some value. 276

276

Let's just say two as well. 277

277

And so... 278

278

Yeah, here right at the beginning is that object 279

279

that we just defined 280

280

because here we are simply logging it for now, okay? 281

281

So what we just did was to call this function here 282

282

and passing in an object of options. 283

283

And that's a pretty standard thing actually in JavaScript, 284

284

especially in third-party libraries. 285

285

Because now, here in the function arguments 286

286

we can actually do destructuring right away. 287

287

So we can now say starterIndex, mainIndex, time and address, 288

288

which is exactly the four property names 289

289

that we have down here. 290

290

And of course, 291

291

usually we would first develop the function 292

292

and then call it. 293

293

But I wanted to explain you this way of calling a method 294

294

with an object, 295

295

so that writing the object here then makes sense. 296

296

All right? 297

297

And so now instead of the object, 298

298

since we did destructuring right here, 299

299

we now actually have four variable names. 300

300

So we can log them through the console 301

301

or actually let's do some nice string here. 302

302

So let's say order received. 303

303

And then let's get to food. 304

304

So based on the starter index, 305

305

let's just copy that from here. 306

306

So this starts starterMenu at the current starterIndex, 307

307

and then also the mainMenu. 308

308

So let's again copy that, actually all of this from here. 309

309

And we need the curly braces and this dollar sign 310

310

will be delivered to, 311

311

then the address and then the time. 312

312

Okay? 313

313

And so indeed, 314

314

we get this complete string based on the data that we passed 315

315

in this single object, okay? 316

316

So that's important to realize. 317

317

We only passed in one object into this function, okay? 318

318

We did not pass four arguments. 319

319

It's really just one argument, one object. 320

320

Then here in the function, 321

321

as we receive that object, we do immediately destructuring. 322

322

And so that's why these names here 323

323

need to be exactly the names that we have down here 324

324

in the object. 325

325

But what's great about this, 326

326

is that here the properties in the index 327

327

don't have to match the order 328

328

in which we do destructuring up here. 329

329

And so that makes it really easy 330

330

for the user of this function 331

331

to specify basically the arguments, all right? 332

332

So this is great, 333

333

but we can even use some more knowledge that we gained here, 334

334

which is these default values. 335

335

So we can now use this to basically set defaults here 336

336

on some of these. 337

337

So let's say that the starterIndex will be one. 338

338

If it cannot be destructured, 339

339

enter the mainIndex will be zero. 340

340

Enter time will be 20:00. 341

341

And so now as we call 342

342

this our method restaurant.orderDelivery, 343

343

I can specify the address again. 344

344

Let's actually a copy it from here. 345

345

And let me also just specify the starterIndex. 346

346

Okay? 347

347

But then the rest will be taken from the default values 348

348

that we set here for destructuring. 349

349

All right, and so here as the second string, 350

350

we get will be delivered to Via del Sole at 20:00. 351

351

Okay? 352

352

So in this object that we passed, 353

353

we do not have any property for the time, right? 354

354

And so then as JavaScript did destructuring, 355

355

it here took the default value of 20. 356

356

Okay? 357

357

And the same happened for the mainIndex 358

358

that we also did define. 359

359

So it shows zero and zero is a pizza. 360

360

And that's why we get pizza here in the output string. 361

361

All right? 362

362

So if you ever need to write a function like this, 363

363

so a really complex one with a lot of parameters 364

364

that might be then hard to specify, 365

365

keep this technique in mind. 366

366

And this becomes even more useful 367

367

as the amount of parameters increases.