Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,180 --> 00:00:04,380
In this lecture we will loop over an array
2
00:00:04,380 --> 00:00:07,030
using the forEach method.
3
00:00:07,030 --> 00:00:08,670
Now we had already learned
4
00:00:08,670 --> 00:00:12,600
how to loop over an array using the for of loop,
5
00:00:12,600 --> 00:00:16,763
but the forEach method is really fundamentally different.
6
00:00:18,090 --> 00:00:20,470
And from now on we will start working
7
00:00:20,470 --> 00:00:22,670
with our bank account data,
8
00:00:22,670 --> 00:00:25,253
but still in a very simplified way.
9
00:00:26,870 --> 00:00:31,480
So let me get this data here into the present lecture
10
00:00:31,480 --> 00:00:34,080
so that we can see what we're actually working with.
11
00:00:34,930 --> 00:00:37,300
So let me comment it out from here
12
00:00:39,540 --> 00:00:40,663
and just move it here.
13
00:00:41,860 --> 00:00:44,170
So let's say that we wanted to loop
14
00:00:44,170 --> 00:00:46,370
over this movement's array,
15
00:00:46,370 --> 00:00:47,980
in order to print a message
16
00:00:47,980 --> 00:00:51,003
for each movement in this bank account.
17
00:00:52,140 --> 00:00:56,180
So these positive values here are basically deposits
18
00:00:56,180 --> 00:00:59,050
and the negative values are withdrawals.
19
00:00:59,050 --> 00:01:01,800
And so we can print something to the console
20
00:01:01,800 --> 00:01:06,800
saying whether the user deposited or withdrew some money,
21
00:01:07,000 --> 00:01:11,363
and let's actually start by doing this using a for of loop,
22
00:01:12,410 --> 00:01:14,300
just so that we can then compare
23
00:01:14,300 --> 00:01:16,583
the forEach loop to this one.
24
00:01:17,610 --> 00:01:22,320
So let's create a variable movement of movements
25
00:01:24,050 --> 00:01:26,650
and then we will log something to the console
26
00:01:26,650 --> 00:01:28,893
according to the movement value.
27
00:01:30,190 --> 00:01:35,190
So basically if the current movement is greater than zero
28
00:01:36,250 --> 00:01:41,250
then log to the console, you deposited,
29
00:01:42,640 --> 00:01:46,880
and then the movement and else
30
00:01:50,880 --> 00:01:52,950
you withdrew
31
00:01:55,770 --> 00:01:59,240
and then the movement again.
32
00:01:59,240 --> 00:02:03,070
And actually we can use a nice maths function here
33
00:02:03,070 --> 00:02:06,140
which is to take the absolute value,
34
00:02:06,140 --> 00:02:09,120
so basically removing the sign.
35
00:02:09,120 --> 00:02:11,010
So let's see,
36
00:02:11,010 --> 00:02:12,830
and yeah.
37
00:02:12,830 --> 00:02:14,320
That looks nice.
38
00:02:14,320 --> 00:02:18,680
So of course this solution here works perfect,
39
00:02:18,680 --> 00:02:22,310
but now let's finally learn how to use the forEach method
40
00:02:22,310 --> 00:02:24,880
to achieve the exact same thing
41
00:02:24,880 --> 00:02:27,823
but in my opinion in an easier way.
42
00:02:28,720 --> 00:02:31,790
So to loop over the movements array
43
00:02:31,790 --> 00:02:33,130
we use forEach,
44
00:02:35,080 --> 00:02:38,380
and that's with a capital E, don't forget that.
45
00:02:38,380 --> 00:02:40,410
And then the forEach method
46
00:02:40,410 --> 00:02:43,683
actually requires a callback function here.
47
00:02:44,830 --> 00:02:48,570
So forEach is technically a higher order function
48
00:02:48,570 --> 00:02:51,340
as we learned in the last section,
49
00:02:51,340 --> 00:02:53,880
which requires a callback function
50
00:02:53,880 --> 00:02:56,790
in order to tell it what to do.
51
00:02:56,790 --> 00:02:59,150
So it's the forEach method here
52
00:02:59,150 --> 00:03:01,860
that will call this callback function.
53
00:03:01,860 --> 00:03:05,240
We are not calling it ourselves as always.
54
00:03:05,240 --> 00:03:09,360
And that's of course important to keep in mind once again,
55
00:03:09,360 --> 00:03:12,558
But when exactly will forEach actually
56
00:03:12,558 --> 00:03:14,956
call this callback function.
57
00:03:14,956 --> 00:03:19,414
Well what the forEach method does is to loop over the array,
58
00:03:19,414 --> 00:03:22,588
and in each iteration it will execute
59
00:03:22,588 --> 00:03:24,836
this callback function here.
60
00:03:24,836 --> 00:03:28,558
Also as the forEach method calls this callback function
61
00:03:28,558 --> 00:03:32,410
in each iteration it will pass in the current element
62
00:03:32,410 --> 00:03:35,020
of the array as an argument,
63
00:03:35,020 --> 00:03:37,500
and we can specify that here
64
00:03:37,500 --> 00:03:40,870
and let's call that again movement.
65
00:03:40,870 --> 00:03:45,030
So again, each time this callback here is called,
66
00:03:45,030 --> 00:03:46,550
so in each iteration,
67
00:03:46,550 --> 00:03:51,060
it will receive the current element of the array
68
00:03:51,060 --> 00:03:52,570
as an argument.
69
00:03:52,570 --> 00:03:56,300
And here we can of course give this any name that we want,
70
00:03:56,300 --> 00:03:57,760
but I'm just calling it movement
71
00:03:57,760 --> 00:04:00,003
because that's what we did up here.
72
00:04:01,130 --> 00:04:04,180
And so now we can do exactly the same thing
73
00:04:04,180 --> 00:04:06,990
here in this callback function.
74
00:04:06,990 --> 00:04:07,923
Give it a save,
75
00:04:09,130 --> 00:04:13,080
and indeed we now get the same result twice,
76
00:04:13,080 --> 00:04:14,033
so,
77
00:04:14,960 --> 00:04:16,270
let me just
78
00:04:16,270 --> 00:04:18,313
add like a separator here.
79
00:04:19,597 --> 00:04:20,430
ForEach.
80
00:04:23,360 --> 00:04:24,920
And so, yeah.
81
00:04:24,920 --> 00:04:27,050
Indeed we get the same result
82
00:04:27,050 --> 00:04:30,010
and also get ourselves more space
83
00:04:30,010 --> 00:04:31,640
and yeah
84
00:04:31,640 --> 00:04:35,363
so that's essentially how the forEach method works.
85
00:04:37,040 --> 00:04:40,720
So basically behind the scenes, in iteration zero,
86
00:04:40,720 --> 00:04:43,670
it will call this function here
87
00:04:43,670 --> 00:04:46,763
so an anonymous function in this case without a name,
88
00:04:48,360 --> 00:04:49,883
let's just call it function,
89
00:04:52,780 --> 00:04:56,820
and it's gonna call it with the value of 200
90
00:04:56,820 --> 00:04:59,280
then in the next iteration it will call it
91
00:05:00,470 --> 00:05:03,000
with the value of 450
92
00:05:04,330 --> 00:05:07,843
then with the value of 400, right.
93
00:05:09,450 --> 00:05:11,110
And so on and so forth.
94
00:05:11,110 --> 00:05:14,470
Until it reaches the end of the array.
95
00:05:14,470 --> 00:05:16,950
And this part of the forEach function
96
00:05:16,950 --> 00:05:19,890
passing in the current element of the array,
97
00:05:19,890 --> 00:05:22,030
here like this, this and this
98
00:05:22,930 --> 00:05:26,210
is especially important to understand.
99
00:05:26,210 --> 00:05:29,940
So basically this is exactly the concept that I explained
100
00:05:29,940 --> 00:05:31,400
In the last section
101
00:05:31,400 --> 00:05:34,180
when I said that we use a callback function
102
00:05:34,180 --> 00:05:36,820
to tell another higher order function
103
00:05:36,820 --> 00:05:39,130
exactly what it should do,
104
00:05:39,130 --> 00:05:42,018
and so in this case we tell forEach
105
00:05:42,018 --> 00:05:44,640
that in each iteration
106
00:05:44,640 --> 00:05:48,890
it should log one of these two strings here to the console
107
00:05:48,890 --> 00:05:51,630
So we give the forEach method instructions
108
00:05:51,630 --> 00:05:53,920
by giving it a callback function
109
00:05:53,920 --> 00:05:58,100
which contains these instructions, alright.
110
00:05:58,100 --> 00:06:00,260
And I really know and understand
111
00:06:00,260 --> 00:06:04,150
that this is quite a hard concept to wrap your head around.
112
00:06:04,150 --> 00:06:07,635
But if you just continue using this from now on
113
00:06:07,635 --> 00:06:12,635
then eventually it will start to make sense, believe me.
114
00:06:12,950 --> 00:06:16,060
Now anyway, which of the two version
115
00:06:16,060 --> 00:06:18,280
do you think is cleaner
116
00:06:18,280 --> 00:06:21,283
and easier to write and easier to read.
117
00:06:22,180 --> 00:06:24,600
Well I think that we can both agree
118
00:06:24,600 --> 00:06:28,020
that it is the forEach method, right.
119
00:06:28,020 --> 00:06:30,230
And maybe you don't agree with that
120
00:06:30,230 --> 00:06:32,110
and of course that's okay,
121
00:06:32,110 --> 00:06:33,580
as I keep mentioning
122
00:06:33,580 --> 00:06:37,920
it's always good to develop your own style of programming.
123
00:06:37,920 --> 00:06:40,370
But using the forEach method here
124
00:06:40,370 --> 00:06:44,050
and especially understanding the logic behind it here
125
00:06:44,050 --> 00:06:45,580
with the callback function,
126
00:06:45,580 --> 00:06:48,720
is still really important for all the other methods
127
00:06:48,720 --> 00:06:51,200
that we're gonna learn later.
128
00:06:51,200 --> 00:06:53,680
Anyways let's now learn some more stuff
129
00:06:53,680 --> 00:06:55,370
about the forEach method,
130
00:06:55,370 --> 00:06:57,820
because we are not done yet.
131
00:06:57,820 --> 00:07:00,590
So what if we actually needed access
132
00:07:00,590 --> 00:07:02,720
to a counter variable here.
133
00:07:02,720 --> 00:07:05,860
So just like we can access the current index
134
00:07:05,860 --> 00:07:09,290
off the array here in the for of loop.
135
00:07:09,290 --> 00:07:12,023
So remember how we did that with for of,
136
00:07:13,300 --> 00:07:15,313
let's just rewrite this part.
137
00:07:16,580 --> 00:07:20,620
So in this case we loop over
138
00:07:21,530 --> 00:07:24,390
movements dot entries,
139
00:07:24,390 --> 00:07:25,223
remember?
140
00:07:26,520 --> 00:07:31,300
So entries is in fact just another array method
141
00:07:31,300 --> 00:07:33,770
and it returns an array of arrays,
142
00:07:33,770 --> 00:07:36,950
remember, which in the first position
143
00:07:36,950 --> 00:07:39,010
contains the current index
144
00:07:39,010 --> 00:07:40,493
and then the value itself.
145
00:07:43,410 --> 00:07:44,810
And so this is how we access
146
00:07:44,810 --> 00:07:48,210
the counter variable in the for of loop.
147
00:07:48,210 --> 00:07:52,220
And then here in our string we could use that to say
148
00:07:53,100 --> 00:07:53,933
for example,
149
00:07:53,933 --> 00:07:56,110
movement and then the number of the movement.
150
00:08:00,320 --> 00:08:01,730
So that's the counter
151
00:08:01,730 --> 00:08:06,730
which starts at zero, and so we just add one to that
152
00:08:12,410 --> 00:08:13,260
and so
153
00:08:14,410 --> 00:08:16,200
well something went wrong
154
00:08:18,400 --> 00:08:21,210
so that's in line 121,
155
00:08:21,210 --> 00:08:22,703
so unexpected token.
156
00:08:23,540 --> 00:08:26,403
That's because we didn't open it here again,
157
00:08:27,840 --> 00:08:29,733
so we were missing this part here.
158
00:08:30,880 --> 00:08:33,040
And now this looks a lot nicer,
159
00:08:33,040 --> 00:08:35,490
with the number of the movements here.
160
00:08:35,490 --> 00:08:40,050
And so let's now do the same in the forEach method here.
161
00:08:40,050 --> 00:08:42,550
And here, fortunately, it's a lot easier
162
00:08:42,550 --> 00:08:45,890
to get access to the current index.
163
00:08:45,890 --> 00:08:49,580
So to understand how it works we need to remember once more
164
00:08:49,580 --> 00:08:51,620
that it is the forEach method
165
00:08:51,620 --> 00:08:55,150
who calls this callback function in each iteration.
166
00:08:55,150 --> 00:08:56,920
And as it calls this function
167
00:08:56,920 --> 00:09:00,600
it also passes in the current element of the array,
168
00:09:00,600 --> 00:09:03,860
but actually that's not all it passes in
169
00:09:03,860 --> 00:09:07,320
in fact forEach passes in the current element,
170
00:09:07,320 --> 00:09:11,880
the index and the entire array that we are looping.
171
00:09:11,880 --> 00:09:15,170
And so therefore we can specify them here
172
00:09:15,170 --> 00:09:16,333
in our parameter list.
173
00:09:17,470 --> 00:09:21,333
So let's say index and array,
174
00:09:22,220 --> 00:09:27,000
now of course we can just use one, like we have been doing,
175
00:09:27,000 --> 00:09:28,900
or we can just use two,
176
00:09:28,900 --> 00:09:31,480
or we can use all three together.
177
00:09:31,480 --> 00:09:34,690
And as always the names here do not matter at all,
178
00:09:34,690 --> 00:09:37,830
but what does matter is the order.
179
00:09:37,830 --> 00:09:40,350
So the first parameter always needs to be
180
00:09:40,350 --> 00:09:41,620
the current element,
181
00:09:41,620 --> 00:09:44,680
the second parameter always the current index
182
00:09:44,680 --> 00:09:47,743
and the third one always the entire array
183
00:09:47,743 --> 00:09:50,040
that we are looping over.
184
00:09:50,040 --> 00:09:53,140
Because that's the order in which the arguments,
185
00:09:53,140 --> 00:09:57,393
so the actual values, are passed into our callback function.
186
00:09:58,680 --> 00:09:59,960
Okay.
187
00:09:59,960 --> 00:10:02,500
So now let's just copy this here,
188
00:10:02,500 --> 00:10:06,160
so we can do the same here.
189
00:10:06,160 --> 00:10:09,400
Give it a save, and oh.
190
00:10:09,400 --> 00:10:13,150
Here we called it index and not I.
191
00:10:13,150 --> 00:10:16,563
And in fact in the real world we actually use
192
00:10:16,563 --> 00:10:18,113
shorter names.
193
00:10:19,160 --> 00:10:21,370
So let's just call this one I,
194
00:10:21,370 --> 00:10:23,060
this one R,
195
00:10:23,060 --> 00:10:26,320
and this one here mov.
196
00:10:26,320 --> 00:10:29,920
Which is just a shorter abbreviation of movement.
197
00:10:29,920 --> 00:10:31,870
And so this is quite a common pattern
198
00:10:32,720 --> 00:10:34,443
to just abbreviate a little bit.
199
00:10:35,570 --> 00:10:38,983
So let's replace these three here with mov,
200
00:10:40,580 --> 00:10:42,040
give it a save.
201
00:10:42,040 --> 00:10:44,600
And now it does look the same
202
00:10:44,600 --> 00:10:47,690
as with the for of method.
203
00:10:47,690 --> 00:10:48,870
But I hope you can see
204
00:10:48,870 --> 00:10:51,828
that it's a lot easier to get the current index
205
00:10:51,828 --> 00:10:53,750
here in forEach.
206
00:10:54,910 --> 00:10:58,860
Just notice that the order of the parameters is different
207
00:10:58,860 --> 00:11:01,030
in both these scenarios.
208
00:11:01,030 --> 00:11:05,190
So in forEach the first value here is the current element
209
00:11:05,190 --> 00:11:07,300
and the second one is the index.
210
00:11:07,300 --> 00:11:11,550
While when we use here the entries in the for off loop
211
00:11:11,550 --> 00:11:13,920
then the first element is the index
212
00:11:13,920 --> 00:11:17,380
and the second value is the current array element.
213
00:11:17,380 --> 00:11:21,540
So just don't forget that here in this case.
214
00:11:21,540 --> 00:11:25,823
So always first the current element and then the index.
215
00:11:26,720 --> 00:11:27,710
Okay.
216
00:11:27,710 --> 00:11:30,170
And this is how we loop over arrays
217
00:11:30,170 --> 00:11:32,270
with the forEach method.
218
00:11:32,270 --> 00:11:34,910
Now when should you use forEach
219
00:11:34,910 --> 00:11:37,520
and when should you use the for of loop.
220
00:11:37,520 --> 00:11:39,770
Well one fundamental difference
221
00:11:39,770 --> 00:11:43,401
between the two of them is that you cannot break out
222
00:11:43,401 --> 00:11:45,380
of a forEach loop.
223
00:11:45,380 --> 00:11:47,860
So the continue and break statements
224
00:11:47,860 --> 00:11:51,490
do not work in a forEach loop at all.
225
00:11:51,490 --> 00:11:56,440
So instead, forEach will always loop over the entire array
226
00:11:56,440 --> 00:12:00,230
and there is nothing that you can do about it.
227
00:12:00,230 --> 00:12:03,290
So if you really need to break out of a loop
228
00:12:03,290 --> 00:12:06,380
then you have to keep using the for of loop,
229
00:12:06,380 --> 00:12:07,500
but other than that
230
00:12:07,500 --> 00:12:10,470
it really comes down to your personal preference.
231
00:12:10,470 --> 00:12:13,990
Just like so many other things in JavaScript.
232
00:12:13,990 --> 00:12:16,540
So every programming language always has
233
00:12:16,540 --> 00:12:19,258
many different ways or different tools
234
00:12:19,258 --> 00:12:21,620
to achieve the same thing.
235
00:12:21,620 --> 00:12:23,370
And specially as more things
236
00:12:23,370 --> 00:12:25,630
keep getting added to the language
237
00:12:25,630 --> 00:12:29,060
there will always be more options to achieve the same result
238
00:12:29,900 --> 00:12:34,500
All right, and with this we wrap up this lecture.
239
00:12:34,500 --> 00:12:37,882
SO in my opinion this is a really brilliant
240
00:12:37,882 --> 00:12:39,774
and powerful mechanism,
241
00:12:39,774 --> 00:12:43,250
but I know that it's also rather complex
242
00:12:43,250 --> 00:12:46,490
to wrap your head around this, isn't it?
243
00:12:46,490 --> 00:12:48,960
And it actually took quite some time for me
244
00:12:48,960 --> 00:12:53,700
to fully understand this myself, back in the day.
245
00:12:53,700 --> 00:12:57,490
So please don't become frustrated with this,
246
00:12:57,490 --> 00:13:00,640
it will all become obvious with the practice.
247
00:13:00,640 --> 00:13:04,910
So just keep using this and then you will be fine.
248
00:13:04,910 --> 00:13:07,940
Once you do understand exactly how this works
249
00:13:07,940 --> 00:13:11,500
so specially this mechanism of the callback
250
00:13:11,500 --> 00:13:15,500
and of the passing arguments into this callback here
251
00:13:15,500 --> 00:13:18,760
so once you understand this fundamental mechanism
252
00:13:18,760 --> 00:13:21,160
then working with all other array methods
253
00:13:21,160 --> 00:13:24,200
in this section will become really easy.
254
00:13:24,200 --> 00:13:27,650
Because most of them follow the exact same principle
255
00:13:27,650 --> 00:13:31,950
of the callback function that we just explored here.
256
00:13:31,950 --> 00:13:36,180
So please review this lecture carefully, and yeah.
257
00:13:36,180 --> 00:13:37,370
If you really understand
258
00:13:37,370 --> 00:13:39,363
the role of the callback function here
259
00:13:39,363 --> 00:13:42,630
then just move on to the next video.
260
00:13:42,630 --> 00:13:43,513
See you there.
18668
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.