Original subtitles

1 1

Moving on let's now talk about the rest pattern 2

2

and also rest parameters 3

3

and the rest pattern looks exactly like the spread operator. 4

4

So it has the same syntax with the three dots 5

5

but it actually does the opposite of the spread operator. 6

6

Now that doesn't seem to make much sense, right? 7

7

But let me explain, so remember 8

8

that we used the spread operator to build new arrays 9

9

or to pass multiple values into a function. 10

10

So those are the two use cases of the spread operator 11

11

and in both cases, we use the spread operator 12

12

to expand an array into individual elements. 13

13

Now, the rest pattern uses the exact same syntax 14

14

however, to collect multiple elements 15

15

and condense them into an array. 16

16

so that's really the opposite of spread 17

17

The spread operator is to unpack an array 18

18

while rest is to pack elements into an array 19

19

and since that sounds really confusing 20

20

let's write some coat and let's start by exploring 21

21

the use case of building a race. 22

22

So just to recap in the last lecture 23

23

we use to spread array like this. 24

24

So we wanted to create a new array 25

25

based on an existing, array 26

26

and so we used the spread operator to expand that. 27

27

So here we are still using the spread syntax 28

28

and we know that this is the spread syntax 29

29

because we are using it on the right hand side 30

30

of the assignment operator, so of the equal sign. 31

31

So let me actually write that here, 32

32

spread, because on the right side of the assignment operator 33

33

however, we can also use it on the left hand side 34

34

of the assignment operator together with destructuring. 35

35

So now we're mixing kind of everything together here 36

36

but bear with me here. 37

37

So let's say that we are destructuring this array 38

38

so let me first write the array here 39

39

two, three, four, and five 40

40

and so let's say I want to take the first element 41

41

and store it in variable A 42

42

the second element to store in variable B 43

43

and now I can here use the rest pattern. 44

44

So the same syntax and now let's call this others 45

45

and so here it is the rest syntax 46

46

because it's on the left hand side 47

47

of the assignment operator, 48

48

first write that and then see result 49

49

because on left side of the equal sign 50

50

and so now let's log A, B 51

51

and the others, whatever that's gonna be 52

52

and so one, two and then basically the rest 53

53

of the elements that we did not select 54

54

into the A and the B variables. 55

55

So what is happening here? 56

56

Well, just like before 57

57

the first and the second elements become this first 58

58

and second variables, but then here comes the rest pattern 59

59

and so it's called rest because it will take 60

60

the rest of the elements. 61

61

So the remaining elements of the array 62

62

and then put them into a new array 63

63

and in this case, we call this array others. 64

64

So as I said in the beginning, 65

65

the rest pattern basically collects 66

66

the elements that are unused 67

67

in the destructuring assignment. 68

68

So let's see another example here 69

69

and this will show you that we can actually use 70

70

the three dots on both sides of the assignment operator. 71

71

So let's say that we have this array 72

72

which will be the entire menu 73

73

and so we already know how to build that 74

74

using the spread operator. 75

75

So we go to restaurant dot main menu 76

76

so that's dot 77

77

so we take all the elements out of that array 78

78

and put it into a new array 79

79

and then into this new array 80

80

we also put the starter menu, okay? 81

81

So this is going to be an array, a big array 82

82

with all the entire menu, but now 83

83

we can actually also use the rest pattern here 84

84

and so again, we do that here on the left hand side 85

85

while we are doing destructuring. 86

86

So let's take a look here at the main menu 87

87

so, let's say that we want to take the pizza 88

88

and the risotto, okay? 89

89

So that's the first and the third 90

90

so let's create a variable called pizza 91

91

then we can skip one variable remember, 92

92

so leaving a hole there in the destructuring assignment 93

93

then let's call one variable risotto 94

94

and then simply put all the other food well 95

95

into an array called other food 96

96

and now let's simply log everything here 97

97

to the console, 98

98

All right, so we get indeed the string pizza 99

99

the string risotto 100

100

and then all the rest of the elements 101

101

that we didn't select previously into their own variables 102

102

and note here that the rest syntax collects 103

103

all the array after the last variable. 104

104

So in this case here risotto 105

105

so it does not include any skipped elements 106

106

so it's really just the rest of the elements 107

107

and yeah again, as I said, 108

108

it does not include any skipped elements 109

109

and so for that reason, 110

110

the rest pattern always must be the lest 111

111

in the destructuring assignment 112

112

because otherwise how will JavaScript know 113

113

until when it should collect the rest of the array, right? 114

114

So for example, we could not do this 115

115

so the error message is actually very explicit 116

116

so the rest element must be the last element. 117

117

All right, and also for the same reason 118

118

there can only ever be one rest 119

119

in any destructuring assignment, okay 120

120

and now let's do the same in objects 121

121

because it also works indeed in objects. 122

122

So the difference then of course, 123

123

is that the remaining elements will be collected 124

124

into a new object and not into a new array. 125

125

So let's not work here with our opening hours 126

126

and let's say that we want to select only Saturday here 127

127

and then the rest should go into a new object 128

128

which are the weekdays. 129

129

So Saturday is weekend 130

130

and Friday and Thursday are the weekdays 131

131

and so basically we want to create an object 132

132

only with these two. 133

133

So only for the week days and now that is easy to do 134

134

all we need to do is to basically take out a Saturday 135

135

into its own variable 136

136

and then we simply collect the rest into a new object 137

137

and this we can call weekdays, okay? 138

138

And then here, of course the object 139

139

that we are, destructuring dot opening hours 140

140

and now let's take a look at our weekdays here 141

141

and indeed it is exactly what we were expecting. 142

142

It is an object only containing Friday and Thursday 143

143

and again, that's because we already took Saturday 144

144

into its own variable before 145

145

and so this then collected the rest of the properties 146

146

into its own new object. 147

147

Great, so now we know how the rest pattern 148

148

works to collect elements in a destructuring assignment 149

149

and actually let's write that here. 150

150

So this whole first part is for destructuring 151

151

and then the second part will be about functions basically. 152

152

So, remember that also for the spread operator 153

153

the second use case was to pass multiple arguments 154

154

into a function all at the same time. 155

155

So that's exactly what we did here 156

156

in our real example, with this ingredients array, right? 157

157

So we had an array 158

158

and then we expanded all of these elements of the array 159

159

to basically pass these elements then 160

160

as individual arguments of the function 161

161

and so now, as you can guess 162

162

the rest operator can basically do the opposite 163

163

and so let's now write an example, function for debt. 164

164

So I'm gonna call it add 165

165

and so in a real adding function 166

166

we wanna take an arbitrary amount of arguments 167

167

and simply add all of them together, right? 168

168

So function and for now, let's just leave it like this 169

169

and so let me illustrate 170

170

how we want to call this function, actually. 171

171

So we want to be able to do for example, 172

172

this two and three, it would give us five 173

173

but then we also might want to be able to do this 174

174

five and three and seven and two, for example. 175

175

So again, any arbitrary amount of arguments 176

176

should work for this function 177

177

so something like this, for example, 178

178

but of course we're not gonna specify 179

179

like seven arguments here, right? 180

180

So how can we do that? 181

181

Well, we will use the rest pattern 182

182

and in this case, it is actually called rest parameters. 183

183

So let's use the rest syntax 184

184

and then let's call this argument numbers 185

185

and then log this numbers to the console. 186

186

So this function is gonna be called three times 187

187

and so we are expecting three results here 188

188

and what we see here is three race 189

189

with all the arguments that we passed into the functions 190

190

but they are indeed a race 191

191

and so now once again, as I said in the beginning 192

192

the rest syntax is taking multiple numbers 193

193

or multiple values and then packs them all into one array. 194

194

So, once more it is doing the opposite 195

195

of the spread operator 196

196

so with the spread operator we expand 197

197

with the rest syntax we compress 198

198

so here it's called rest arguments, okay? 199

199

And now we can write some simple logic here 200

200

to actually add all the numbers together. 201

201

I believe we already did that. 202

202

So here is our sum variable that's gonna be accumulating 203

203

then let's write a simple for loop 204

204

and you could also do this year as a challenge 205

205

if you want it 206

206

but anyway, I will just do it right away. 207

207

So we know that numbers is an array 208

208

and so we can take the length of that array 209

209

and run this loop 210

210

as long as the counter is below the length of the array 211

211

and in each iteration we simply add the current number 212

212

to the current sum value basically. 213

213

So I'm writing this really fast 214

214

because we already did this before, all right? 215

215

And so this should be nothing new at this point 216

216

and now to finish we can log this sum to the console 217

217

to get some results 218

218

and indeed this year is now five 219

219

and so this is at this point a working function 220

220

which can accept any number of parameters 221

221

and hopefully your not confused yet by this 222

222

and now I want to take it even to the next level. 223

223

So let's create yet another array let's just call it X 224

224

because it's not important 225

225

and I will put in numbers 23 and let's say five and seven. 226

226

So now if we wanted to take these values here 227

227

and call the add function 228

228

with these three values, how would we do that? 229

229

Well, simply enough 230

230

we simply use the spread operator and that's it 231

231

and so this is exactly what we learned 232

232

in the previous lecture. 233

233

So we're taking all the numbers of the array 234

234

and spreading them here 235

235

and so this would be the same as writing manually 236

236

23, five and seven 237

237

and so this is a good example of showing you 238

238

how spread is the opposite of rest 239

239

because after these numbers being spread here 240

240

they will then enter this add function here 241

241

and then they will immediately be collected 242

242

into this numbers array by the rest parameters, okay? 243

243

So here we unpacked the values 244

244

and here pack them back again into an array 245

245

and you could actually be wondering 246

246

why we are not simply writing an add function 247

247

which takes an array as an argument 248

248

and then we don't need all of this. 249

249

Well, it's way better to do it like this 250

250

because then the function can accept both an array 251

251

basically by doing this 252

252

and simply all the single values like this 253

253

and also it feels a little bit more natural 254

254

to simply pass as many arguments as we want to add together 255

255

into the function. 256

256

So without having to deal with arrays if we don't want to 257

257

and so this rest parameters is something 258

258

that you will see all the time 259

259

in modern JavaScript code basis. 260

260

Okay, and now just to finish this 261

261

let's actually use rest parameters 262

262

in our restaurant example here also to see some edge cases. 263

263

So let's add yet another method here 264

264

and this time to method is gonna be about ordering pizza. 265

265

So order pizza 266

266

and now pizzas need to have at least one ingredient 267

267

but the other ingredients are optional 268

268

and for this rest parameters are perfect. 269

269

So let's say main ingredient and then the other ingredients 270

270

and then this is gonna work a little bit 271

271

like destructuring again where 272

272

this here basically we'll collect all of the rest 273

273

of the arguments into an array. 274

274

So let's see that so main ingredient 275

275

and that's logged the other ingredients, okay? 276

276

And so now let's order pizza 277

277

so restaurants thought order pizza 278

278

and now here we specify our ingredients. 279

279

So let's say mushrooms, onion, olives and spinach 280

280

so a nice vegetarian pizza right here 281

281

and so you see we can specify as many arguments 282

282

as we want it, let's save this 283

283

and do you see down here immediately 284

284

that we get mushrooms, which is this first ingredient here 285

285

and then we get an array 286

286

of all the remaining ingredients that we passed in 287

287

and so this of course is the result of the rest arguments. 288

288

So, again the first argument was stored 289

289

into this main argument here 290

290

and then all the remaining arguments that were passed 291

291

in were simply stored into this array 292

292

by the rest parameter of syntax, okay? 293

293

And of course we could also simply define just one. 294

294

So let's order now a pizza with only mushrooms 295

295

then the remaining arguments here will simply be put 296

296

in an empty array because of course there are none 297

297

and so there is nothing to collect into the array 298

298

but we still get an empty array 299

299

that we can work with if we want. 300

300

So in that function, we could now create some logic 301

301

like to create a string based on all of these ingredients. 302

302

But I am not gonna go into that right now 303

303

but if you wanna have some fun 304

304

then feel of course free to do that by yourself. 305

305

Anyway the take away from this example is that 306

306

once again the rest parameters serves to collect 307

307

all of the remaining basically unused parameters 308

308

that were not used in this parameter. 309

309

All right, so let's recap 310

310

after yet another quiet, long lecture here. 311

311

So, the spread and rests syntax 312

312

both look exactly the same 313

313

but they work in opposite ways 314

314

depending on where they are used. 315

315

So the spread operator is used 316

316

where we would otherwise write values, separated by a comma. 317

317

On the other hand the rest pattern is basically used 318

318

where we would otherwise write variable names 319

319

separated by commas. 320

320

So, again the rest pattern can be used 321

321

where we would write variable names, separated by commas 322

322

and not values separated by commas. 323

323

So it's a subtle distinction, but this is how you know 324

324

when and where to use spread and rest.