WEBVTT 1 00:00:01.180 --> 00:00:05.360 Let's now talk about the amazing spread operator. 2 00:00:05.360 --> 00:00:07.540 So we can use the spread operator 3 00:00:07.540 --> 00:00:12.080 to basically expand an array into all its elements. 4 00:00:12.080 --> 00:00:15.943 So basically unpacking all the array elements at one. 5 00:00:17.720 --> 00:00:19.733 So let's say that we have an array, 6 00:00:22.010 --> 00:00:24.770 so seven, eight, nine. 7 00:00:24.770 --> 00:00:29.140 And now we want to create a new array based one this array 8 00:00:29.140 --> 00:00:31.770 but with some new elements at the beginning. 9 00:00:31.770 --> 00:00:33.900 So how would we do that? 10 00:00:33.900 --> 00:00:36.050 Well, with what we already know, 11 00:00:36.050 --> 00:00:38.870 we would need to loop over this array, 12 00:00:38.870 --> 00:00:41.523 or even worse, do it manually. 13 00:00:42.540 --> 00:00:44.920 For example, like this. 14 00:00:44.920 --> 00:00:48.593 Let's call it the Bad New Array. 15 00:00:49.560 --> 00:00:52.380 So if we wanted to add one and two 16 00:00:52.380 --> 00:00:54.000 to the beginning of this array, 17 00:00:54.000 --> 00:00:56.920 we would have to write one, two, 18 00:00:56.920 --> 00:00:59.473 and then each of these elements. 19 00:01:00.970 --> 00:01:03.653 So that would be arr. 0, 20 00:01:05.585 --> 00:01:06.543 arr. 1, 21 00:01:09.250 --> 00:01:10.543 and arr. 2. 22 00:01:15.670 --> 00:01:18.420 Okay, let's take a look. 23 00:01:18.420 --> 00:01:20.430 And now we need to get a new array 24 00:01:20.430 --> 00:01:22.630 with the three original elements 25 00:01:22.630 --> 00:01:26.320 and then a one, two at the beginning of that array. 26 00:01:26.320 --> 00:01:28.510 Okay, and this is actually quite 27 00:01:28.510 --> 00:01:31.110 a common operation that we need to do 28 00:01:31.110 --> 00:01:33.800 and so we can now, since ES6, 29 00:01:33.800 --> 00:01:35.600 do it in a much better way 30 00:01:35.600 --> 00:01:38.120 using the spread operator. 31 00:01:38.120 --> 00:01:39.620 So with the spread operator, 32 00:01:39.620 --> 00:01:41.393 it's gonna work like this. 33 00:01:42.530 --> 00:01:44.023 So let's create a new array. 34 00:01:45.050 --> 00:01:48.803 So this is the good, let's say New Array. 35 00:01:50.080 --> 00:01:53.640 And then, again, we use one, two, 36 00:01:53.640 --> 00:01:55.670 and then we use the spread operator, 37 00:01:55.670 --> 00:01:57.540 which is dot dot dot, 38 00:01:57.540 --> 00:01:59.710 to basically expand this array 39 00:01:59.710 --> 00:02:02.890 into all of its individual elements. 40 00:02:02.890 --> 00:02:04.150 So let's see the result, 41 00:02:04.150 --> 00:02:06.693 and then I will explain it a little bit better. 42 00:02:07.950 --> 00:02:11.490 So new array, and you see that we get 43 00:02:11.490 --> 00:02:14.180 the exact same result here. 44 00:02:14.180 --> 00:02:16.270 So what the spread operator does 45 00:02:16.270 --> 00:02:18.350 is to basically take all the values 46 00:02:18.350 --> 00:02:20.800 out of this arr. array, 47 00:02:20.800 --> 00:02:22.790 and then write them individually 48 00:02:22.790 --> 00:02:27.040 as if we wrote seven, eight, nine here manually. 49 00:02:27.040 --> 00:02:31.630 All right, so if we wrote it without these three dots, 50 00:02:31.630 --> 00:02:33.530 then we would have this array, 51 00:02:34.634 --> 00:02:37.801 so this arr. array inside of this one. 52 00:02:39.070 --> 00:02:40.490 So just like this. 53 00:02:40.490 --> 00:02:43.920 So one, two, and then an array of seven, eight, nine. 54 00:02:43.920 --> 00:02:46.030 And that's because here, we are including 55 00:02:46.030 --> 00:02:47.730 this entire array. 56 00:02:47.730 --> 00:02:50.330 But with the spread operator, again, 57 00:02:50.330 --> 00:02:53.680 it's like taking all the elements out of the array 58 00:02:53.680 --> 00:02:55.970 and writing them here manually. 59 00:02:55.970 --> 00:02:57.600 And so when we do this, 60 00:02:57.600 --> 00:02:59.140 we then get seven, eight, nine, 61 00:02:59.140 --> 00:03:03.330 individually here, represented in this new array. 62 00:03:03.330 --> 00:03:07.190 So what this means is that we can use the spread operator 63 00:03:07.190 --> 00:03:09.480 whenever we would otherwise write 64 00:03:09.480 --> 00:03:12.630 multiple values separated by commas. 65 00:03:12.630 --> 00:03:14.400 And that situation happens 66 00:03:14.400 --> 00:03:16.810 whenever we write an array literal 67 00:03:16.810 --> 00:03:18.833 like we did up here. 68 00:03:20.190 --> 00:03:22.350 So that's the first situation in which 69 00:03:22.350 --> 00:03:25.770 it's very useful to expand an array. 70 00:03:25.770 --> 00:03:27.590 And the second situation is 71 00:03:27.590 --> 00:03:31.000 when we pass arguments into functions. 72 00:03:31.000 --> 00:03:33.920 So, for example, let's say 73 00:03:33.920 --> 00:03:37.600 that we wanted to actually log the individual elements 74 00:03:37.600 --> 00:03:39.403 of this new array here. 75 00:03:40.630 --> 00:03:42.630 So if we simply logged the array, 76 00:03:42.630 --> 00:03:44.860 then it's, of course, gonna look like this. 77 00:03:44.860 --> 00:03:47.910 It's just one value with just the array, 78 00:03:47.910 --> 00:03:50.330 it's just one big value. 79 00:03:50.330 --> 00:03:53.580 But if we use the spread operator 80 00:03:53.580 --> 00:03:55.683 to expand the new array, 81 00:03:56.750 --> 00:03:59.070 then see what happens then. 82 00:03:59.070 --> 00:04:03.070 So now it logged the individual elements of the array. 83 00:04:03.070 --> 00:04:05.560 So this would be the same as writing 84 00:04:05.560 --> 00:04:10.560 one, two, seven, eight, nine individually. 85 00:04:10.600 --> 00:04:13.140 So once again, whenever we need the elements 86 00:04:13.140 --> 00:04:14.940 of an array individually, 87 00:04:14.940 --> 00:04:16.900 then we can use the spread operator. 88 00:04:16.900 --> 00:04:19.840 And that is useful when we write an array 89 00:04:19.840 --> 00:04:22.360 and when we need to pass multiple elements 90 00:04:22.360 --> 00:04:25.540 into a function like we did here. 91 00:04:25.540 --> 00:04:30.030 All right, so let's see a bit more useful example. 92 00:04:30.030 --> 00:04:33.060 So in this example, we will create an array 93 00:04:33.060 --> 00:04:37.440 with one more food item in the main menu array. 94 00:04:37.440 --> 00:04:42.440 So that main menu is here at restaurant dot main menu, 95 00:04:43.640 --> 00:04:46.723 and so basically we want to create a new menu here. 96 00:04:47.750 --> 00:04:52.750 So const, new menu, and then let's say 97 00:04:54.230 --> 00:04:56.150 that we want the original array 98 00:04:56.150 --> 00:04:58.830 plus one new element. 99 00:04:58.830 --> 00:05:02.343 So we can do that by simply expanding the array, 100 00:05:03.710 --> 00:05:07.360 so that's restaurant dot main menu, 101 00:05:07.360 --> 00:05:09.590 and then we can add other stuff. 102 00:05:09.590 --> 00:05:12.216 So let's say gnocci, 103 00:05:12.216 --> 00:05:15.530 at least that's how I think it's spelled 104 00:05:15.530 --> 00:05:17.833 or pronounced in Italian. 105 00:05:18.780 --> 00:05:22.803 And so let's have a look at our new menu, 106 00:05:23.970 --> 00:05:27.010 and indeed, it has the three original elements, 107 00:05:27.010 --> 00:05:29.450 plus the gnocci. 108 00:05:29.450 --> 00:05:32.440 And keep in mind that here, we are indeed 109 00:05:32.440 --> 00:05:35.600 creating a completely new array, all right? 110 00:05:35.600 --> 00:05:37.470 We are, of course, not manipulating 111 00:05:37.470 --> 00:05:41.060 the restaurant dot main menu array. 112 00:05:41.060 --> 00:05:43.540 So we are building a new array from scratch, 113 00:05:43.540 --> 00:05:46.780 and you can see that here by the square brackets. 114 00:05:46.780 --> 00:05:50.110 So this brackets syntax here is simply the way 115 00:05:50.110 --> 00:05:53.470 in which we have always been writing new arrays. 116 00:05:53.470 --> 00:05:56.150 And so here, again, we are writing a new array 117 00:05:56.150 --> 00:05:59.820 but simply based on expanding this array, 118 00:05:59.820 --> 00:06:02.083 and then adding another element to it. 119 00:06:04.150 --> 00:06:05.640 Okay. 120 00:06:05.640 --> 00:06:09.110 Now you might have noticed that the spread operator 121 00:06:09.110 --> 00:06:12.140 is actually a bit similar to destructuring, 122 00:06:12.140 --> 00:06:16.262 because it also helps us get elements out of arrays. 123 00:06:16.262 --> 00:06:20.140 Now, the big difference is that the spread operator 124 00:06:20.140 --> 00:06:22.610 takes all the elements from the array 125 00:06:22.610 --> 00:06:25.590 and it also doesn't create new variables. 126 00:06:25.590 --> 00:06:28.230 And as a consequence, we can only use it 127 00:06:28.230 --> 00:06:30.810 in places where we would otherwise 128 00:06:30.810 --> 00:06:33.093 write values separated by commas. 129 00:06:33.930 --> 00:06:35.740 And, in case you're taking notes, 130 00:06:35.740 --> 00:06:39.240 probably what I just said would be very helpful 131 00:06:39.240 --> 00:06:40.843 to have as a note. 132 00:06:42.230 --> 00:06:45.640 Next, let's learn about two important use cases 133 00:06:45.640 --> 00:06:47.400 of the spread operator, 134 00:06:47.400 --> 00:06:50.550 which is to create shallow copies of arrays, 135 00:06:50.550 --> 00:06:52.723 and to merge two arrays together. 136 00:06:55.640 --> 00:06:57.390 So let's say copy array, 137 00:06:57.390 --> 00:07:01.270 and so let's simply create a copy of the main menu. 138 00:07:01.270 --> 00:07:06.270 So main menu copy, and so let's write a new array, 139 00:07:07.520 --> 00:07:10.490 and into that new array, we will put all the elements 140 00:07:10.490 --> 00:07:13.003 that are currently in the main menu. 141 00:07:14.760 --> 00:07:19.760 So at restaurant dot main menu, and that's it. 142 00:07:19.890 --> 00:07:24.180 So here we just created a shallow copy of this array. 143 00:07:24.180 --> 00:07:27.400 So that's a little bit similar to object dot assign 144 00:07:27.400 --> 00:07:30.350 that we used in the previous section, okay? 145 00:07:30.350 --> 00:07:34.750 But here, this syntax is actually a lot easier to use. 146 00:07:34.750 --> 00:07:36.803 Now to join two arrays together, 147 00:07:38.040 --> 00:07:41.560 so join two arrays or more, of course, 148 00:07:41.560 --> 00:07:43.910 we can use the same technique. 149 00:07:43.910 --> 00:07:46.110 And so maybe, at this point, you can already guess 150 00:07:46.110 --> 00:07:47.771 how that would work, and so 151 00:07:47.771 --> 00:07:50.480 you can do this, actually, as a challenge. 152 00:07:50.480 --> 00:07:52.090 So pause the video right now, 153 00:07:52.090 --> 00:07:57.090 and create this variable menu which will be an array 154 00:07:57.920 --> 00:07:59.670 which contains the whole menu. 155 00:07:59.670 --> 00:08:02.850 So both the main menu and the starter menu. 156 00:08:02.850 --> 00:08:05.100 So take a minute and try it on your own here. 157 00:08:06.980 --> 00:08:10.260 All right, so hopefully, you managed to do that. 158 00:08:10.260 --> 00:08:11.950 And so the secret here, again, 159 00:08:11.950 --> 00:08:13.993 is to use the spread operator. 160 00:08:15.530 --> 00:08:20.530 So restaurant, and let's start with the starter menu. 161 00:08:20.610 --> 00:08:23.680 So that's gonna be our first couple of elements 162 00:08:23.680 --> 00:08:26.700 in this new array, and then, of course, 163 00:08:26.700 --> 00:08:29.290 we can use the spread operator again, 164 00:08:29.290 --> 00:08:32.403 and then this time expand the main menu. 165 00:08:34.550 --> 00:08:36.373 Dot main menu. 166 00:08:38.430 --> 00:08:40.460 And so now we end up with an array 167 00:08:40.460 --> 00:08:43.320 containing all the food items that are both 168 00:08:43.320 --> 00:08:45.770 in the starter and the main menu. 169 00:08:45.770 --> 00:08:48.800 And again, because here, with this spread operator, 170 00:08:48.800 --> 00:08:51.406 we took all the elements out of the starter menu 171 00:08:51.406 --> 00:08:54.866 and basically wrote them here into this new array, 172 00:08:54.866 --> 00:08:58.053 and then the same with the main menu. 173 00:08:59.010 --> 00:09:02.200 All right, so I told you that the spread operator 174 00:09:02.200 --> 00:09:05.960 works on arrays, but that's not entirely true, 175 00:09:05.960 --> 00:09:08.280 because actually, the spread operator 176 00:09:08.280 --> 00:09:11.610 works on all so-called iterables. 177 00:09:11.610 --> 00:09:13.800 Now what is an iterable? 178 00:09:13.800 --> 00:09:17.320 Well, there are different iterables in JavaScript. 179 00:09:17.320 --> 00:09:19.200 And we will talk about all of them 180 00:09:19.200 --> 00:09:20.830 by the end of the course, 181 00:09:20.830 --> 00:09:23.160 but for now, just know that iterables 182 00:09:23.160 --> 00:09:28.160 are things like all arrays, strings, maps, or sets, 183 00:09:28.680 --> 00:09:30.600 but not objects. 184 00:09:30.600 --> 00:09:33.280 So basically, most of the built-in data structures 185 00:09:33.280 --> 00:09:38.280 in JavaScript are now iterables, but except objects. 186 00:09:38.340 --> 00:09:40.490 So let me actually write that here for you. 187 00:09:41.330 --> 00:09:46.330 Iterables are arrays, strings, maps, and sets, 188 00:09:50.310 --> 00:09:53.300 but not objects. 189 00:09:53.300 --> 00:09:57.160 Now anyway, since strings are also iterables, 190 00:09:57.160 --> 00:09:59.620 that means that we can use the spread operator 191 00:09:59.620 --> 00:10:00.993 on a string, as well. 192 00:10:02.450 --> 00:10:04.313 So let me quickly show that to you. 193 00:10:05.470 --> 00:10:10.003 So let's just create a quick string here, Jonas, 194 00:10:10.950 --> 00:10:13.180 and then I want to create an array 195 00:10:13.180 --> 00:10:16.000 which contains all the individual letters, 196 00:10:16.000 --> 00:10:18.030 plus some other elements. 197 00:10:18.030 --> 00:10:21.693 So, let's call this one letters, 198 00:10:23.200 --> 00:10:25.490 and then we create a new array 199 00:10:25.490 --> 00:10:28.223 and expand the string here as well. 200 00:10:29.760 --> 00:10:32.100 Then here I want an empty string, 201 00:10:32.100 --> 00:10:34.223 then here I want an S, 202 00:10:36.220 --> 00:10:39.360 and then let's log it through console, 203 00:10:39.360 --> 00:10:42.383 and tnow it will make a little bit more sense. 204 00:10:43.710 --> 00:10:47.610 All right, and so indeed, here we get this array, 205 00:10:47.610 --> 00:10:50.160 where each letter of the original string 206 00:10:50.160 --> 00:10:52.800 is now an individual element. 207 00:10:52.800 --> 00:10:56.790 So just like we expanded, so we unpacked an array, 208 00:10:56.790 --> 00:10:59.570 we now did the same thing with a string. 209 00:10:59.570 --> 00:11:01.090 Now just keep in mind 210 00:11:01.090 --> 00:11:03.840 that we can still only use the spread operator 211 00:11:03.840 --> 00:11:05.470 when building an array, 212 00:11:05.470 --> 00:11:09.300 or when we pass values into a function. 213 00:11:09.300 --> 00:11:12.853 So for example, we can also do this. 214 00:11:15.070 --> 00:11:17.520 So expand the string here, 215 00:11:17.520 --> 00:11:20.673 and so then it is the same thing as writing this. 216 00:11:23.070 --> 00:11:27.563 So J, O, and so on and so forth, right? 217 00:11:28.800 --> 00:11:32.653 So, indeed, here now we get all the individual elements. 218 00:11:33.570 --> 00:11:36.530 All right, so for example, what we can't do 219 00:11:36.530 --> 00:11:40.643 is to use this to build a string using a template literal. 220 00:11:44.470 --> 00:11:48.053 So here, this is not gonna work. 221 00:11:49.060 --> 00:11:51.440 And that's because this is not a place 222 00:11:51.440 --> 00:11:55.143 that expects multiple values separated by a comma. 223 00:11:56.650 --> 00:12:00.890 So you see unexpected token, all right? 224 00:12:00.890 --> 00:12:04.640 So again, multiple values separated by a comma 225 00:12:04.640 --> 00:12:06.670 are usually only expected 226 00:12:06.670 --> 00:12:09.160 when we pass arguments into a function, 227 00:12:09.160 --> 00:12:11.510 or when we build a new array. 228 00:12:11.510 --> 00:12:12.950 So take note of that, 229 00:12:12.950 --> 00:12:15.360 because that is important to understand 230 00:12:15.360 --> 00:12:17.600 about the spread operator. 231 00:12:17.600 --> 00:12:21.370 Okay, but now enough with building arrays. 232 00:12:21.370 --> 00:12:23.740 Let's now actually write our own function 233 00:12:23.740 --> 00:12:25.970 that accepts multiple arguments 234 00:12:25.970 --> 00:12:27.730 and then use the spread operator 235 00:12:27.730 --> 00:12:30.230 to actually pass those arguments. 236 00:12:30.230 --> 00:12:34.630 And so that's gonna be a very real-life example right there. 237 00:12:34.630 --> 00:12:37.752 So let's add here another method now, 238 00:12:37.752 --> 00:12:40.410 and so, let's say that we want a method 239 00:12:40.410 --> 00:12:43.090 to order just pasta, okay? 240 00:12:43.090 --> 00:12:45.300 And the pasta always needs to have 241 00:12:45.300 --> 00:12:47.363 exactly three ingredients. 242 00:12:48.300 --> 00:12:53.300 So let's say order pasta, and it's gonna be a function, 243 00:12:54.770 --> 00:12:57.453 and so now here, we need three ingredients. 244 00:12:58.510 --> 00:13:03.033 So let's just call them ing. 1, ing. 2, and ing. 3. 245 00:13:04.770 --> 00:13:09.310 And then just log them to the console, some string, 246 00:13:09.310 --> 00:13:13.720 here is your delicious pasta 247 00:13:15.128 --> 00:13:17.423 with ing. 1, 248 00:13:19.630 --> 00:13:21.290 ing. 2, 249 00:13:21.290 --> 00:13:25.450 and ing. 3. 250 00:13:25.450 --> 00:13:27.850 So up here, we have an error, 251 00:13:27.850 --> 00:13:30.143 so this should be number three. 252 00:13:32.390 --> 00:13:34.890 And then, let's now call this function. 253 00:13:34.890 --> 00:13:37.210 So order pasta. 254 00:13:37.210 --> 00:13:38.540 Now what I want to do here 255 00:13:38.540 --> 00:13:40.680 is to actually get these ingredients 256 00:13:40.680 --> 00:13:42.430 from a prompt window. 257 00:13:42.430 --> 00:13:45.380 So remember the prompt function that we can use, 258 00:13:45.380 --> 00:13:48.653 and so let's create an array called ingredients. 259 00:13:52.580 --> 00:13:55.060 And each element here will be defined 260 00:13:55.060 --> 00:13:56.363 by a prompt window. 261 00:13:58.010 --> 00:13:59.497 So this here now has nothing to do with 262 00:13:59.497 --> 00:14:00.990 the spread operator, 263 00:14:00.990 --> 00:14:03.200 it's just a way so that we can actually 264 00:14:03.200 --> 00:14:06.210 input the data ourselves. 265 00:14:06.210 --> 00:14:07.163 So let's say, 266 00:14:09.906 --> 00:14:12.033 and here we need to escape this, 267 00:14:12.870 --> 00:14:16.793 So let's make pasta. 268 00:14:18.150 --> 00:14:21.010 Ingredient one. 269 00:14:21.010 --> 00:14:24.700 And I think, I didn't show you this escaping here before. 270 00:14:24.700 --> 00:14:29.170 So here, when we simply write this single quote here, 271 00:14:29.170 --> 00:14:30.620 to write let's, 272 00:14:30.620 --> 00:14:34.800 JavaScript thinks that we are finishing this string here. 273 00:14:34.800 --> 00:14:38.040 Okay, and so we could use the double quotes out here 274 00:14:38.040 --> 00:14:42.680 or we can escape using the backslash, okay? 275 00:14:42.680 --> 00:14:44.970 Now when we save this, I think that Prettier 276 00:14:44.970 --> 00:14:47.400 will actually get rid of this here, 277 00:14:47.400 --> 00:14:51.240 but it's still important to know that escaping exists. 278 00:14:51.240 --> 00:14:54.730 So basically, this masks this single quote here, 279 00:14:54.730 --> 00:14:57.850 so that it does not finish the string at this point. 280 00:14:57.850 --> 00:14:58.733 So let's save it. 281 00:14:59.740 --> 00:15:02.770 And so you see that now, the Prettier extension 282 00:15:02.770 --> 00:15:06.530 actually replaced the single quote with the double quote. 283 00:15:06.530 --> 00:15:09.400 And so here we see our prompt already, 284 00:15:09.400 --> 00:15:11.053 but let's create two more. 285 00:15:15.360 --> 00:15:18.123 So let's say ingredient two now, 286 00:15:20.750 --> 00:15:22.360 and then another one. 287 00:15:22.360 --> 00:15:24.800 So again, here we are, simply building an array 288 00:15:24.800 --> 00:15:26.273 of the three ingredients. 289 00:15:29.280 --> 00:15:32.263 Okay, and then we can log it to the console, 290 00:15:33.180 --> 00:15:35.660 just to see A, 291 00:15:35.660 --> 00:15:36.913 B, and C. 292 00:15:38.390 --> 00:15:41.110 And so, indeed, we now get these array ingredients 293 00:15:41.110 --> 00:15:44.610 with A, B, and C, which are the three strings 294 00:15:44.610 --> 00:15:46.003 that we just wrote there. 295 00:15:47.220 --> 00:15:49.610 And now, how should we actually call 296 00:15:49.610 --> 00:15:51.373 the order pasta function? 297 00:15:53.060 --> 00:15:57.730 So restaurant dot order pasta. 298 00:15:57.730 --> 00:16:00.461 And in the old way, we would now write 299 00:16:00.461 --> 00:16:05.461 ingredients zero, ingredients one, and ingredients two. 300 00:16:11.170 --> 00:16:13.790 But, since we learned about the spread operator 301 00:16:13.790 --> 00:16:17.290 in this lecture, we can now do a lot better. 302 00:16:17.290 --> 00:16:20.630 And so, instead, we do this. 303 00:16:20.630 --> 00:16:23.543 Restaurant dot order pasta. 304 00:16:25.090 --> 00:16:28.170 And now, all we need to do is to expand 305 00:16:28.170 --> 00:16:30.890 the elements of the ingredient array, 306 00:16:30.890 --> 00:16:33.170 and that will then basically 307 00:16:33.170 --> 00:16:35.810 write the three elements of the array 308 00:16:35.810 --> 00:16:37.383 here separated by commas. 309 00:16:38.990 --> 00:16:42.910 So this and this should yield the exact same result, 310 00:16:42.910 --> 00:16:46.223 and so let's now test it out with some real data. 311 00:16:47.720 --> 00:16:52.720 So let's see, mushrooms, asparagus, and cheese. 312 00:16:54.600 --> 00:16:57.040 And so, in these, we get now twice, 313 00:16:57.040 --> 00:16:58.460 here is your delicious pasta 314 00:16:58.460 --> 00:17:02.160 with mushrooms, asparagus, and cheese. 315 00:17:02.160 --> 00:17:04.420 And what do you think is the better solution? 316 00:17:04.420 --> 00:17:07.030 This one, or this one? 317 00:17:07.030 --> 00:17:09.430 And especially considering that an array 318 00:17:09.430 --> 00:17:11.540 could, of course, be a lot longer 319 00:17:11.540 --> 00:17:13.420 than just three elements. 320 00:17:13.420 --> 00:17:15.268 So indeed, always go with this 321 00:17:15.268 --> 00:17:18.680 more modern ES6 syntax here. 322 00:17:18.680 --> 00:17:21.610 It's an amazing addition to the language. 323 00:17:21.610 --> 00:17:24.310 And now, just to finish this lecture here, 324 00:17:24.310 --> 00:17:27.490 since ES 2018, the spread operator 325 00:17:27.490 --> 00:17:30.360 actually also works on objects, 326 00:17:30.360 --> 00:17:32.937 even though objects are not iterables. 327 00:17:34.800 --> 00:17:36.573 So let's write that here. 328 00:17:37.740 --> 00:17:41.910 And here let's just write real-world example. 329 00:17:47.110 --> 00:17:49.253 And so let's now experiment with this. 330 00:17:50.100 --> 00:17:52.200 The first example here was to create 331 00:17:52.200 --> 00:17:56.860 a new array based on one initial array, right? 332 00:17:56.860 --> 00:18:00.220 And so let's now also create a new restaurant object 333 00:18:00.220 --> 00:18:02.540 with all the data from the original one 334 00:18:02.540 --> 00:18:04.493 plus some additional data. 335 00:18:05.610 --> 00:18:09.000 And so this is actually an amazing way of doing this, 336 00:18:09.000 --> 00:18:12.660 because it's so much easier than with old JavaScript. 337 00:18:12.660 --> 00:18:15.423 So let's call this one new restaurant. 338 00:18:18.460 --> 00:18:22.560 And then we can simply spread the old restaurant 339 00:18:22.560 --> 00:18:25.080 and this will then basically copy all the properties 340 00:18:25.080 --> 00:18:28.000 of the restaurant into this new object. 341 00:18:28.000 --> 00:18:30.690 And then we can add anything that we want. 342 00:18:30.690 --> 00:18:34.470 Founder, for example, let's say Giuseppe, 343 00:18:34.470 --> 00:18:38.620 Or Giuseppe, I don't really know how to say it. 344 00:18:38.620 --> 00:18:42.410 And, of course, here, the order does not matter as always. 345 00:18:42.410 --> 00:18:46.400 So this spread here doesn't even have to be the first one. 346 00:18:46.400 --> 00:18:50.320 So let's say we also want the founding year, 347 00:18:50.320 --> 00:18:51.963 let's say 1998, 348 00:18:53.143 --> 00:18:54.390 okay? 349 00:18:54.390 --> 00:18:56.963 And so with this, we created a brand new object. 350 00:18:57.840 --> 00:19:01.390 Now we need to get rid of these three prompts there, 351 00:19:01.390 --> 00:19:04.543 because otherwise, it's gonna drive us crazy. 352 00:19:06.320 --> 00:19:07.770 But let's just take this out, 353 00:19:11.130 --> 00:19:14.603 and simply log here the new restaurant to the console. 354 00:19:16.320 --> 00:19:20.890 And so indeed, we get our original object basically, 355 00:19:20.890 --> 00:19:23.773 plus the founder, and plus founded in. 356 00:19:24.640 --> 00:19:25.810 Great. 357 00:19:25.810 --> 00:19:27.960 And finally, since we were able to do 358 00:19:27.960 --> 00:19:32.290 shallow copies of arrays, using the spread operator, 359 00:19:32.290 --> 00:19:34.740 we can do the same with objects. 360 00:19:34.740 --> 00:19:37.150 So instead of using object dot assign, 361 00:19:37.150 --> 00:19:39.423 as we did it in the previous lecture. 362 00:19:40.260 --> 00:19:41.403 So let's do that. 363 00:19:42.450 --> 00:19:45.173 Restaurant copy. 364 00:19:46.140 --> 00:19:50.220 And so all we need to do is an empty object 365 00:19:50.220 --> 00:19:52.680 and then in there expand all the elements 366 00:19:52.680 --> 00:19:57.300 of the original object, so the restaurant, in this case. 367 00:19:57.300 --> 00:20:00.553 And so now, if we attempt to change something on the copy, 368 00:20:02.130 --> 00:20:05.990 copy dot name, 369 00:20:05.990 --> 00:20:09.833 let's call it now Ristorante Roma, 370 00:20:12.950 --> 00:20:13.850 and if you're Italian, 371 00:20:13.850 --> 00:20:16.143 you're not gonna like how that sounds. 372 00:20:17.140 --> 00:20:22.040 But anyway, now, as we take a look at both of them, 373 00:20:22.040 --> 00:20:26.363 so the name of the copy and the original, 374 00:20:27.480 --> 00:20:29.653 now you will see that they are different. 375 00:20:31.800 --> 00:20:35.650 So the copy has the name of Ristorante Roma, 376 00:20:35.650 --> 00:20:38.420 and the old one has Classico Italiano, 377 00:20:38.420 --> 00:20:39.760 which means that, indeed, 378 00:20:39.760 --> 00:20:43.150 we did make a copy of the original restaurant. 379 00:20:43.150 --> 00:20:45.230 Because otherwise, as we learned 380 00:20:45.230 --> 00:20:47.110 by the end of the previous section, 381 00:20:47.110 --> 00:20:50.890 changing one object would then also change the other one. 382 00:20:50.890 --> 00:20:53.290 Right? Cool. 383 00:20:53.290 --> 00:20:55.840 So another long lecture here, 384 00:20:55.840 --> 00:20:59.030 but we're making really great progress. 385 00:20:59.030 --> 00:21:00.850 And of course, we will use all of this 386 00:21:00.850 --> 00:21:03.760 in real projects later down the road. 387 00:21:03.760 --> 00:21:06.510 But again, I chose to teach you these concepts 388 00:21:06.510 --> 00:21:09.900 in a separate way and not inside a big project, 389 00:21:09.900 --> 00:21:11.540 because this allows me to show you 390 00:21:11.540 --> 00:21:13.750 a lot more different examples 391 00:21:13.750 --> 00:21:16.780 and it also makes the material more reference-able 392 00:21:16.780 --> 00:21:18.350 for you in the future. 393 00:21:18.350 --> 00:21:19.900 And so that's gonna be helpful 394 00:21:19.900 --> 00:21:22.490 when you're trying to find what you're looking for 395 00:21:22.490 --> 00:21:24.023 after taking this course.