Original subtitles

1 1

Let's start this section 2

2

by learning about array destructuring. 3

3

So, as I said in the intro video, 4

4

in this section we're basically gonna continue learning 5

5

basic syntax and basic JavaScript features, 6

6

but now with a focus on more modern JavaScript. 7

7

And the theme of this section 8

8

will be to simulate a foot delivery application. 9

9

And in specific one Italian restaurant 10

10

which is this starter data here 11

11

that we already have in the starter files. 12

12

And so this one is called Classico Italiano. 13

13

So I already opened up the starter files here 14

14

for this project. 15

15

Okay. 16

16

Now learning complex topics 17

17

like the ones we're gonna dive into in the section 18

18

is really best done in isolation. 19

19

This way you can understand exactly 20

20

what I'm trying to teach you 21

21

without having to think about 22

22

five other things at the same time. 23

23

And so I'm isolating just this one restaurant 24

24

and building no user interface 25

25

so that we can focus just on the JavaScript language here. 26

26

And some people will say that this is boring 27

27

but believe me, I do have enough teaching experience 28

28

to know that some topics are best learned in isolation. 29

29

And for me, the most important thing 30

30

is that you will actually learn in this course. 31

31

Now of course, 32

32

there are also topics that can be applied 33

33

to a visual project. 34

34

And that's why in the next section, 35

35

we have a really, really cool project 36

36

with an amazing user interface 37

37

where we're gonna learn about array methods, 38

38

but for now let's focus on built in data structures 39

39

and modern advanced operators. 40

40

And again, starting with array destructuring. 41

41

So destructuring is an ESX feature 42

42

and it's basically a way of unpacking values 43

43

from an array or an object into separate variables. 44

44

So in other words destructuring 45

45

is to break a complex data structure down 46

46

into a smaller data structure like a variable. 47

47

So for arrays we use destructuring 48

48

to retrieve elements from the array 49

49

and store them into variables in a very easy way. 50

50

So let's just actually start with a very simple array. 51

51

And now if we wanted to retrieve each one 52

52

into its own variable without destructuring, 53

53

we would do it like this. 54

54

Let's say we wanted to name them A B C. 55

55

And so we would write the name of the array, 56

56

which I totally forgot appear. 57

57

So our zero and then just duplicating this line 58

58

which I'm using command or option L four. 59

59

And I'm not sure if that is actually a shortcut in VS code. 60

60

Let me see here. 61

61

And apparently it's not, let's see here duplicate selection. 62

62

So it's this duplicate selection here 63

63

and you can set up a shortcut for that. 64

64

And so I will just do that. 65

65

So B and so that would be element number one 66

66

and number two would be C. 67

67

So that's how we would retrieve these three elements. 68

68

But now with destructuring 69

69

we can actually declare all the three variables 70

70

at the same time. 71

71

So let me show you how so const 72

72

and then we use the square brackets. 73

73

And so that's because we are, destructuring an array. 74

74

And so now we can declare three variables at the same time. 75

75

And now I'm not using A B and C 76

76

because we already used them. 77

77

So let's go with X Y, and Z, 78

78

and then I will simply set that equal to the array. 79

79

And that's it. 80

80

No, let's actually see them now in the console 81

81

give it a save, and then we need to start our live server 82

82

with a new terminal. 83

83

And actually I can hit the tab key now 84

84

and it will then automatically write 85

85

the rest of the command, 86

86

then close that down. 87

87

And as you can see 88

88

here we get to two results, two, three, and four. 89

89

So the elements of the array. 90

90

So basically we write this syntax here 91

91

and then this will become the first element of the array, 92

92

this the second and this the third. 93

93

And so this here is destructuring this array here 94

94

from the right side. 95

95

Okay. 96

96

And of course this looks like an array, but it's really not. 97

97

It's just the destructuring assignment. 98

98

So whenever JavaScript sees this here on the left side 99

99

of the equal sign, it knows that it should do destructuring. 100

100

Now, when you do this just don't forget 101

101

to actually also declare the variables using const. 102

102

Okay. 103

103

And I also wanted to notice that 104

104

even though we did destructuring 105

105

which sounds kind of distractive right? 106

106

The original array is of course not affected. 107

107

Okay so we are not destroying here the array 108

108

we are only destructuring so we are unpacking it, okay. 109

109

And now let's work a little bit with the data 110

110

from our restaurant. 111

111

So here we see that we have a couple of arrays actually. 112

112

So the categories, the starter menu and the main menu. 113

113

So let's take some elements out of the categories. 114

114

So let's say 115

115

and then the destructuring assignment 116

116

first and second, alright. 117

117

And so now you see here 118

118

that we do not have to take all of the elements 119

119

out of the array. 120

120

So this will just take the first and the second. 121

121

So it will simply follow the order of the elements here 122

122

and we'll basically only take these two. 123

123

And so now the array from which we want to extract 124

124

and that's restaurant.categories. 125

125

Just to take a look now 126

126

and indeed we get Italian and pizzeria 127

127

which are exactly the first two elements of the array. 128

128

But now let's say 129

129

that we only wanted to take the first category. 130

130

So this one and a third. 131

131

So let's say that this one is the main category 132

132

and this is the secondary for some reason. 133

133

Well, to do that 134

134

we simply leave a hole in the destructuring operator. 135

135

So what I mean is just this. 136

136

And so now the second element will be skipped 137

137

to the one that would go here 138

138

and then this second year simply becomes this third element. 139

139

And now, so you see it a second now is vegetarian 140

140

which is element number three alright. 141

141

And so like this, we don't have to create a variables 142

142

for all the stuff that we might not even need. 143

143

So if we only need to take this and this, 144

144

we just skip the element in the middle okay. 145

145

And this is really powerful. 146

146

And we use destructuring to do a lot of cool things. 147

147

For example, let's say that the owner 148

148

of the restaurant now decided to switch the main 149

149

and the secondary category. 150

150

So right now the primary is Italian 151

151

and the secondary is vegetarian 152

152

but now they wanted to switch it. 153

153

So let's first change the name here 154

154

to main and secondary, just to make it a bit more obvious. 155

155

secondary. 156

156

And so if we were to like to switch these two variables, 157

157

then without destructuring, 158

158

we would have to do it like this. 159

159

We would need to create a temporary variable, 160

160

and then so that we would assign one of them, 161

161

so let's say main, 162

162

and then we could switch to main. 163

163

We would say main is equal to the secondary 164

164

and then secondary is equal to temp 165

165

because that's where we temporarily stored 166

166

the value of main, right? 167

167

We could not just do main equal secondary 168

168

and then secondary equals main 169

169

because by then we would already have overwritten 170

170

the main variable, right? 171

171

And that's why we need this temporary variable 172

172

in the middle. 173

173

So that's how we would do it, 174

174

but with destructuring we can make it a lot easier. 175

175

And this is how we do it. 176

176

First, we create an array with both of them 177

177

and the first one is gonna be the secondary 178

178

and then the second one will be to main. 179

179

And actually, before we do that 180

180

let me just show you that this worked. 181

181

So main and secondary 182

182

and so now we should see them switched. 183

183

Oh okay. 184

184

Here, we need to change of course, to let, 185

185

because we are reassigning here to a const in line 24. 186

186

So let's try that now. 187

187

And indeed, what was Italian is now vegetarian 188

188

and what was vegetarian is now Italian. 189

189

So this year worked indeed, but let's now take this out 190

190

so that we can do it using destructuring. 191

191

So as I was saying, in order to switch to two variables 192

192

using destructuring, we would first start 193

193

by creating a new array with the two variables inverted. 194

194

So first secondary and then main, 195

195

and then we can simply distract them. 196

196

So main and secondary equals the destructuring 197

197

of this array. 198

198

And now we're not using let or const here 199

199

because we are simply reassigning the values 200

200

of the two variables. 201

201

So just like we did here, 202

202

but now we do not need a temporary variable in the middle. 203

203

So let's check now. 204

204

And indeed the result is the same, but this is a lot easier. 205

205

And this is a trick here that I actually use all the time. 206

206

So let me just show here 207

207

or actually write here, switching variables. 208

208

Okay. 209

209

So that's a pretty cool trick. 210

210

And another trick with destructuring 211

211

is that we can have a function, return an array 212

212

and then we can immediately destruct the result 213

213

into different variables. 214

214

And so this basically allows us to return multiple values 215

215

from a function. 216

216

And so let's try that and write a function to order food. 217

217

So here in our restaurant 218

218

let's now add a method 219

219

and I'm gonna call it order. 220

220

So this will be a function 221

221

and it will accept two parameters. 222

222

one index for the starter menu. 223

223

So this menu and then one index for the main menu. 224

224

And then the person will order basically 225

225

by giving the index for eat of the menus. 226

226

So something very simple just to illustrate the point here. 227

227

So let's say starter index and main index. 228

228

Okay and so we will simply now return 229

229

the content of the arrays based on the given indexes. 230

230

So return and so, as I said, 231

231

we're gonna return an array and then we go to 232

232

this.startermenu okay. 233

233

And remember how the this keyword here is set 234

234

as we learned in the last section. 235

235

And so now we go to the position of the starter index 236

236

that we pass into the function. 237

237

Okay that makes sense? 238

238

Then the same with the main menu 239

239

at the position of the main index that has passed in. 240

240

Alright. 241

241

So here we are, of course not doing any destructuring yet 242

242

but now is the time where we will do it. 243

243

So let's call order or in fact restaurant.order 244

244

and let's use two and zero. 245

245

So we want element number two from the starter menu. 246

246

So the garlic bread and the number zero from the main menu, 247

247

which is pizza. 248

248

So we're gonna receive an array with that, right? 249

249

Let me just show that to you. 250

250

And indeed it is garlic bread and pizza. 251

251

And so now we can simply distracter that. 252

252

So this is the destructuring assignment. 253

253

And so let's say starter and main 254

254

should equal these two results. 255

255

So that's logged them starter and main. 256

256

Oh, and now this was already defined before. 257

257

So let's just call this one here, the main course. 258

258

And now indeed, we get the garlic bread and pizza. 259

259

Alright, so this is how we basically receive 260

260

two return values from a function. 261

261

Alright, so of course 262

262

we could have done that without destructuring 263

263

and still return an array from the function, 264

264

but this is a very handy way 265

265

of then immediately creating two variables 266

266

out of one function call. 267

267

Okay. 268

268

And now that you understand how destructuring works 269

269

let's take it one step further 270

270

because what happens if we have a nested array? 271

271

So let's say nested 272

272

and with nested, we mean one array inside another. 273

273

So let's say 274

274

that we know here have another array, five and six. 275

275

So an array inside an array. 276

276

And I'm not sure if we did that before, 277

277

but of course that's perfectly acceptable. 278

278

So as a small exercise 279

279

how can we get this value here and this entire array? 280

280

Well, we simply define two new variables 281

281

using the destructuring assignment 282

282

and let's call them I and J 283

283

and remember that we do not want in the middle, 284

284

so we just skip it. 285

285

So simply leave a space and then another comma 286

286

and then this one is gonna be J 287

287

equals two the array from which they should be taken. 288

288

And indeed we get the number two 289

289

and then the array five and six. 290

290

Great, but what if we actually wanted 291

291

all the individual values? 292

292

Well then we would essentially 293

293

have to do destructuring inside of destructuring. 294

294

So that sounds complicated, but it's not. 295

295

So let's take out these here 296

296

and let's create now three variables. 297

297

So one for this one for the five and one for the six. 298

298

So we're gonna skip the four again. 299

299

So that's gonna be I then again the whole here 300

300

and now here we can destruct 301

301

this inner array immediately. 302

302

So we used the restructuring here again 303

303

into now J for the first element and K for the second. 304

304

So four, five, and six. 305

305

And then again 306

306

the array from which to take, and then let's take a look. 307

307

And so this should now give us two five and six 308

308

as separate variables. 309

309

And yes so that's how nested destructuring works. 310

310

Basically we need to do destructuring 311

311

inside of destructuring. 312

312

Okay. 313

313

And now to finish there is just another feature 314

314

of destructuring that I want to show you. 315

315

So we can also set default values 316

316

for the variables when we are extracting them. 317

317

And that's gonna be very useful in the case 318

318

that we don't know the length of the array, 319

319

and this can sometimes happen in real world applications, 320

320

as you will see later. 321

321

So if we have an array that is shorter than we might think, 322

322

then we might try to unpack the array 323

323

in positions that don't even exist. 324

324

So let me say here just default values 325

325

and here nested destructuring. 326

326

So learning a lot of stuff here about destructuring. 327

327

And so let's now say that we have this array 328

328

eight and nine, 329

329

and then we are trying to distracture it. 330

330

So just pretend 331

331

that we actually don't know the array alright. 332

332

And so we might try to take 333

333

three elements out of the array using again destructuring 334

334

so let's call them P Q and R. 335

335

And then let's try to lock them all P Q and R. 336

336

And so now here we get undefined as the third one. 337

337

So this would basically be the same 338

338

as trying to read the element at position number two 339

339

of this array 340

340

but it only has elements at position zero and one. 341

341

And so therefore we then get undefined. 342

342

But as I said, we can set default values. 343

343

So that's simply set them all to one 344

344

and then, our R will become one. 345

345

Great. 346

346

And if we remove this element, then Q will also become one. 347

347

Okay. 348

348

And as I said, this can sometimes be useful. 349

349

For example, when we get data from an API. 350

350

And so we're gonna probably use this one 351

351

and actually everything that we did in his lecture 352

352

a bit later in the course.