WEBVTT 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.