Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,180 --> 00:00:05,360 Let's now talk about the amazing spread operator. 2 2 00:00:05,360 --> 00:00:07,540 So we can use the spread operator 3 3 00:00:07,540 --> 00:00:12,080 to basically expand an array into all its elements. 4 4 00:00:12,080 --> 00:00:15,943 So basically unpacking all the array elements at one. 5 5 00:00:17,720 --> 00:00:19,733 So let's say that we have an array, 6 6 00:00:22,010 --> 00:00:24,770 so seven, eight, nine. 7 7 00:00:24,770 --> 00:00:29,140 And now we want to create a new array based one this array 8 8 00:00:29,140 --> 00:00:31,770 but with some new elements at the beginning. 9 9 00:00:31,770 --> 00:00:33,900 So how would we do that? 10 10 00:00:33,900 --> 00:00:36,050 Well, with what we already know, 11 11 00:00:36,050 --> 00:00:38,870 we would need to loop over this array, 12 12 00:00:38,870 --> 00:00:41,523 or even worse, do it manually. 13 13 00:00:42,540 --> 00:00:44,920 For example, like this. 14 14 00:00:44,920 --> 00:00:48,593 Let's call it the Bad New Array. 15 15 00:00:49,560 --> 00:00:52,380 So if we wanted to add one and two 16 16 00:00:52,380 --> 00:00:54,000 to the beginning of this array, 17 17 00:00:54,000 --> 00:00:56,920 we would have to write one, two, 18 18 00:00:56,920 --> 00:00:59,473 and then each of these elements. 19 19 00:01:00,970 --> 00:01:03,653 So that would be arr. 0, 20 20 00:01:05,585 --> 00:01:06,543 arr. 1, 21 21 00:01:09,250 --> 00:01:10,543 and arr. 2. 22 22 00:01:15,670 --> 00:01:18,420 Okay, let's take a look. 23 23 00:01:18,420 --> 00:01:20,430 And now we need to get a new array 24 24 00:01:20,430 --> 00:01:22,630 with the three original elements 25 25 00:01:22,630 --> 00:01:26,320 and then a one, two at the beginning of that array. 26 26 00:01:26,320 --> 00:01:28,510 Okay, and this is actually quite 27 27 00:01:28,510 --> 00:01:31,110 a common operation that we need to do 28 28 00:01:31,110 --> 00:01:33,800 and so we can now, since ES6, 29 29 00:01:33,800 --> 00:01:35,600 do it in a much better way 30 30 00:01:35,600 --> 00:01:38,120 using the spread operator. 31 31 00:01:38,120 --> 00:01:39,620 So with the spread operator, 32 32 00:01:39,620 --> 00:01:41,393 it's gonna work like this. 33 33 00:01:42,530 --> 00:01:44,023 So let's create a new array. 34 34 00:01:45,050 --> 00:01:48,803 So this is the good, let's say New Array. 35 35 00:01:50,080 --> 00:01:53,640 And then, again, we use one, two, 36 36 00:01:53,640 --> 00:01:55,670 and then we use the spread operator, 37 37 00:01:55,670 --> 00:01:57,540 which is dot dot dot, 38 38 00:01:57,540 --> 00:01:59,710 to basically expand this array 39 39 00:01:59,710 --> 00:02:02,890 into all of its individual elements. 40 40 00:02:02,890 --> 00:02:04,150 So let's see the result, 41 41 00:02:04,150 --> 00:02:06,693 and then I will explain it a little bit better. 42 42 00:02:07,950 --> 00:02:11,490 So new array, and you see that we get 43 43 00:02:11,490 --> 00:02:14,180 the exact same result here. 44 44 00:02:14,180 --> 00:02:16,270 So what the spread operator does 45 45 00:02:16,270 --> 00:02:18,350 is to basically take all the values 46 46 00:02:18,350 --> 00:02:20,800 out of this arr. array, 47 47 00:02:20,800 --> 00:02:22,790 and then write them individually 48 48 00:02:22,790 --> 00:02:27,040 as if we wrote seven, eight, nine here manually. 49 49 00:02:27,040 --> 00:02:31,630 All right, so if we wrote it without these three dots, 50 50 00:02:31,630 --> 00:02:33,530 then we would have this array, 51 51 00:02:34,634 --> 00:02:37,801 so this arr. array inside of this one. 52 52 00:02:39,070 --> 00:02:40,490 So just like this. 53 53 00:02:40,490 --> 00:02:43,920 So one, two, and then an array of seven, eight, nine. 54 54 00:02:43,920 --> 00:02:46,030 And that's because here, we are including 55 55 00:02:46,030 --> 00:02:47,730 this entire array. 56 56 00:02:47,730 --> 00:02:50,330 But with the spread operator, again, 57 57 00:02:50,330 --> 00:02:53,680 it's like taking all the elements out of the array 58 58 00:02:53,680 --> 00:02:55,970 and writing them here manually. 59 59 00:02:55,970 --> 00:02:57,600 And so when we do this, 60 60 00:02:57,600 --> 00:02:59,140 we then get seven, eight, nine, 61 61 00:02:59,140 --> 00:03:03,330 individually here, represented in this new array. 62 62 00:03:03,330 --> 00:03:07,190 So what this means is that we can use the spread operator 63 63 00:03:07,190 --> 00:03:09,480 whenever we would otherwise write 64 64 00:03:09,480 --> 00:03:12,630 multiple values separated by commas. 65 65 00:03:12,630 --> 00:03:14,400 And that situation happens 66 66 00:03:14,400 --> 00:03:16,810 whenever we write an array literal 67 67 00:03:16,810 --> 00:03:18,833 like we did up here. 68 68 00:03:20,190 --> 00:03:22,350 So that's the first situation in which 69 69 00:03:22,350 --> 00:03:25,770 it's very useful to expand an array. 70 70 00:03:25,770 --> 00:03:27,590 And the second situation is 71 71 00:03:27,590 --> 00:03:31,000 when we pass arguments into functions. 72 72 00:03:31,000 --> 00:03:33,920 So, for example, let's say 73 73 00:03:33,920 --> 00:03:37,600 that we wanted to actually log the individual elements 74 74 00:03:37,600 --> 00:03:39,403 of this new array here. 75 75 00:03:40,630 --> 00:03:42,630 So if we simply logged the array, 76 76 00:03:42,630 --> 00:03:44,860 then it's, of course, gonna look like this. 77 77 00:03:44,860 --> 00:03:47,910 It's just one value with just the array, 78 78 00:03:47,910 --> 00:03:50,330 it's just one big value. 79 79 00:03:50,330 --> 00:03:53,580 But if we use the spread operator 80 80 00:03:53,580 --> 00:03:55,683 to expand the new array, 81 81 00:03:56,750 --> 00:03:59,070 then see what happens then. 82 82 00:03:59,070 --> 00:04:03,070 So now it logged the individual elements of the array. 83 83 00:04:03,070 --> 00:04:05,560 So this would be the same as writing 84 84 00:04:05,560 --> 00:04:10,560 one, two, seven, eight, nine individually. 85 85 00:04:10,600 --> 00:04:13,140 So once again, whenever we need the elements 86 86 00:04:13,140 --> 00:04:14,940 of an array individually, 87 87 00:04:14,940 --> 00:04:16,900 then we can use the spread operator. 88 88 00:04:16,900 --> 00:04:19,840 And that is useful when we write an array 89 89 00:04:19,840 --> 00:04:22,360 and when we need to pass multiple elements 90 90 00:04:22,360 --> 00:04:25,540 into a function like we did here. 91 91 00:04:25,540 --> 00:04:30,030 All right, so let's see a bit more useful example. 92 92 00:04:30,030 --> 00:04:33,060 So in this example, we will create an array 93 93 00:04:33,060 --> 00:04:37,440 with one more food item in the main menu array. 94 94 00:04:37,440 --> 00:04:42,440 So that main menu is here at restaurant dot main menu, 95 95 00:04:43,640 --> 00:04:46,723 and so basically we want to create a new menu here. 96 96 00:04:47,750 --> 00:04:52,750 So const, new menu, and then let's say 97 97 00:04:54,230 --> 00:04:56,150 that we want the original array 98 98 00:04:56,150 --> 00:04:58,830 plus one new element. 99 99 00:04:58,830 --> 00:05:02,343 So we can do that by simply expanding the array, 100 100 00:05:03,710 --> 00:05:07,360 so that's restaurant dot main menu, 101 101 00:05:07,360 --> 00:05:09,590 and then we can add other stuff. 102 102 00:05:09,590 --> 00:05:12,216 So let's say gnocci, 103 103 00:05:12,216 --> 00:05:15,530 at least that's how I think it's spelled 104 104 00:05:15,530 --> 00:05:17,833 or pronounced in Italian. 105 105 00:05:18,780 --> 00:05:22,803 And so let's have a look at our new menu, 106 106 00:05:23,970 --> 00:05:27,010 and indeed, it has the three original elements, 107 107 00:05:27,010 --> 00:05:29,450 plus the gnocci. 108 108 00:05:29,450 --> 00:05:32,440 And keep in mind that here, we are indeed 109 109 00:05:32,440 --> 00:05:35,600 creating a completely new array, all right? 110 110 00:05:35,600 --> 00:05:37,470 We are, of course, not manipulating 111 111 00:05:37,470 --> 00:05:41,060 the restaurant dot main menu array. 112 112 00:05:41,060 --> 00:05:43,540 So we are building a new array from scratch, 113 113 00:05:43,540 --> 00:05:46,780 and you can see that here by the square brackets. 114 114 00:05:46,780 --> 00:05:50,110 So this brackets syntax here is simply the way 115 115 00:05:50,110 --> 00:05:53,470 in which we have always been writing new arrays. 116 116 00:05:53,470 --> 00:05:56,150 And so here, again, we are writing a new array 117 117 00:05:56,150 --> 00:05:59,820 but simply based on expanding this array, 118 118 00:05:59,820 --> 00:06:02,083 and then adding another element to it. 119 119 00:06:04,150 --> 00:06:05,640 Okay. 120 120 00:06:05,640 --> 00:06:09,110 Now you might have noticed that the spread operator 121 121 00:06:09,110 --> 00:06:12,140 is actually a bit similar to destructuring, 122 122 00:06:12,140 --> 00:06:16,262 because it also helps us get elements out of arrays. 123 123 00:06:16,262 --> 00:06:20,140 Now, the big difference is that the spread operator 124 124 00:06:20,140 --> 00:06:22,610 takes all the elements from the array 125 125 00:06:22,610 --> 00:06:25,590 and it also doesn't create new variables. 126 126 00:06:25,590 --> 00:06:28,230 And as a consequence, we can only use it 127 127 00:06:28,230 --> 00:06:30,810 in places where we would otherwise 128 128 00:06:30,810 --> 00:06:33,093 write values separated by commas. 129 129 00:06:33,930 --> 00:06:35,740 And, in case you're taking notes, 130 130 00:06:35,740 --> 00:06:39,240 probably what I just said would be very helpful 131 131 00:06:39,240 --> 00:06:40,843 to have as a note. 132 132 00:06:42,230 --> 00:06:45,640 Next, let's learn about two important use cases 133 133 00:06:45,640 --> 00:06:47,400 of the spread operator, 134 134 00:06:47,400 --> 00:06:50,550 which is to create shallow copies of arrays, 135 135 00:06:50,550 --> 00:06:52,723 and to merge two arrays together. 136 136 00:06:55,640 --> 00:06:57,390 So let's say copy array, 137 137 00:06:57,390 --> 00:07:01,270 and so let's simply create a copy of the main menu. 138 138 00:07:01,270 --> 00:07:06,270 So main menu copy, and so let's write a new array, 139 139 00:07:07,520 --> 00:07:10,490 and into that new array, we will put all the elements 140 140 00:07:10,490 --> 00:07:13,003 that are currently in the main menu. 141 141 00:07:14,760 --> 00:07:19,760 So at restaurant dot main menu, and that's it. 142 142 00:07:19,890 --> 00:07:24,180 So here we just created a shallow copy of this array. 143 143 00:07:24,180 --> 00:07:27,400 So that's a little bit similar to object dot assign 144 144 00:07:27,400 --> 00:07:30,350 that we used in the previous section, okay? 145 145 00:07:30,350 --> 00:07:34,750 But here, this syntax is actually a lot easier to use. 146 146 00:07:34,750 --> 00:07:36,803 Now to join two arrays together, 147 147 00:07:38,040 --> 00:07:41,560 so join two arrays or more, of course, 148 148 00:07:41,560 --> 00:07:43,910 we can use the same technique. 149 149 00:07:43,910 --> 00:07:46,110 And so maybe, at this point, you can already guess 150 150 00:07:46,110 --> 00:07:47,771 how that would work, and so 151 151 00:07:47,771 --> 00:07:50,480 you can do this, actually, as a challenge. 152 152 00:07:50,480 --> 00:07:52,090 So pause the video right now, 153 153 00:07:52,090 --> 00:07:57,090 and create this variable menu which will be an array 154 154 00:07:57,920 --> 00:07:59,670 which contains the whole menu. 155 155 00:07:59,670 --> 00:08:02,850 So both the main menu and the starter menu. 156 156 00:08:02,850 --> 00:08:05,100 So take a minute and try it on your own here. 157 157 00:08:06,980 --> 00:08:10,260 All right, so hopefully, you managed to do that. 158 158 00:08:10,260 --> 00:08:11,950 And so the secret here, again, 159 159 00:08:11,950 --> 00:08:13,993 is to use the spread operator. 160 160 00:08:15,530 --> 00:08:20,530 So restaurant, and let's start with the starter menu. 161 161 00:08:20,610 --> 00:08:23,680 So that's gonna be our first couple of elements 162 162 00:08:23,680 --> 00:08:26,700 in this new array, and then, of course, 163 163 00:08:26,700 --> 00:08:29,290 we can use the spread operator again, 164 164 00:08:29,290 --> 00:08:32,403 and then this time expand the main menu. 165 165 00:08:34,550 --> 00:08:36,373 Dot main menu. 166 166 00:08:38,430 --> 00:08:40,460 And so now we end up with an array 167 167 00:08:40,460 --> 00:08:43,320 containing all the food items that are both 168 168 00:08:43,320 --> 00:08:45,770 in the starter and the main menu. 169 169 00:08:45,770 --> 00:08:48,800 And again, because here, with this spread operator, 170 170 00:08:48,800 --> 00:08:51,406 we took all the elements out of the starter menu 171 171 00:08:51,406 --> 00:08:54,866 and basically wrote them here into this new array, 172 172 00:08:54,866 --> 00:08:58,053 and then the same with the main menu. 173 173 00:08:59,010 --> 00:09:02,200 All right, so I told you that the spread operator 174 174 00:09:02,200 --> 00:09:05,960 works on arrays, but that's not entirely true, 175 175 00:09:05,960 --> 00:09:08,280 because actually, the spread operator 176 176 00:09:08,280 --> 00:09:11,610 works on all so-called iterables. 177 177 00:09:11,610 --> 00:09:13,800 Now what is an iterable? 178 178 00:09:13,800 --> 00:09:17,320 Well, there are different iterables in JavaScript. 179 179 00:09:17,320 --> 00:09:19,200 And we will talk about all of them 180 180 00:09:19,200 --> 00:09:20,830 by the end of the course, 181 181 00:09:20,830 --> 00:09:23,160 but for now, just know that iterables 182 182 00:09:23,160 --> 00:09:28,160 are things like all arrays, strings, maps, or sets, 183 183 00:09:28,680 --> 00:09:30,600 but not objects. 184 184 00:09:30,600 --> 00:09:33,280 So basically, most of the built-in data structures 185 185 00:09:33,280 --> 00:09:38,280 in JavaScript are now iterables, but except objects. 186 186 00:09:38,340 --> 00:09:40,490 So let me actually write that here for you. 187 187 00:09:41,330 --> 00:09:46,330 Iterables are arrays, strings, maps, and sets, 188 188 00:09:50,310 --> 00:09:53,300 but not objects. 189 189 00:09:53,300 --> 00:09:57,160 Now anyway, since strings are also iterables, 190 190 00:09:57,160 --> 00:09:59,620 that means that we can use the spread operator 191 191 00:09:59,620 --> 00:10:00,993 on a string, as well. 192 192 00:10:02,450 --> 00:10:04,313 So let me quickly show that to you. 193 193 00:10:05,470 --> 00:10:10,003 So let's just create a quick string here, Jonas, 194 194 00:10:10,950 --> 00:10:13,180 and then I want to create an array 195 195 00:10:13,180 --> 00:10:16,000 which contains all the individual letters, 196 196 00:10:16,000 --> 00:10:18,030 plus some other elements. 197 197 00:10:18,030 --> 00:10:21,693 So, let's call this one letters, 198 198 00:10:23,200 --> 00:10:25,490 and then we create a new array 199 199 00:10:25,490 --> 00:10:28,223 and expand the string here as well. 200 200 00:10:29,760 --> 00:10:32,100 Then here I want an empty string, 201 201 00:10:32,100 --> 00:10:34,223 then here I want an S, 202 202 00:10:36,220 --> 00:10:39,360 and then let's log it through console, 203 203 00:10:39,360 --> 00:10:42,383 and tnow it will make a little bit more sense. 204 204 00:10:43,710 --> 00:10:47,610 All right, and so indeed, here we get this array, 205 205 00:10:47,610 --> 00:10:50,160 where each letter of the original string 206 206 00:10:50,160 --> 00:10:52,800 is now an individual element. 207 207 00:10:52,800 --> 00:10:56,790 So just like we expanded, so we unpacked an array, 208 208 00:10:56,790 --> 00:10:59,570 we now did the same thing with a string. 209 209 00:10:59,570 --> 00:11:01,090 Now just keep in mind 210 210 00:11:01,090 --> 00:11:03,840 that we can still only use the spread operator 211 211 00:11:03,840 --> 00:11:05,470 when building an array, 212 212 00:11:05,470 --> 00:11:09,300 or when we pass values into a function. 213 213 00:11:09,300 --> 00:11:12,853 So for example, we can also do this. 214 214 00:11:15,070 --> 00:11:17,520 So expand the string here, 215 215 00:11:17,520 --> 00:11:20,673 and so then it is the same thing as writing this. 216 216 00:11:23,070 --> 00:11:27,563 So J, O, and so on and so forth, right? 217 217 00:11:28,800 --> 00:11:32,653 So, indeed, here now we get all the individual elements. 218 218 00:11:33,570 --> 00:11:36,530 All right, so for example, what we can't do 219 219 00:11:36,530 --> 00:11:40,643 is to use this to build a string using a template literal. 220 220 00:11:44,470 --> 00:11:48,053 So here, this is not gonna work. 221 221 00:11:49,060 --> 00:11:51,440 And that's because this is not a place 222 222 00:11:51,440 --> 00:11:55,143 that expects multiple values separated by a comma. 223 223 00:11:56,650 --> 00:12:00,890 So you see unexpected token, all right? 224 224 00:12:00,890 --> 00:12:04,640 So again, multiple values separated by a comma 225 225 00:12:04,640 --> 00:12:06,670 are usually only expected 226 226 00:12:06,670 --> 00:12:09,160 when we pass arguments into a function, 227 227 00:12:09,160 --> 00:12:11,510 or when we build a new array. 228 228 00:12:11,510 --> 00:12:12,950 So take note of that, 229 229 00:12:12,950 --> 00:12:15,360 because that is important to understand 230 230 00:12:15,360 --> 00:12:17,600 about the spread operator. 231 231 00:12:17,600 --> 00:12:21,370 Okay, but now enough with building arrays. 232 232 00:12:21,370 --> 00:12:23,740 Let's now actually write our own function 233 233 00:12:23,740 --> 00:12:25,970 that accepts multiple arguments 234 234 00:12:25,970 --> 00:12:27,730 and then use the spread operator 235 235 00:12:27,730 --> 00:12:30,230 to actually pass those arguments. 236 236 00:12:30,230 --> 00:12:34,630 And so that's gonna be a very real-life example right there. 237 237 00:12:34,630 --> 00:12:37,752 So let's add here another method now, 238 238 00:12:37,752 --> 00:12:40,410 and so, let's say that we want a method 239 239 00:12:40,410 --> 00:12:43,090 to order just pasta, okay? 240 240 00:12:43,090 --> 00:12:45,300 And the pasta always needs to have 241 241 00:12:45,300 --> 00:12:47,363 exactly three ingredients. 242 242 00:12:48,300 --> 00:12:53,300 So let's say order pasta, and it's gonna be a function, 243 243 00:12:54,770 --> 00:12:57,453 and so now here, we need three ingredients. 244 244 00:12:58,510 --> 00:13:03,033 So let's just call them ing. 1, ing. 2, and ing. 3. 245 245 00:13:04,770 --> 00:13:09,310 And then just log them to the console, some string, 246 246 00:13:09,310 --> 00:13:13,720 here is your delicious pasta 247 247 00:13:15,128 --> 00:13:17,423 with ing. 1, 248 248 00:13:19,630 --> 00:13:21,290 ing. 2, 249 249 00:13:21,290 --> 00:13:25,450 and ing. 3. 250 250 00:13:25,450 --> 00:13:27,850 So up here, we have an error, 251 251 00:13:27,850 --> 00:13:30,143 so this should be number three. 252 252 00:13:32,390 --> 00:13:34,890 And then, let's now call this function. 253 253 00:13:34,890 --> 00:13:37,210 So order pasta. 254 254 00:13:37,210 --> 00:13:38,540 Now what I want to do here 255 255 00:13:38,540 --> 00:13:40,680 is to actually get these ingredients 256 256 00:13:40,680 --> 00:13:42,430 from a prompt window. 257 257 00:13:42,430 --> 00:13:45,380 So remember the prompt function that we can use, 258 258 00:13:45,380 --> 00:13:48,653 and so let's create an array called ingredients. 259 259 00:13:52,580 --> 00:13:55,060 And each element here will be defined 260 260 00:13:55,060 --> 00:13:56,363 by a prompt window. 261 261 00:13:58,010 --> 00:13:59,497 So this here now has nothing to do with 262 262 00:13:59,497 --> 00:14:00,990 the spread operator, 263 263 00:14:00,990 --> 00:14:03,200 it's just a way so that we can actually 264 264 00:14:03,200 --> 00:14:06,210 input the data ourselves. 265 265 00:14:06,210 --> 00:14:07,163 So let's say, 266 266 00:14:09,906 --> 00:14:12,033 and here we need to escape this, 267 267 00:14:12,870 --> 00:14:16,793 So let's make pasta. 268 268 00:14:18,150 --> 00:14:21,010 Ingredient one. 269 269 00:14:21,010 --> 00:14:24,700 And I think, I didn't show you this escaping here before. 270 270 00:14:24,700 --> 00:14:29,170 So here, when we simply write this single quote here, 271 271 00:14:29,170 --> 00:14:30,620 to write let's, 272 272 00:14:30,620 --> 00:14:34,800 JavaScript thinks that we are finishing this string here. 273 273 00:14:34,800 --> 00:14:38,040 Okay, and so we could use the double quotes out here 274 274 00:14:38,040 --> 00:14:42,680 or we can escape using the backslash, okay? 275 275 00:14:42,680 --> 00:14:44,970 Now when we save this, I think that Prettier 276 276 00:14:44,970 --> 00:14:47,400 will actually get rid of this here, 277 277 00:14:47,400 --> 00:14:51,240 but it's still important to know that escaping exists. 278 278 00:14:51,240 --> 00:14:54,730 So basically, this masks this single quote here, 279 279 00:14:54,730 --> 00:14:57,850 so that it does not finish the string at this point. 280 280 00:14:57,850 --> 00:14:58,733 So let's save it. 281 281 00:14:59,740 --> 00:15:02,770 And so you see that now, the Prettier extension 282 282 00:15:02,770 --> 00:15:06,530 actually replaced the single quote with the double quote. 283 283 00:15:06,530 --> 00:15:09,400 And so here we see our prompt already, 284 284 00:15:09,400 --> 00:15:11,053 but let's create two more. 285 285 00:15:15,360 --> 00:15:18,123 So let's say ingredient two now, 286 286 00:15:20,750 --> 00:15:22,360 and then another one. 287 287 00:15:22,360 --> 00:15:24,800 So again, here we are, simply building an array 288 288 00:15:24,800 --> 00:15:26,273 of the three ingredients. 289 289 00:15:29,280 --> 00:15:32,263 Okay, and then we can log it to the console, 290 290 00:15:33,180 --> 00:15:35,660 just to see A, 291 291 00:15:35,660 --> 00:15:36,913 B, and C. 292 292 00:15:38,390 --> 00:15:41,110 And so, indeed, we now get these array ingredients 293 293 00:15:41,110 --> 00:15:44,610 with A, B, and C, which are the three strings 294 294 00:15:44,610 --> 00:15:46,003 that we just wrote there. 295 295 00:15:47,220 --> 00:15:49,610 And now, how should we actually call 296 296 00:15:49,610 --> 00:15:51,373 the order pasta function? 297 297 00:15:53,060 --> 00:15:57,730 So restaurant dot order pasta. 298 298 00:15:57,730 --> 00:16:00,461 And in the old way, we would now write 299 299 00:16:00,461 --> 00:16:05,461 ingredients zero, ingredients one, and ingredients two. 300 300 00:16:11,170 --> 00:16:13,790 But, since we learned about the spread operator 301 301 00:16:13,790 --> 00:16:17,290 in this lecture, we can now do a lot better. 302 302 00:16:17,290 --> 00:16:20,630 And so, instead, we do this. 303 303 00:16:20,630 --> 00:16:23,543 Restaurant dot order pasta. 304 304 00:16:25,090 --> 00:16:28,170 And now, all we need to do is to expand 305 305 00:16:28,170 --> 00:16:30,890 the elements of the ingredient array, 306 306 00:16:30,890 --> 00:16:33,170 and that will then basically 307 307 00:16:33,170 --> 00:16:35,810 write the three elements of the array 308 308 00:16:35,810 --> 00:16:37,383 here separated by commas. 309 309 00:16:38,990 --> 00:16:42,910 So this and this should yield the exact same result, 310 310 00:16:42,910 --> 00:16:46,223 and so let's now test it out with some real data. 311 311 00:16:47,720 --> 00:16:52,720 So let's see, mushrooms, asparagus, and cheese. 312 312 00:16:54,600 --> 00:16:57,040 And so, in these, we get now twice, 313 313 00:16:57,040 --> 00:16:58,460 here is your delicious pasta 314 314 00:16:58,460 --> 00:17:02,160 with mushrooms, asparagus, and cheese. 315 315 00:17:02,160 --> 00:17:04,420 And what do you think is the better solution? 316 316 00:17:04,420 --> 00:17:07,030 This one, or this one? 317 317 00:17:07,030 --> 00:17:09,430 And especially considering that an array 318 318 00:17:09,430 --> 00:17:11,540 could, of course, be a lot longer 319 319 00:17:11,540 --> 00:17:13,420 than just three elements. 320 320 00:17:13,420 --> 00:17:15,268 So indeed, always go with this 321 321 00:17:15,268 --> 00:17:18,680 more modern ES6 syntax here. 322 322 00:17:18,680 --> 00:17:21,610 It's an amazing addition to the language. 323 323 00:17:21,610 --> 00:17:24,310 And now, just to finish this lecture here, 324 324 00:17:24,310 --> 00:17:27,490 since ES 2018, the spread operator 325 325 00:17:27,490 --> 00:17:30,360 actually also works on objects, 326 326 00:17:30,360 --> 00:17:32,937 even though objects are not iterables. 327 327 00:17:34,800 --> 00:17:36,573 So let's write that here. 328 328 00:17:37,740 --> 00:17:41,910 And here let's just write real-world example. 329 329 00:17:47,110 --> 00:17:49,253 And so let's now experiment with this. 330 330 00:17:50,100 --> 00:17:52,200 The first example here was to create 331 331 00:17:52,200 --> 00:17:56,860 a new array based on one initial array, right? 332 332 00:17:56,860 --> 00:18:00,220 And so let's now also create a new restaurant object 333 333 00:18:00,220 --> 00:18:02,540 with all the data from the original one 334 334 00:18:02,540 --> 00:18:04,493 plus some additional data. 335 335 00:18:05,610 --> 00:18:09,000 And so this is actually an amazing way of doing this, 336 336 00:18:09,000 --> 00:18:12,660 because it's so much easier than with old JavaScript. 337 337 00:18:12,660 --> 00:18:15,423 So let's call this one new restaurant. 338 338 00:18:18,460 --> 00:18:22,560 And then we can simply spread the old restaurant 339 339 00:18:22,560 --> 00:18:25,080 and this will then basically copy all the properties 340 340 00:18:25,080 --> 00:18:28,000 of the restaurant into this new object. 341 341 00:18:28,000 --> 00:18:30,690 And then we can add anything that we want. 342 342 00:18:30,690 --> 00:18:34,470 Founder, for example, let's say Giuseppe, 343 343 00:18:34,470 --> 00:18:38,620 Or Giuseppe, I don't really know how to say it. 344 344 00:18:38,620 --> 00:18:42,410 And, of course, here, the order does not matter as always. 345 345 00:18:42,410 --> 00:18:46,400 So this spread here doesn't even have to be the first one. 346 346 00:18:46,400 --> 00:18:50,320 So let's say we also want the founding year, 347 347 00:18:50,320 --> 00:18:51,963 let's say 1998, 348 348 00:18:53,143 --> 00:18:54,390 okay? 349 349 00:18:54,390 --> 00:18:56,963 And so with this, we created a brand new object. 350 350 00:18:57,840 --> 00:19:01,390 Now we need to get rid of these three prompts there, 351 351 00:19:01,390 --> 00:19:04,543 because otherwise, it's gonna drive us crazy. 352 352 00:19:06,320 --> 00:19:07,770 But let's just take this out, 353 353 00:19:11,130 --> 00:19:14,603 and simply log here the new restaurant to the console. 354 354 00:19:16,320 --> 00:19:20,890 And so indeed, we get our original object basically, 355 355 00:19:20,890 --> 00:19:23,773 plus the founder, and plus founded in. 356 356 00:19:24,640 --> 00:19:25,810 Great. 357 357 00:19:25,810 --> 00:19:27,960 And finally, since we were able to do 358 358 00:19:27,960 --> 00:19:32,290 shallow copies of arrays, using the spread operator, 359 359 00:19:32,290 --> 00:19:34,740 we can do the same with objects. 360 360 00:19:34,740 --> 00:19:37,150 So instead of using object dot assign, 361 361 00:19:37,150 --> 00:19:39,423 as we did it in the previous lecture. 362 362 00:19:40,260 --> 00:19:41,403 So let's do that. 363 363 00:19:42,450 --> 00:19:45,173 Restaurant copy. 364 364 00:19:46,140 --> 00:19:50,220 And so all we need to do is an empty object 365 365 00:19:50,220 --> 00:19:52,680 and then in there expand all the elements 366 366 00:19:52,680 --> 00:19:57,300 of the original object, so the restaurant, in this case. 367 367 00:19:57,300 --> 00:20:00,553 And so now, if we attempt to change something on the copy, 368 368 00:20:02,130 --> 00:20:05,990 copy dot name, 369 369 00:20:05,990 --> 00:20:09,833 let's call it now Ristorante Roma, 370 370 00:20:12,950 --> 00:20:13,850 and if you're Italian, 371 371 00:20:13,850 --> 00:20:16,143 you're not gonna like how that sounds. 372 372 00:20:17,140 --> 00:20:22,040 But anyway, now, as we take a look at both of them, 373 373 00:20:22,040 --> 00:20:26,363 so the name of the copy and the original, 374 374 00:20:27,480 --> 00:20:29,653 now you will see that they are different. 375 375 00:20:31,800 --> 00:20:35,650 So the copy has the name of Ristorante Roma, 376 376 00:20:35,650 --> 00:20:38,420 and the old one has Classico Italiano, 377 377 00:20:38,420 --> 00:20:39,760 which means that, indeed, 378 378 00:20:39,760 --> 00:20:43,150 we did make a copy of the original restaurant. 379 379 00:20:43,150 --> 00:20:45,230 Because otherwise, as we learned 380 380 00:20:45,230 --> 00:20:47,110 by the end of the previous section, 381 381 00:20:47,110 --> 00:20:50,890 changing one object would then also change the other one. 382 382 00:20:50,890 --> 00:20:53,290 Right? Cool. 383 383 00:20:53,290 --> 00:20:55,840 So another long lecture here, 384 384 00:20:55,840 --> 00:20:59,030 but we're making really great progress. 385 385 00:20:59,030 --> 00:21:00,850 And of course, we will use all of this 386 386 00:21:00,850 --> 00:21:03,760 in real projects later down the road. 387 387 00:21:03,760 --> 00:21:06,510 But again, I chose to teach you these concepts 388 388 00:21:06,510 --> 00:21:09,900 in a separate way and not inside a big project, 389 389 00:21:09,900 --> 00:21:11,540 because this allows me to show you 390 390 00:21:11,540 --> 00:21:13,750 a lot more different examples 391 391 00:21:13,750 --> 00:21:16,780 and it also makes the material more reference-able 392 392 00:21:16,780 --> 00:21:18,350 for you in the future. 393 393 00:21:18,350 --> 00:21:19,900 And so that's gonna be helpful 394 394 00:21:19,900 --> 00:21:22,490 when you're trying to find what you're looking for 395 395 00:21:22,490 --> 00:21:24,023 after taking this course. 33661