1 00:00:01,130 --> 00:00:04,620 Moving on let's now talk about the rest pattern 2 00:00:04,620 --> 00:00:06,680 and also rest parameters 3 00:00:08,610 --> 00:00:12,880 and the rest pattern looks exactly like the spread operator. 4 00:00:12,880 --> 00:00:16,292 So it has the same syntax with the three dots 5 00:00:16,292 --> 00:00:20,670 but it actually does the opposite of the spread operator. 6 00:00:20,670 --> 00:00:24,230 Now that doesn't seem to make much sense, right? 7 00:00:24,230 --> 00:00:27,190 But let me explain, so remember 8 00:00:27,190 --> 00:00:30,990 that we used the spread operator to build new arrays 9 00:00:30,990 --> 00:00:34,590 or to pass multiple values into a function. 10 00:00:34,590 --> 00:00:38,580 So those are the two use cases of the spread operator 11 00:00:38,580 --> 00:00:41,530 and in both cases, we use the spread operator 12 00:00:41,530 --> 00:00:45,700 to expand an array into individual elements. 13 00:00:45,700 --> 00:00:49,037 Now, the rest pattern uses the exact same syntax 14 00:00:49,037 --> 00:00:52,400 however, to collect multiple elements 15 00:00:52,400 --> 00:00:55,100 and condense them into an array. 16 00:00:55,100 --> 00:00:58,250 so that's really the opposite of spread 17 00:00:58,250 --> 00:01:01,470 The spread operator is to unpack an array 18 00:01:01,470 --> 00:01:05,810 while rest is to pack elements into an array 19 00:01:05,810 --> 00:01:08,010 and since that sounds really confusing 20 00:01:08,010 --> 00:01:11,235 let's write some coat and let's start by exploring 21 00:01:11,235 --> 00:01:14,410 the use case of building a race. 22 00:01:14,410 --> 00:01:16,610 So just to recap in the last lecture 23 00:01:16,610 --> 00:01:20,053 we use to spread array like this. 24 00:01:20,970 --> 00:01:23,080 So we wanted to create a new array 25 00:01:24,230 --> 00:01:25,980 based on an existing, array 26 00:01:27,630 --> 00:01:30,383 and so we used the spread operator to expand that. 27 00:01:32,640 --> 00:01:36,370 So here we are still using the spread syntax 28 00:01:36,370 --> 00:01:38,470 and we know that this is the spread syntax 29 00:01:38,470 --> 00:01:41,930 because we are using it on the right hand side 30 00:01:41,930 --> 00:01:45,900 of the assignment operator, so of the equal sign. 31 00:01:45,900 --> 00:01:48,150 So let me actually write that here, 32 00:01:48,150 --> 00:01:53,150 spread, because on the right side of the assignment operator 33 00:01:56,140 --> 00:01:59,480 however, we can also use it on the left hand side 34 00:01:59,480 --> 00:02:03,780 of the assignment operator together with destructuring. 35 00:02:03,780 --> 00:02:07,070 So now we're mixing kind of everything together here 36 00:02:07,070 --> 00:02:09,233 but bear with me here. 37 00:02:10,525 --> 00:02:14,690 So let's say that we are destructuring this array 38 00:02:14,690 --> 00:02:16,800 so let me first write the array here 39 00:02:16,800 --> 00:02:20,200 two, three, four, and five 40 00:02:21,470 --> 00:02:24,620 and so let's say I want to take the first element 41 00:02:24,620 --> 00:02:27,410 and store it in variable A 42 00:02:27,410 --> 00:02:30,970 the second element to store in variable B 43 00:02:30,970 --> 00:02:34,150 and now I can here use the rest pattern. 44 00:02:34,150 --> 00:02:39,150 So the same syntax and now let's call this others 45 00:02:39,740 --> 00:02:41,860 and so here it is the rest syntax 46 00:02:41,860 --> 00:02:44,040 because it's on the left hand side 47 00:02:44,040 --> 00:02:45,603 of the assignment operator, 48 00:02:47,470 --> 00:02:50,170 first write that and then see result 49 00:02:50,170 --> 00:02:55,170 because on left side of the equal sign 50 00:02:56,770 --> 00:02:59,200 and so now let's log A, B 51 00:03:00,390 --> 00:03:03,040 and the others, whatever that's gonna be 52 00:03:04,210 --> 00:03:09,140 and so one, two and then basically the rest 53 00:03:09,140 --> 00:03:11,450 of the elements that we did not select 54 00:03:11,450 --> 00:03:14,680 into the A and the B variables. 55 00:03:14,680 --> 00:03:17,040 So what is happening here? 56 00:03:17,040 --> 00:03:18,670 Well, just like before 57 00:03:18,670 --> 00:03:22,080 the first and the second elements become this first 58 00:03:22,080 --> 00:03:26,950 and second variables, but then here comes the rest pattern 59 00:03:26,950 --> 00:03:29,786 and so it's called rest because it will take 60 00:03:29,786 --> 00:03:31,650 the rest of the elements. 61 00:03:31,650 --> 00:03:34,580 So the remaining elements of the array 62 00:03:34,580 --> 00:03:37,070 and then put them into a new array 63 00:03:37,070 --> 00:03:39,930 and in this case, we call this array others. 64 00:03:39,930 --> 00:03:41,730 So as I said in the beginning, 65 00:03:41,730 --> 00:03:44,150 the rest pattern basically collects 66 00:03:44,150 --> 00:03:46,410 the elements that are unused 67 00:03:46,410 --> 00:03:48,563 in the destructuring assignment. 68 00:03:51,490 --> 00:03:54,540 So let's see another example here 69 00:03:54,540 --> 00:03:57,140 and this will show you that we can actually use 70 00:03:57,140 --> 00:04:02,140 the three dots on both sides of the assignment operator. 71 00:04:02,390 --> 00:04:05,160 So let's say that we have this array 72 00:04:05,160 --> 00:04:07,350 which will be the entire menu 73 00:04:07,350 --> 00:04:09,310 and so we already know how to build that 74 00:04:09,310 --> 00:04:10,853 using the spread operator. 75 00:04:11,700 --> 00:04:14,890 So we go to restaurant dot main menu 76 00:04:16,560 --> 00:04:17,430 so that's dot 77 00:04:18,310 --> 00:04:20,920 so we take all the elements out of that array 78 00:04:20,920 --> 00:04:22,890 and put it into a new array 79 00:04:22,890 --> 00:04:25,180 and then into this new array 80 00:04:25,180 --> 00:04:29,493 we also put the starter menu, okay? 81 00:04:30,600 --> 00:04:33,290 So this is going to be an array, a big array 82 00:04:33,290 --> 00:04:36,410 with all the entire menu, but now 83 00:04:36,410 --> 00:04:39,860 we can actually also use the rest pattern here 84 00:04:39,860 --> 00:04:43,033 and so again, we do that here on the left hand side 85 00:04:43,033 --> 00:04:45,163 while we are doing destructuring. 86 00:04:48,390 --> 00:04:50,770 So let's take a look here at the main menu 87 00:04:53,120 --> 00:04:58,120 so, let's say that we want to take the pizza 88 00:04:58,650 --> 00:05:01,070 and the risotto, okay? 89 00:05:01,070 --> 00:05:03,710 So that's the first and the third 90 00:05:06,250 --> 00:05:09,920 so let's create a variable called pizza 91 00:05:09,920 --> 00:05:13,080 then we can skip one variable remember, 92 00:05:13,080 --> 00:05:17,010 so leaving a hole there in the destructuring assignment 93 00:05:17,010 --> 00:05:21,380 then let's call one variable risotto 94 00:05:21,380 --> 00:05:24,990 and then simply put all the other food well 95 00:05:24,990 --> 00:05:27,050 into an array called other food 96 00:05:28,000 --> 00:05:30,460 and now let's simply log everything here 97 00:05:30,460 --> 00:05:31,723 to the console, 98 00:05:39,910 --> 00:05:43,990 All right, so we get indeed the string pizza 99 00:05:43,990 --> 00:05:45,710 the string risotto 100 00:05:45,710 --> 00:05:48,810 and then all the rest of the elements 101 00:05:48,810 --> 00:05:52,850 that we didn't select previously into their own variables 102 00:05:52,850 --> 00:05:56,130 and note here that the rest syntax collects 103 00:05:56,130 --> 00:05:59,680 all the array after the last variable. 104 00:05:59,680 --> 00:06:02,090 So in this case here risotto 105 00:06:03,200 --> 00:06:06,570 so it does not include any skipped elements 106 00:06:06,570 --> 00:06:09,180 so it's really just the rest of the elements 107 00:06:09,180 --> 00:06:11,780 and yeah again, as I said, 108 00:06:11,780 --> 00:06:15,100 it does not include any skipped elements 109 00:06:15,100 --> 00:06:16,990 and so for that reason, 110 00:06:16,990 --> 00:06:19,890 the rest pattern always must be the lest 111 00:06:19,890 --> 00:06:21,860 in the destructuring assignment 112 00:06:21,860 --> 00:06:24,610 because otherwise how will JavaScript know 113 00:06:24,610 --> 00:06:29,610 until when it should collect the rest of the array, right? 114 00:06:29,690 --> 00:06:32,620 So for example, we could not do this 115 00:06:34,920 --> 00:06:37,970 so the error message is actually very explicit 116 00:06:37,970 --> 00:06:41,593 so the rest element must be the last element. 117 00:06:43,540 --> 00:06:46,650 All right, and also for the same reason 118 00:06:46,650 --> 00:06:49,515 there can only ever be one rest 119 00:06:49,515 --> 00:06:54,210 in any destructuring assignment, okay 120 00:06:55,350 --> 00:06:57,970 and now let's do the same in objects 121 00:06:57,970 --> 00:07:02,480 because it also works indeed in objects. 122 00:07:02,480 --> 00:07:04,190 So the difference then of course, 123 00:07:04,190 --> 00:07:06,830 is that the remaining elements will be collected 124 00:07:06,830 --> 00:07:10,870 into a new object and not into a new array. 125 00:07:10,870 --> 00:07:14,500 So let's not work here with our opening hours 126 00:07:14,500 --> 00:07:19,500 and let's say that we want to select only Saturday here 127 00:07:20,150 --> 00:07:23,410 and then the rest should go into a new object 128 00:07:23,410 --> 00:07:25,780 which are the weekdays. 129 00:07:25,780 --> 00:07:27,580 So Saturday is weekend 130 00:07:27,580 --> 00:07:31,740 and Friday and Thursday are the weekdays 131 00:07:31,740 --> 00:07:35,150 and so basically we want to create an object 132 00:07:35,150 --> 00:07:36,970 only with these two. 133 00:07:36,970 --> 00:07:41,970 So only for the week days and now that is easy to do 134 00:07:42,340 --> 00:07:47,070 all we need to do is to basically take out a Saturday 135 00:07:47,070 --> 00:07:48,770 into its own variable 136 00:07:48,770 --> 00:07:53,060 and then we simply collect the rest into a new object 137 00:07:53,060 --> 00:07:57,923 and this we can call weekdays, okay? 138 00:07:58,820 --> 00:08:01,090 And then here, of course the object 139 00:08:01,090 --> 00:08:05,300 that we are, destructuring dot opening hours 140 00:08:05,300 --> 00:08:09,220 and now let's take a look at our weekdays here 141 00:08:10,700 --> 00:08:14,110 and indeed it is exactly what we were expecting. 142 00:08:14,110 --> 00:08:17,690 It is an object only containing Friday and Thursday 143 00:08:18,550 --> 00:08:21,670 and again, that's because we already took Saturday 144 00:08:21,670 --> 00:08:24,160 into its own variable before 145 00:08:24,160 --> 00:08:26,985 and so this then collected the rest of the properties 146 00:08:26,985 --> 00:08:30,070 into its own new object. 147 00:08:30,070 --> 00:08:33,200 Great, so now we know how the rest pattern 148 00:08:33,200 --> 00:08:37,620 works to collect elements in a destructuring assignment 149 00:08:39,220 --> 00:08:41,493 and actually let's write that here. 150 00:08:43,190 --> 00:08:45,910 So this whole first part is for destructuring 151 00:08:50,690 --> 00:08:55,690 and then the second part will be about functions basically. 152 00:08:59,510 --> 00:09:03,230 So, remember that also for the spread operator 153 00:09:03,230 --> 00:09:06,720 the second use case was to pass multiple arguments 154 00:09:06,720 --> 00:09:09,560 into a function all at the same time. 155 00:09:09,560 --> 00:09:11,680 So that's exactly what we did here 156 00:09:11,680 --> 00:09:16,410 in our real example, with this ingredients array, right? 157 00:09:16,410 --> 00:09:17,660 So we had an array 158 00:09:17,660 --> 00:09:21,250 and then we expanded all of these elements of the array 159 00:09:21,250 --> 00:09:23,650 to basically pass these elements then 160 00:09:23,650 --> 00:09:26,980 as individual arguments of the function 161 00:09:29,010 --> 00:09:30,416 and so now, as you can guess 162 00:09:30,416 --> 00:09:33,910 the rest operator can basically do the opposite 163 00:09:34,820 --> 00:09:38,563 and so let's now write an example, function for debt. 164 00:09:39,820 --> 00:09:42,730 So I'm gonna call it add 165 00:09:42,730 --> 00:09:44,960 and so in a real adding function 166 00:09:44,960 --> 00:09:48,040 we wanna take an arbitrary amount of arguments 167 00:09:48,040 --> 00:09:50,903 and simply add all of them together, right? 168 00:09:52,280 --> 00:09:56,440 So function and for now, let's just leave it like this 169 00:09:58,620 --> 00:10:00,480 and so let me illustrate 170 00:10:00,480 --> 00:10:03,170 how we want to call this function, actually. 171 00:10:03,170 --> 00:10:05,790 So we want to be able to do for example, 172 00:10:05,790 --> 00:10:09,924 this two and three, it would give us five 173 00:10:09,924 --> 00:10:13,830 but then we also might want to be able to do this 174 00:10:13,830 --> 00:10:18,830 five and three and seven and two, for example. 175 00:10:19,500 --> 00:10:22,580 So again, any arbitrary amount of arguments 176 00:10:22,580 --> 00:10:24,200 should work for this function 177 00:10:26,130 --> 00:10:29,370 so something like this, for example, 178 00:10:29,370 --> 00:10:31,580 but of course we're not gonna specify 179 00:10:31,580 --> 00:10:34,740 like seven arguments here, right? 180 00:10:34,740 --> 00:10:36,860 So how can we do that? 181 00:10:36,860 --> 00:10:39,440 Well, we will use the rest pattern 182 00:10:40,310 --> 00:10:44,510 and in this case, it is actually called rest parameters. 183 00:10:44,510 --> 00:10:47,210 So let's use the rest syntax 184 00:10:47,210 --> 00:10:50,050 and then let's call this argument numbers 185 00:10:50,050 --> 00:10:55,050 and then log this numbers to the console. 186 00:10:55,680 --> 00:10:58,370 So this function is gonna be called three times 187 00:10:59,390 --> 00:11:02,770 and so we are expecting three results here 188 00:11:03,700 --> 00:11:06,870 and what we see here is three race 189 00:11:06,870 --> 00:11:10,390 with all the arguments that we passed into the functions 190 00:11:10,390 --> 00:11:12,490 but they are indeed a race 191 00:11:12,490 --> 00:11:15,570 and so now once again, as I said in the beginning 192 00:11:15,570 --> 00:11:19,020 the rest syntax is taking multiple numbers 193 00:11:19,020 --> 00:11:24,020 or multiple values and then packs them all into one array. 194 00:11:24,180 --> 00:11:26,120 So, once more it is doing the opposite 195 00:11:26,120 --> 00:11:28,100 of the spread operator 196 00:11:28,100 --> 00:11:30,292 so with the spread operator we expand 197 00:11:30,292 --> 00:11:33,690 with the rest syntax we compress 198 00:11:33,690 --> 00:11:37,400 so here it's called rest arguments, okay? 199 00:11:37,400 --> 00:11:39,810 And now we can write some simple logic here 200 00:11:39,810 --> 00:11:42,450 to actually add all the numbers together. 201 00:11:42,450 --> 00:11:44,360 I believe we already did that. 202 00:11:44,360 --> 00:11:49,060 So here is our sum variable that's gonna be accumulating 203 00:11:49,060 --> 00:11:51,990 then let's write a simple for loop 204 00:11:51,990 --> 00:11:54,180 and you could also do this year as a challenge 205 00:11:54,180 --> 00:11:55,460 if you want it 206 00:11:55,460 --> 00:11:57,713 but anyway, I will just do it right away. 207 00:11:59,090 --> 00:12:01,769 So we know that numbers is an array 208 00:12:01,769 --> 00:12:05,290 and so we can take the length of that array 209 00:12:05,290 --> 00:12:06,780 and run this loop 210 00:12:06,780 --> 00:12:10,480 as long as the counter is below the length of the array 211 00:12:10,480 --> 00:12:15,480 and in each iteration we simply add the current number 212 00:12:16,350 --> 00:12:21,350 to the current sum value basically. 213 00:12:21,630 --> 00:12:23,140 So I'm writing this really fast 214 00:12:23,140 --> 00:12:26,900 because we already did this before, all right? 215 00:12:26,900 --> 00:12:29,980 And so this should be nothing new at this point 216 00:12:29,980 --> 00:12:33,770 and now to finish we can log this sum to the console 217 00:12:33,770 --> 00:12:35,270 to get some results 218 00:12:35,270 --> 00:12:38,060 and indeed this year is now five 219 00:12:39,110 --> 00:12:42,460 and so this is at this point a working function 220 00:12:42,460 --> 00:12:46,310 which can accept any number of parameters 221 00:12:46,310 --> 00:12:50,230 and hopefully your not confused yet by this 222 00:12:51,340 --> 00:12:55,020 and now I want to take it even to the next level. 223 00:12:55,020 --> 00:12:58,970 So let's create yet another array let's just call it X 224 00:12:58,970 --> 00:13:00,456 because it's not important 225 00:13:00,456 --> 00:13:05,456 and I will put in numbers 23 and let's say five and seven. 226 00:13:08,020 --> 00:13:11,350 So now if we wanted to take these values here 227 00:13:11,350 --> 00:13:12,920 and call the add function 228 00:13:12,920 --> 00:13:16,810 with these three values, how would we do that? 229 00:13:16,810 --> 00:13:18,640 Well, simply enough 230 00:13:18,640 --> 00:13:22,567 we simply use the spread operator and that's it 231 00:13:22,567 --> 00:13:25,090 and so this is exactly what we learned 232 00:13:25,090 --> 00:13:27,090 in the previous lecture. 233 00:13:27,090 --> 00:13:29,660 So we're taking all the numbers of the array 234 00:13:29,660 --> 00:13:31,200 and spreading them here 235 00:13:31,200 --> 00:13:33,860 and so this would be the same as writing manually 236 00:13:33,860 --> 00:13:36,630 23, five and seven 237 00:13:36,630 --> 00:13:38,520 and so this is a good example of showing you 238 00:13:38,520 --> 00:13:41,700 how spread is the opposite of rest 239 00:13:41,700 --> 00:13:44,890 because after these numbers being spread here 240 00:13:44,890 --> 00:13:48,280 they will then enter this add function here 241 00:13:48,280 --> 00:13:51,300 and then they will immediately be collected 242 00:13:51,300 --> 00:13:56,200 into this numbers array by the rest parameters, okay? 243 00:13:56,200 --> 00:13:58,267 So here we unpacked the values 244 00:13:58,267 --> 00:14:01,750 and here pack them back again into an array 245 00:14:02,700 --> 00:14:04,780 and you could actually be wondering 246 00:14:04,780 --> 00:14:08,260 why we are not simply writing an add function 247 00:14:08,260 --> 00:14:10,890 which takes an array as an argument 248 00:14:10,890 --> 00:14:13,300 and then we don't need all of this. 249 00:14:13,300 --> 00:14:15,970 Well, it's way better to do it like this 250 00:14:15,970 --> 00:14:19,420 because then the function can accept both an array 251 00:14:19,420 --> 00:14:21,300 basically by doing this 252 00:14:21,300 --> 00:14:25,330 and simply all the single values like this 253 00:14:25,330 --> 00:14:28,100 and also it feels a little bit more natural 254 00:14:28,100 --> 00:14:32,410 to simply pass as many arguments as we want to add together 255 00:14:32,410 --> 00:14:33,770 into the function. 256 00:14:33,770 --> 00:14:38,050 So without having to deal with arrays if we don't want to 257 00:14:38,050 --> 00:14:41,440 and so this rest parameters is something 258 00:14:41,440 --> 00:14:42,996 that you will see all the time 259 00:14:42,996 --> 00:14:46,210 in modern JavaScript code basis. 260 00:14:46,210 --> 00:14:48,470 Okay, and now just to finish this 261 00:14:48,470 --> 00:14:50,990 let's actually use rest parameters 262 00:14:50,990 --> 00:14:55,990 in our restaurant example here also to see some edge cases. 263 00:14:56,810 --> 00:14:59,965 So let's add yet another method here 264 00:14:59,965 --> 00:15:04,513 and this time to method is gonna be about ordering pizza. 265 00:15:05,570 --> 00:15:08,620 So order pizza 266 00:15:10,390 --> 00:15:14,780 and now pizzas need to have at least one ingredient 267 00:15:14,780 --> 00:15:17,640 but the other ingredients are optional 268 00:15:17,640 --> 00:15:21,530 and for this rest parameters are perfect. 269 00:15:21,530 --> 00:15:26,530 So let's say main ingredient and then the other ingredients 270 00:15:31,430 --> 00:15:34,220 and then this is gonna work a little bit 271 00:15:34,220 --> 00:15:36,946 like destructuring again where 272 00:15:36,946 --> 00:15:40,310 this here basically we'll collect all of the rest 273 00:15:40,310 --> 00:15:43,210 of the arguments into an array. 274 00:15:43,210 --> 00:15:47,390 So let's see that so main ingredient 275 00:15:48,670 --> 00:15:52,383 and that's logged the other ingredients, okay? 276 00:15:54,950 --> 00:15:56,660 And so now let's order pizza 277 00:16:03,100 --> 00:16:06,620 so restaurants thought order pizza 278 00:16:06,620 --> 00:16:09,770 and now here we specify our ingredients. 279 00:16:09,770 --> 00:16:14,770 So let's say mushrooms, onion, olives and spinach 280 00:16:18,400 --> 00:16:20,780 so a nice vegetarian pizza right here 281 00:16:22,240 --> 00:16:25,300 and so you see we can specify as many arguments 282 00:16:25,300 --> 00:16:29,460 as we want it, let's save this 283 00:16:29,460 --> 00:16:31,320 and do you see down here immediately 284 00:16:31,320 --> 00:16:35,810 that we get mushrooms, which is this first ingredient here 285 00:16:35,810 --> 00:16:37,210 and then we get an array 286 00:16:37,210 --> 00:16:41,510 of all the remaining ingredients that we passed in 287 00:16:41,510 --> 00:16:45,890 and so this of course is the result of the rest arguments. 288 00:16:45,890 --> 00:16:49,340 So, again the first argument was stored 289 00:16:49,340 --> 00:16:53,730 into this main argument here 290 00:16:53,730 --> 00:16:56,350 and then all the remaining arguments that were passed 291 00:16:56,350 --> 00:16:59,750 in were simply stored into this array 292 00:16:59,750 --> 00:17:04,210 by the rest parameter of syntax, okay? 293 00:17:04,210 --> 00:17:07,773 And of course we could also simply define just one. 294 00:17:09,460 --> 00:17:14,460 So let's order now a pizza with only mushrooms 295 00:17:16,230 --> 00:17:21,230 then the remaining arguments here will simply be put 296 00:17:21,390 --> 00:17:25,360 in an empty array because of course there are none 297 00:17:25,360 --> 00:17:28,640 and so there is nothing to collect into the array 298 00:17:28,640 --> 00:17:30,718 but we still get an empty array 299 00:17:30,718 --> 00:17:33,800 that we can work with if we want. 300 00:17:33,800 --> 00:17:36,289 So in that function, we could now create some logic 301 00:17:36,289 --> 00:17:40,770 like to create a string based on all of these ingredients. 302 00:17:40,770 --> 00:17:43,459 But I am not gonna go into that right now 303 00:17:43,459 --> 00:17:45,480 but if you wanna have some fun 304 00:17:45,480 --> 00:17:49,033 then feel of course free to do that by yourself. 305 00:17:50,730 --> 00:17:53,940 Anyway the take away from this example is that 306 00:17:53,940 --> 00:17:57,710 once again the rest parameters serves to collect 307 00:17:57,710 --> 00:18:01,650 all of the remaining basically unused parameters 308 00:18:01,650 --> 00:18:05,853 that were not used in this parameter. 309 00:18:08,950 --> 00:18:11,100 All right, so let's recap 310 00:18:11,100 --> 00:18:15,470 after yet another quiet, long lecture here. 311 00:18:15,470 --> 00:18:18,000 So, the spread and rests syntax 312 00:18:18,000 --> 00:18:20,150 both look exactly the same 313 00:18:20,150 --> 00:18:22,560 but they work in opposite ways 314 00:18:22,560 --> 00:18:25,860 depending on where they are used. 315 00:18:25,860 --> 00:18:28,120 So the spread operator is used 316 00:18:28,120 --> 00:18:32,940 where we would otherwise write values, separated by a comma. 317 00:18:32,940 --> 00:18:36,490 On the other hand the rest pattern is basically used 318 00:18:36,490 --> 00:18:39,960 where we would otherwise write variable names 319 00:18:39,960 --> 00:18:41,713 separated by commas. 320 00:18:42,700 --> 00:18:45,460 So, again the rest pattern can be used 321 00:18:45,460 --> 00:18:49,600 where we would write variable names, separated by commas 322 00:18:49,600 --> 00:18:52,830 and not values separated by commas. 323 00:18:52,830 --> 00:18:56,210 So it's a subtle distinction, but this is how you know 324 00:18:56,210 --> 00:18:59,393 when and where to use spread and rest.