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
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.