Original subtitles

1 1

Let's now talk about the amazing spread operator. 2

2

So we can use the spread operator 3

3

to basically expand an array into all its elements. 4

4

So basically unpacking all the array elements at one. 5

5

So let's say that we have an array, 6

6

so seven, eight, nine. 7

7

And now we want to create a new array based one this array 8

8

but with some new elements at the beginning. 9

9

So how would we do that? 10

10

Well, with what we already know, 11

11

we would need to loop over this array, 12

12

or even worse, do it manually. 13

13

For example, like this. 14

14

Let's call it the Bad New Array. 15

15

So if we wanted to add one and two 16

16

to the beginning of this array, 17

17

we would have to write one, two, 18

18

and then each of these elements. 19

19

So that would be arr. 0, 20

20

arr. 1, 21

21

and arr. 2. 22

22

Okay, let's take a look. 23

23

And now we need to get a new array 24

24

with the three original elements 25

25

and then a one, two at the beginning of that array. 26

26

Okay, and this is actually quite 27

27

a common operation that we need to do 28

28

and so we can now, since ES6, 29

29

do it in a much better way 30

30

using the spread operator. 31

31

So with the spread operator, 32

32

it's gonna work like this. 33

33

So let's create a new array. 34

34

So this is the good, let's say New Array. 35

35

And then, again, we use one, two, 36

36

and then we use the spread operator, 37

37

which is dot dot dot, 38

38

to basically expand this array 39

39

into all of its individual elements. 40

40

So let's see the result, 41

41

and then I will explain it a little bit better. 42

42

So new array, and you see that we get 43

43

the exact same result here. 44

44

So what the spread operator does 45

45

is to basically take all the values 46

46

out of this arr. array, 47

47

and then write them individually 48

48

as if we wrote seven, eight, nine here manually. 49

49

All right, so if we wrote it without these three dots, 50

50

then we would have this array, 51

51

so this arr. array inside of this one. 52

52

So just like this. 53

53

So one, two, and then an array of seven, eight, nine. 54

54

And that's because here, we are including 55

55

this entire array. 56

56

But with the spread operator, again, 57

57

it's like taking all the elements out of the array 58

58

and writing them here manually. 59

59

And so when we do this, 60

60

we then get seven, eight, nine, 61

61

individually here, represented in this new array. 62

62

So what this means is that we can use the spread operator 63

63

whenever we would otherwise write 64

64

multiple values separated by commas. 65

65

And that situation happens 66

66

whenever we write an array literal 67

67

like we did up here. 68

68

So that's the first situation in which 69

69

it's very useful to expand an array. 70

70

And the second situation is 71

71

when we pass arguments into functions. 72

72

So, for example, let's say 73

73

that we wanted to actually log the individual elements 74

74

of this new array here. 75

75

So if we simply logged the array, 76

76

then it's, of course, gonna look like this. 77

77

It's just one value with just the array, 78

78

it's just one big value. 79

79

But if we use the spread operator 80

80

to expand the new array, 81

81

then see what happens then. 82

82

So now it logged the individual elements of the array. 83

83

So this would be the same as writing 84

84

one, two, seven, eight, nine individually. 85

85

So once again, whenever we need the elements 86

86

of an array individually, 87

87

then we can use the spread operator. 88

88

And that is useful when we write an array 89

89

and when we need to pass multiple elements 90

90

into a function like we did here. 91

91

All right, so let's see a bit more useful example. 92

92

So in this example, we will create an array 93

93

with one more food item in the main menu array. 94

94

So that main menu is here at restaurant dot main menu, 95

95

and so basically we want to create a new menu here. 96

96

So const, new menu, and then let's say 97

97

that we want the original array 98

98

plus one new element. 99

99

So we can do that by simply expanding the array, 100

100

so that's restaurant dot main menu, 101

101

and then we can add other stuff. 102

102

So let's say gnocci, 103

103

at least that's how I think it's spelled 104

104

or pronounced in Italian. 105

105

And so let's have a look at our new menu, 106

106

and indeed, it has the three original elements, 107

107

plus the gnocci. 108

108

And keep in mind that here, we are indeed 109

109

creating a completely new array, all right? 110

110

We are, of course, not manipulating 111

111

the restaurant dot main menu array. 112

112

So we are building a new array from scratch, 113

113

and you can see that here by the square brackets. 114

114

So this brackets syntax here is simply the way 115

115

in which we have always been writing new arrays. 116

116

And so here, again, we are writing a new array 117

117

but simply based on expanding this array, 118

118

and then adding another element to it. 119

119

Okay. 120

120

Now you might have noticed that the spread operator 121

121

is actually a bit similar to destructuring, 122

122

because it also helps us get elements out of arrays. 123

123

Now, the big difference is that the spread operator 124

124

takes all the elements from the array 125

125

and it also doesn't create new variables. 126

126

And as a consequence, we can only use it 127

127

in places where we would otherwise 128

128

write values separated by commas. 129

129

And, in case you're taking notes, 130

130

probably what I just said would be very helpful 131

131

to have as a note. 132

132

Next, let's learn about two important use cases 133

133

of the spread operator, 134

134

which is to create shallow copies of arrays, 135

135

and to merge two arrays together. 136

136

So let's say copy array, 137

137

and so let's simply create a copy of the main menu. 138

138

So main menu copy, and so let's write a new array, 139

139

and into that new array, we will put all the elements 140

140

that are currently in the main menu. 141

141

So at restaurant dot main menu, and that's it. 142

142

So here we just created a shallow copy of this array. 143

143

So that's a little bit similar to object dot assign 144

144

that we used in the previous section, okay? 145

145

But here, this syntax is actually a lot easier to use. 146

146

Now to join two arrays together, 147

147

so join two arrays or more, of course, 148

148

we can use the same technique. 149

149

And so maybe, at this point, you can already guess 150

150

how that would work, and so 151

151

you can do this, actually, as a challenge. 152

152

So pause the video right now, 153

153

and create this variable menu which will be an array 154

154

which contains the whole menu. 155

155

So both the main menu and the starter menu. 156

156

So take a minute and try it on your own here. 157

157

All right, so hopefully, you managed to do that. 158

158

And so the secret here, again, 159

159

is to use the spread operator. 160

160

So restaurant, and let's start with the starter menu. 161

161

So that's gonna be our first couple of elements 162

162

in this new array, and then, of course, 163

163

we can use the spread operator again, 164

164

and then this time expand the main menu. 165

165

Dot main menu. 166

166

And so now we end up with an array 167

167

containing all the food items that are both 168

168

in the starter and the main menu. 169

169

And again, because here, with this spread operator, 170

170

we took all the elements out of the starter menu 171

171

and basically wrote them here into this new array, 172

172

and then the same with the main menu. 173

173

All right, so I told you that the spread operator 174

174

works on arrays, but that's not entirely true, 175

175

because actually, the spread operator 176

176

works on all so-called iterables. 177

177

Now what is an iterable? 178

178

Well, there are different iterables in JavaScript. 179

179

And we will talk about all of them 180

180

by the end of the course, 181

181

but for now, just know that iterables 182

182

are things like all arrays, strings, maps, or sets, 183

183

but not objects. 184

184

So basically, most of the built-in data structures 185

185

in JavaScript are now iterables, but except objects. 186

186

So let me actually write that here for you. 187

187

Iterables are arrays, strings, maps, and sets, 188

188

but not objects. 189

189

Now anyway, since strings are also iterables, 190

190

that means that we can use the spread operator 191

191

on a string, as well. 192

192

So let me quickly show that to you. 193

193

So let's just create a quick string here, Jonas, 194

194

and then I want to create an array 195

195

which contains all the individual letters, 196

196

plus some other elements. 197

197

So, let's call this one letters, 198

198

and then we create a new array 199

199

and expand the string here as well. 200

200

Then here I want an empty string, 201

201

then here I want an S, 202

202

and then let's log it through console, 203

203

and tnow it will make a little bit more sense. 204

204

All right, and so indeed, here we get this array, 205

205

where each letter of the original string 206

206

is now an individual element. 207

207

So just like we expanded, so we unpacked an array, 208

208

we now did the same thing with a string. 209

209

Now just keep in mind 210

210

that we can still only use the spread operator 211

211

when building an array, 212

212

or when we pass values into a function. 213

213

So for example, we can also do this. 214

214

So expand the string here, 215

215

and so then it is the same thing as writing this. 216

216

So J, O, and so on and so forth, right? 217

217

So, indeed, here now we get all the individual elements. 218

218

All right, so for example, what we can't do 219

219

is to use this to build a string using a template literal. 220

220

So here, this is not gonna work. 221

221

And that's because this is not a place 222

222

that expects multiple values separated by a comma. 223

223

So you see unexpected token, all right? 224

224

So again, multiple values separated by a comma 225

225

are usually only expected 226

226

when we pass arguments into a function, 227

227

or when we build a new array. 228

228

So take note of that, 229

229

because that is important to understand 230

230

about the spread operator. 231

231

Okay, but now enough with building arrays. 232

232

Let's now actually write our own function 233

233

that accepts multiple arguments 234

234

and then use the spread operator 235

235

to actually pass those arguments. 236

236

And so that's gonna be a very real-life example right there. 237

237

So let's add here another method now, 238

238

and so, let's say that we want a method 239

239

to order just pasta, okay? 240

240

And the pasta always needs to have 241

241

exactly three ingredients. 242

242

So let's say order pasta, and it's gonna be a function, 243

243

and so now here, we need three ingredients. 244

244

So let's just call them ing. 1, ing. 2, and ing. 3. 245

245

And then just log them to the console, some string, 246

246

here is your delicious pasta 247

247

with ing. 1, 248

248

ing. 2, 249

249

and ing. 3. 250

250

So up here, we have an error, 251

251

so this should be number three. 252

252

And then, let's now call this function. 253

253

So order pasta. 254

254

Now what I want to do here 255

255

is to actually get these ingredients 256

256

from a prompt window. 257

257

So remember the prompt function that we can use, 258

258

and so let's create an array called ingredients. 259

259

And each element here will be defined 260

260

by a prompt window. 261

261

So this here now has nothing to do with 262

262

the spread operator, 263

263

it's just a way so that we can actually 264

264

input the data ourselves. 265

265

So let's say, 266

266

and here we need to escape this, 267

267

So let's make pasta. 268

268

Ingredient one. 269

269

And I think, I didn't show you this escaping here before. 270

270

So here, when we simply write this single quote here, 271

271

to write let's, 272

272

JavaScript thinks that we are finishing this string here. 273

273

Okay, and so we could use the double quotes out here 274

274

or we can escape using the backslash, okay? 275

275

Now when we save this, I think that Prettier 276

276

will actually get rid of this here, 277

277

but it's still important to know that escaping exists. 278

278

So basically, this masks this single quote here, 279

279

so that it does not finish the string at this point. 280

280

So let's save it. 281

281

And so you see that now, the Prettier extension 282

282

actually replaced the single quote with the double quote. 283

283

And so here we see our prompt already, 284

284

but let's create two more. 285

285

So let's say ingredient two now, 286

286

and then another one. 287

287

So again, here we are, simply building an array 288

288

of the three ingredients. 289

289

Okay, and then we can log it to the console, 290

290

just to see A, 291

291

B, and C. 292

292

And so, indeed, we now get these array ingredients 293

293

with A, B, and C, which are the three strings 294

294

that we just wrote there. 295

295

And now, how should we actually call 296

296

the order pasta function? 297

297

So restaurant dot order pasta. 298

298

And in the old way, we would now write 299

299

ingredients zero, ingredients one, and ingredients two. 300

300

But, since we learned about the spread operator 301

301

in this lecture, we can now do a lot better. 302

302

And so, instead, we do this. 303

303

Restaurant dot order pasta. 304

304

And now, all we need to do is to expand 305

305

the elements of the ingredient array, 306

306

and that will then basically 307

307

write the three elements of the array 308

308

here separated by commas. 309

309

So this and this should yield the exact same result, 310

310

and so let's now test it out with some real data. 311

311

So let's see, mushrooms, asparagus, and cheese. 312

312

And so, in these, we get now twice, 313

313

here is your delicious pasta 314

314

with mushrooms, asparagus, and cheese. 315

315

And what do you think is the better solution? 316

316

This one, or this one? 317

317

And especially considering that an array 318

318

could, of course, be a lot longer 319

319

than just three elements. 320

320

So indeed, always go with this 321

321

more modern ES6 syntax here. 322

322

It's an amazing addition to the language. 323

323

And now, just to finish this lecture here, 324

324

since ES 2018, the spread operator 325

325

actually also works on objects, 326

326

even though objects are not iterables. 327

327

So let's write that here. 328

328

And here let's just write real-world example. 329

329

And so let's now experiment with this. 330

330

The first example here was to create 331

331

a new array based on one initial array, right? 332

332

And so let's now also create a new restaurant object 333

333

with all the data from the original one 334

334

plus some additional data. 335

335

And so this is actually an amazing way of doing this, 336

336

because it's so much easier than with old JavaScript. 337

337

So let's call this one new restaurant. 338

338

And then we can simply spread the old restaurant 339

339

and this will then basically copy all the properties 340

340

of the restaurant into this new object. 341

341

And then we can add anything that we want. 342

342

Founder, for example, let's say Giuseppe, 343

343

Or Giuseppe, I don't really know how to say it. 344

344

And, of course, here, the order does not matter as always. 345

345

So this spread here doesn't even have to be the first one. 346

346

So let's say we also want the founding year, 347

347

let's say 1998, 348

348

okay? 349

349

And so with this, we created a brand new object. 350

350

Now we need to get rid of these three prompts there, 351

351

because otherwise, it's gonna drive us crazy. 352

352

But let's just take this out, 353

353

and simply log here the new restaurant to the console. 354

354

And so indeed, we get our original object basically, 355

355

plus the founder, and plus founded in. 356

356

Great. 357

357

And finally, since we were able to do 358

358

shallow copies of arrays, using the spread operator, 359

359

we can do the same with objects. 360

360

So instead of using object dot assign, 361

361

as we did it in the previous lecture. 362

362

So let's do that. 363

363

Restaurant copy. 364

364

And so all we need to do is an empty object 365

365

and then in there expand all the elements 366

366

of the original object, so the restaurant, in this case. 367

367

And so now, if we attempt to change something on the copy, 368

368

copy dot name, 369

369

let's call it now Ristorante Roma, 370

370

and if you're Italian, 371

371

you're not gonna like how that sounds. 372

372

But anyway, now, as we take a look at both of them, 373

373

so the name of the copy and the original, 374

374

now you will see that they are different. 375

375

So the copy has the name of Ristorante Roma, 376

376

and the old one has Classico Italiano, 377

377

which means that, indeed, 378

378

we did make a copy of the original restaurant. 379

379

Because otherwise, as we learned 380

380

by the end of the previous section, 381

381

changing one object would then also change the other one. 382

382

Right? Cool. 383

383

So another long lecture here, 384

384

but we're making really great progress. 385

385

And of course, we will use all of this 386

386

in real projects later down the road. 387

387

But again, I chose to teach you these concepts 388

388

in a separate way and not inside a big project, 389

389

because this allows me to show you 390

390

a lot more different examples 391

391

and it also makes the material more reference-able 392

392

for you in the future. 393

393

And so that's gonna be helpful 394

394

when you're trying to find what you're looking for 395

395

after taking this course.