Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,350 --> 00:00:02,960
Welcome back.
2
00:00:02,960 --> 00:00:06,570
Let's begin this section with a couple of very simple
3
00:00:06,570 --> 00:00:09,970
and very easy to understand array methods,
4
00:00:09,970 --> 00:00:13,623
just to expand our array toolkit a little bit more.
5
00:00:15,610 --> 00:00:18,860
And as always, at the beginning of a new section,
6
00:00:18,860 --> 00:00:21,210
make sure to grab your starter files
7
00:00:21,210 --> 00:00:24,290
and open them up in VS Code.
8
00:00:24,290 --> 00:00:27,293
So that's the folder called arrays banquest.
9
00:00:28,170 --> 00:00:31,960
And then open up script.js, which is gonna contain
10
00:00:31,960 --> 00:00:34,070
a lot of stuff here.
11
00:00:34,070 --> 00:00:37,340
But for now, don't worry about any of that,
12
00:00:37,340 --> 00:00:39,970
I will explain what all of this is,
13
00:00:39,970 --> 00:00:42,467
and also what else we have in our starter files
14
00:00:42,467 --> 00:00:44,563
in a couple of videos from here.
15
00:00:45,790 --> 00:00:49,670
All right, so up there, we have the application part
16
00:00:49,670 --> 00:00:52,053
for the app we're gonna build in this section.
17
00:00:52,920 --> 00:00:55,830
And then here we have the lectures part,
18
00:00:55,830 --> 00:00:59,253
which is a bit more for the concepts themselves.
19
00:01:00,590 --> 00:01:03,325
And by the way, this yellow part here comes
20
00:01:03,325 --> 00:01:06,580
from a VS Code extension that I use.
21
00:01:06,580 --> 00:01:09,280
And I think I showed it to you in the beginning.
22
00:01:09,280 --> 00:01:13,030
But anyway, let's now talk about array methods.
23
00:01:13,030 --> 00:01:17,250
Now before we start, let's quickly talk about why arrays
24
00:01:17,250 --> 00:01:19,720
do actually have methods.
25
00:01:19,720 --> 00:01:23,110
Well, remember that methods are simply functions
26
00:01:23,110 --> 00:01:25,560
that we can call on objects.
27
00:01:25,560 --> 00:01:29,910
So basically, they are functions attached to objects.
28
00:01:29,910 --> 00:01:33,160
So if we have array methods, that means that
29
00:01:33,160 --> 00:01:36,750
arrays themselves are also objects.
30
00:01:36,750 --> 00:01:40,110
And so these array methods are simply functions
31
00:01:40,110 --> 00:01:42,403
that are attached to all arrays
32
00:01:42,403 --> 00:01:44,980
that we create in JavaScript.
33
00:01:44,980 --> 00:01:48,020
Now, we will learn why all arrays have access
34
00:01:48,020 --> 00:01:50,530
to this methods in a later section
35
00:01:50,530 --> 00:01:53,670
when we talk about prototypal inheritance.
36
00:01:53,670 --> 00:01:57,120
But for now, I just want you to understand that arrays
37
00:01:57,120 --> 00:02:00,455
are objects, and that they get access to special
38
00:02:00,455 --> 00:02:03,184
built in methods that we can essentially
39
00:02:03,184 --> 00:02:06,590
see as tools for arrays.
40
00:02:06,590 --> 00:02:09,230
And so as I mentioned, in this lecture, we're gonna start
41
00:02:09,230 --> 00:02:11,970
by learning some very simple tools
42
00:02:11,970 --> 00:02:14,430
that we can use on arrays.
43
00:02:14,430 --> 00:02:19,430
So let's start by defining a simple test array
44
00:02:19,914 --> 00:02:22,240
that we can work with.
45
00:02:22,240 --> 00:02:24,649
And I'll make it as simple as possible
46
00:02:24,649 --> 00:02:28,300
just with these letters, because that will help us
47
00:02:28,300 --> 00:02:31,343
understand some of the things we're gonna do here.
48
00:02:34,050 --> 00:02:36,947
Alright, the first method we're gonna talk about
49
00:02:36,947 --> 00:02:38,777
is the slice method.
50
00:02:38,777 --> 00:02:42,030
And this one is very similar to the slice method
51
00:02:42,030 --> 00:02:45,380
that's available on strings, remember?
52
00:02:45,380 --> 00:02:50,100
So with the slice method, we can extract part of any array,
53
00:02:50,100 --> 00:02:52,820
but without changing the original array.
54
00:02:52,820 --> 00:02:56,230
So essentially, we can take a slice of an array.
55
00:02:56,230 --> 00:02:58,933
And so that's why it's called slice.
56
00:03:00,450 --> 00:03:04,730
So array.slice, and now just like in strings,
57
00:03:04,730 --> 00:03:06,770
we have the begin parameter.
58
00:03:06,770 --> 00:03:11,320
And so this is the index at which we will start extracting.
59
00:03:11,320 --> 00:03:14,510
So when we say two here, we should start extracting
60
00:03:14,510 --> 00:03:17,993
here at C, and then all the way to the end, okay?
61
00:03:19,764 --> 00:03:24,764
And then this slice method will return a new array.
62
00:03:24,890 --> 00:03:27,440
And so we need to log that to the console
63
00:03:27,440 --> 00:03:31,370
in order to actually see it, okay.
64
00:03:31,370 --> 00:03:36,150
So as I said, this does not mutate the original arr, array.
65
00:03:37,570 --> 00:03:39,760
Instead it returns a new array.
66
00:03:39,760 --> 00:03:43,553
So a copy of the array, but only with the extracted parts.
67
00:03:45,180 --> 00:03:50,173
So let's open up a terminal here again, and live server.
68
00:03:51,620 --> 00:03:52,823
And here we go.
69
00:03:53,690 --> 00:03:57,140
So this is already on banker's page,
70
00:03:57,140 --> 00:03:59,510
but nothing is gonna work here yet.
71
00:03:59,510 --> 00:04:02,146
So for now, let's just open up the console
72
00:04:02,146 --> 00:04:06,523
because that's really all we are interested in for now.
73
00:04:07,430 --> 00:04:09,560
Let's reload here again.
74
00:04:09,560 --> 00:04:13,640
And so now we indeed get this array, which is a slice
75
00:04:13,640 --> 00:04:17,740
of the original array starting at position number two.
76
00:04:17,740 --> 00:04:20,803
So zero, one and two, right.
77
00:04:21,670 --> 00:04:25,123
Now, of course, we can also define the end parameter.
78
00:04:27,913 --> 00:04:31,620
So when we write two and four
79
00:04:31,620 --> 00:04:33,223
then let's see the result here.
80
00:04:34,240 --> 00:04:38,020
And so what this means is that just like in strings,
81
00:04:38,020 --> 00:04:42,300
the end parameter here is not included in the output.
82
00:04:42,300 --> 00:04:45,850
So index four is this one here.
83
00:04:45,850 --> 00:04:50,220
And so yeah, as I just mentioned, this one is not
84
00:04:50,220 --> 00:04:52,780
gonna be included in the output.
85
00:04:52,780 --> 00:04:57,780
So two to four is really just two and three, okay?
86
00:04:57,970 --> 00:05:01,000
And so the length of the output array right here
87
00:05:01,000 --> 00:05:04,607
will be the end parameter minus the beginning one.
88
00:05:04,607 --> 00:05:07,663
And so that's exactly the length we get here.
89
00:05:12,080 --> 00:05:16,170
Then next, again, just like in strings,
90
00:05:16,170 --> 00:05:19,890
we can define a negative begin parameter,
91
00:05:19,890 --> 00:05:24,240
and then it will start to copy from the end of the array.
92
00:05:24,240 --> 00:05:28,340
So minus one will basically take the last two elements
93
00:05:28,340 --> 00:05:31,313
of the array, so D and E.
94
00:05:32,880 --> 00:05:35,770
And so with this, it's pretty easy to simply get
95
00:05:35,770 --> 00:05:38,910
the last element of any array.
96
00:05:38,910 --> 00:05:42,391
So if we just duplicate this, so minus one is always
97
00:05:42,391 --> 00:05:45,970
just the last element of any array.
98
00:05:45,970 --> 00:05:49,950
So this is a very nice trick that sometimes useful.
99
00:05:49,950 --> 00:05:52,250
And now to make this complete,
100
00:05:52,250 --> 00:05:56,943
we can also use a negative index as the end parameter.
101
00:05:58,150 --> 00:06:01,510
So let's start extracting at position number one,
102
00:06:01,510 --> 00:06:04,603
until minus one, basically.
103
00:06:05,700 --> 00:06:08,830
So let's see if that returns B and C.
104
00:06:08,830 --> 00:06:13,120
And that's because it now starts extracting at position one,
105
00:06:13,120 --> 00:06:15,830
which is here, and it extracts everything
106
00:06:15,830 --> 00:06:18,550
except the last two here.
107
00:06:18,550 --> 00:06:21,840
So that's what the minus two here means.
108
00:06:21,840 --> 00:06:24,850
Alright, and if you find this a bit confusing,
109
00:06:24,850 --> 00:06:28,200
then just experiment a little bit more with this.
110
00:06:28,200 --> 00:06:30,780
Now finally, we can use the slice method
111
00:06:30,780 --> 00:06:34,163
to simply create a shallow copy of any array.
112
00:06:36,620 --> 00:06:38,670
So to do that, we simply call it
113
00:06:38,670 --> 00:06:41,250
without any arguments at all.
114
00:06:41,250 --> 00:06:44,283
And then indeed, we get here the exact same array.
115
00:06:45,130 --> 00:06:48,030
And if you remember it correctly, we already did
116
00:06:48,030 --> 00:06:51,150
something similar in one of the previous sections,
117
00:06:51,150 --> 00:06:54,200
but using the spread operator, remember?
118
00:06:54,200 --> 00:06:57,060
So back then we did this.
119
00:06:57,060 --> 00:06:59,283
So creating a new array, and then expanding
120
00:06:59,283 --> 00:07:02,380
the original array into that.
121
00:07:02,380 --> 00:07:05,760
And so that gives us the exact same result.
122
00:07:05,760 --> 00:07:09,130
So the question is, should you use the spread operator
123
00:07:09,130 --> 00:07:13,640
or the slice method, in order to create a shallow copy?
124
00:07:13,640 --> 00:07:16,910
Well, that's actually entirely up to you.
125
00:07:16,910 --> 00:07:20,600
So it's just a matter of personal preference.
126
00:07:20,600 --> 00:07:24,640
The only time you really need to use the slice method here
127
00:07:24,640 --> 00:07:28,190
is when you want to chain multiple methods together,
128
00:07:28,190 --> 00:07:30,740
so calling one after the other.
129
00:07:30,740 --> 00:07:34,023
And we will do that, of course, later in this section.
130
00:07:35,180 --> 00:07:36,060
All right.
131
00:07:36,060 --> 00:07:40,339
So that is the slice method.
132
00:07:40,339 --> 00:07:44,094
Next up is a method with a very similar name,
133
00:07:44,094 --> 00:07:47,420
which is called splice.
134
00:07:47,420 --> 00:07:51,560
And a splice method works in almost the same way as slice.
135
00:07:51,560 --> 00:07:53,700
But the fundamental difference is that
136
00:07:53,700 --> 00:07:57,030
it does actually change the original array.
137
00:07:57,030 --> 00:07:59,073
So it mutates that array.
138
00:08:00,430 --> 00:08:04,570
So let's again, log the result to the console anyway.
139
00:08:04,570 --> 00:08:06,674
But now, we use splice.
140
00:08:06,674 --> 00:08:11,383
And then with the same argument, as we use before here,
141
00:08:13,020 --> 00:08:16,952
and so the result here, looks exactly the same.
142
00:08:16,952 --> 00:08:21,030
So this one here is the same as this first one.
143
00:08:21,030 --> 00:08:23,530
Let's give it even more space here.
144
00:08:23,530 --> 00:08:27,783
But now, watch what happened to our original array,
145
00:08:28,740 --> 00:08:33,220
and we see that all that remains here in our original array
146
00:08:33,220 --> 00:08:35,320
is the first two elements.
147
00:08:35,320 --> 00:08:38,682
And so now the extracted elements are actually gone
148
00:08:38,682 --> 00:08:40,690
from the original array.
149
00:08:40,690 --> 00:08:43,040
So splice deleted them.
150
00:08:43,040 --> 00:08:46,618
And so what we can see is that splice actually does mutate
151
00:08:46,618 --> 00:08:51,350
the original array, so it takes part of the array
152
00:08:51,350 --> 00:08:56,100
and returns it and then the original array itself
153
00:08:56,100 --> 00:08:59,163
loses this part that was extracted.
154
00:09:01,032 --> 00:09:04,667
Now in practice, most of the time the value that
155
00:09:04,667 --> 00:09:08,500
the splice method returns, doesn't even interest us.
156
00:09:08,500 --> 00:09:11,430
All we are usually interested in is to just delete
157
00:09:11,430 --> 00:09:15,740
one or more elements from an array using splice.
158
00:09:15,740 --> 00:09:18,860
And one pretty common use case is to simply remove
159
00:09:18,860 --> 00:09:22,090
the last element of an array.
160
00:09:22,090 --> 00:09:24,000
So let's actually do that here.
161
00:09:24,000 --> 00:09:29,000
So let's say arr.splice, and then minus one.
162
00:09:29,570 --> 00:09:32,990
So just like in the slice method, minus one here
163
00:09:32,990 --> 00:09:35,110
is the last element.
164
00:09:35,110 --> 00:09:39,960
So the begin and end parameters, works exactly the same
165
00:09:39,960 --> 00:09:41,463
as in the slice method.
166
00:09:42,810 --> 00:09:45,130
Let's just get rid of this one here,
167
00:09:45,130 --> 00:09:47,083
so that we see our original array.
168
00:09:48,740 --> 00:09:52,660
And so indeed, as we log here arr to the console.
169
00:09:52,660 --> 00:09:57,270
It is the original array, except for the last element,
170
00:09:57,270 --> 00:09:58,870
which was e.
171
00:09:58,870 --> 00:10:01,013
So that's exactly what we did here.
172
00:10:01,850 --> 00:10:02,790
Alright.
173
00:10:02,790 --> 00:10:05,330
And as always, in case you want to learn more
174
00:10:05,330 --> 00:10:08,323
about any particular method, for example,
175
00:10:09,490 --> 00:10:13,630
you can always use the MDN documentation.
176
00:10:13,630 --> 00:10:17,263
So let's say MDN array splice.
177
00:10:18,810 --> 00:10:19,773
So this one.
178
00:10:20,756 --> 00:10:24,573
And so now here are some more examples on how to use this.
179
00:10:25,730 --> 00:10:28,360
And so you have the name of the parameters.
180
00:10:28,360 --> 00:10:32,980
And actually, the second parameter is called delete count.
181
00:10:32,980 --> 00:10:35,750
So it's actually not the begin parameter.
182
00:10:35,750 --> 00:10:40,470
So it works a little bit different than in the slice method.
183
00:10:40,470 --> 00:10:42,870
So let me just show that to you.
184
00:10:42,870 --> 00:10:44,233
So going back here.
185
00:10:45,690 --> 00:10:50,690
So if we do dot splice, let's say at position number one,
186
00:10:51,984 --> 00:10:55,220
and then we want to take exactly two elements,
187
00:10:55,220 --> 00:10:58,210
and so then we write two, okay,
188
00:10:58,210 --> 00:11:01,970
and so the result now of the resulting array
189
00:11:01,970 --> 00:11:04,333
should be that a and c are deleted.
190
00:11:05,943 --> 00:11:09,993
And so indeed, only a and d now remain.
191
00:11:11,150 --> 00:11:14,370
Let's log arr to the console here to see the process
192
00:11:14,370 --> 00:11:16,040
a little bit better.
193
00:11:16,040 --> 00:11:18,045
So here, we removed the first one.
194
00:11:18,045 --> 00:11:20,670
And then here, we went to position one,
195
00:11:20,670 --> 00:11:24,430
and extracted or deleted two elements.
196
00:11:24,430 --> 00:11:27,823
And so position one and then two elements.
197
00:11:29,697 --> 00:11:33,960
So this first parameter here works the same
198
00:11:33,960 --> 00:11:36,332
as in the slice method but the second one
199
00:11:36,332 --> 00:11:40,323
is really the number of elements that we want to delete.
200
00:11:41,700 --> 00:11:45,023
All right, so that is splice.
201
00:11:46,280 --> 00:11:49,540
Next up, we're gonna talk about reverse.
202
00:11:49,540 --> 00:11:51,510
So that's a very simple one.
203
00:11:51,510 --> 00:11:54,910
Let's just restore our array here at this part
204
00:11:56,106 --> 00:11:59,663
so that we can work with the original one here.
205
00:12:00,610 --> 00:12:04,450
Or actually, let's also create a new array here.
206
00:12:04,450 --> 00:12:07,110
Let's call this one, arr two.
207
00:12:07,110 --> 00:12:10,970
And here, we will have five more letters of the alphabet
208
00:12:10,970 --> 00:12:13,833
but this time, in a wrong order.
209
00:12:15,310 --> 00:12:16,800
So let's say for some reason,
210
00:12:16,800 --> 00:12:21,800
we are working with this array and we need to reverse it.
211
00:12:22,490 --> 00:12:27,030
And so that's exactly what we use reverse for.
212
00:12:27,030 --> 00:12:31,523
So arr2.reverse.
213
00:12:32,670 --> 00:12:36,353
And indeed, it now returns the reverse array.
214
00:12:37,280 --> 00:12:38,933
Here I actually want F.
215
00:12:40,030 --> 00:12:42,160
And so now it is correct.
216
00:12:42,160 --> 00:12:44,980
So f, g, h, i, j.
217
00:12:44,980 --> 00:12:48,860
But now what's important to note here is the fact
218
00:12:48,860 --> 00:12:52,200
that the reverse method does actually mutate
219
00:12:52,200 --> 00:12:53,423
the original array.
220
00:12:55,391 --> 00:12:58,540
So you see, as we log in the original,
221
00:12:58,540 --> 00:13:03,080
it is now reversed two, okay.
222
00:13:03,080 --> 00:13:06,010
So this one here does mutate the array.
223
00:13:06,010 --> 00:13:08,400
So that's important to keep in mind.
224
00:13:08,400 --> 00:13:11,060
So maybe you're noticing that in each of the methods,
225
00:13:11,060 --> 00:13:13,670
I always mentioned which one mutates,
226
00:13:13,670 --> 00:13:16,960
and which one does not mutate the original array.
227
00:13:16,960 --> 00:13:19,874
And that's because this is a very important characteristic
228
00:13:19,874 --> 00:13:22,530
of each of these methods.
229
00:13:22,530 --> 00:13:24,500
That's because in a certain situation,
230
00:13:24,500 --> 00:13:27,710
we might not want to mutate the original array,
231
00:13:27,710 --> 00:13:30,603
and then we cannot use any of these methods.
232
00:13:31,740 --> 00:13:33,240
Now, okay.
233
00:13:33,240 --> 00:13:35,770
Next up, is the concat method.
234
00:13:35,770 --> 00:13:39,373
And so this one is used to concatenate two arrays.
235
00:13:40,460 --> 00:13:44,250
So let's create a variable called letters.
236
00:13:44,250 --> 00:13:46,900
And letters will be the result of calling
237
00:13:46,900 --> 00:13:49,423
the concat method on array.
238
00:13:52,020 --> 00:13:55,713
And here, we have to specify the second array.
239
00:13:59,310 --> 00:14:00,910
So let's take a look.
240
00:14:00,910 --> 00:14:04,960
And now we have the 10 first letters of the alphabet here.
241
00:14:04,960 --> 00:14:07,112
So the first array will be the one
242
00:14:07,112 --> 00:14:09,410
on which the method is called.
243
00:14:09,410 --> 00:14:12,290
And the second one is the one that we pass
244
00:14:12,290 --> 00:14:14,590
into the concat method.
245
00:14:14,590 --> 00:14:17,580
And once again, we already did this before,
246
00:14:17,580 --> 00:14:19,363
in another way, remember?
247
00:14:21,640 --> 00:14:26,640
So we could simply also do this, right,
248
00:14:26,880 --> 00:14:30,113
arr and then arr two.
249
00:14:31,520 --> 00:14:34,120
This gives us the exact same result
250
00:14:34,120 --> 00:14:38,660
and it also does not mutate any of the involved arrays.
251
00:14:38,660 --> 00:14:42,259
So just like concat, which also doesn't mutate
252
00:14:42,259 --> 00:14:45,653
the original array here, alright.
253
00:14:50,330 --> 00:14:52,450
And finally, just the join method
254
00:14:52,450 --> 00:14:54,460
that we already talked about before,
255
00:14:54,460 --> 00:14:58,053
but just for the sake of completion here, right.
256
00:14:58,950 --> 00:15:03,500
And by the way, here in this concat method,
257
00:15:03,500 --> 00:15:07,980
so if you prefer to do this one is of course perfectly fine.
258
00:15:07,980 --> 00:15:11,350
And once again, it is just a matter of personal preference,
259
00:15:11,350 --> 00:15:14,069
whether you prefer to use the spread operator,
260
00:15:14,069 --> 00:15:15,753
or the concat method.
261
00:15:17,380 --> 00:15:18,213
All right.
262
00:15:19,690 --> 00:15:23,100
And now here, let's just join all the letters
263
00:15:23,100 --> 00:15:27,170
of the alphabet together that we have here in our array
264
00:15:28,890 --> 00:15:31,383
by using this separator here.
265
00:15:33,210 --> 00:15:36,010
Okay, and so as you already know, the result here
266
00:15:36,010 --> 00:15:41,010
is a string with the separator that we specified.
267
00:15:41,460 --> 00:15:42,420
Great.
268
00:15:42,420 --> 00:15:46,600
So your array tool set is rapidly growing here.
269
00:15:46,600 --> 00:15:50,040
And remember that you already know push on shift,
270
00:15:50,040 --> 00:15:55,040
pop shift, index of n includes from the intersection.
271
00:15:56,020 --> 00:15:59,320
Now if you ever lose track of all these different methods,
272
00:15:59,320 --> 00:16:03,620
and how they work, you can always come back to these videos.
273
00:16:03,620 --> 00:16:06,852
Or of course, check the documentation on MDN,
274
00:16:06,852 --> 00:16:09,380
just like we did here.
275
00:16:09,380 --> 00:16:13,370
So no developer in the world knows all of this by heart.
276
00:16:13,370 --> 00:16:17,047
So sometimes I even have to look up how the splice
277
00:16:17,047 --> 00:16:19,180
or the slice method works,
278
00:16:19,180 --> 00:16:23,240
because it's just too many methods to keep track of.
279
00:16:23,240 --> 00:16:27,670
And, yeah, it's very hard to know everything by heart.
280
00:16:27,670 --> 00:16:30,850
But anyway, let's now move on to the next lecture,
281
00:16:30,850 --> 00:16:34,603
where we will take array methods to a whole new level.
21447
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.