Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,190 --> 00:00:02,630
So up until now,
2
00:00:02,630 --> 00:00:05,020
we have been using the map filter
3
00:00:05,020 --> 00:00:08,520
and reduce methods kind of in isolation.
4
00:00:08,520 --> 00:00:11,740
However, we can take this one step further
5
00:00:11,740 --> 00:00:15,203
by chaining all these methods one after another.
6
00:00:16,840 --> 00:00:19,940
For example, let's say that we wanted to take
7
00:00:19,940 --> 00:00:22,720
all the movement deposits then convert them
8
00:00:22,720 --> 00:00:27,070
from euros to dollars and finally add them all up,
9
00:00:27,070 --> 00:00:30,340
so that we know exactly how much was deposited
10
00:00:30,340 --> 00:00:33,220
into the account in US dollars.
11
00:00:33,220 --> 00:00:34,570
Okay.
12
00:00:34,570 --> 00:00:35,760
Now we could of course,
13
00:00:35,760 --> 00:00:38,360
do each of these operations individually
14
00:00:38,360 --> 00:00:41,560
and store each result in a new variable.
15
00:00:41,560 --> 00:00:45,060
However, we can also do it all in one go.
16
00:00:45,060 --> 00:00:46,683
So let's do that.
17
00:00:48,700 --> 00:00:51,793
And I will start here with the filter method.
18
00:00:53,200 --> 00:00:58,200
So as I said, we want to take all of the deposits.
19
00:00:58,240 --> 00:01:01,019
So we get the movement here
20
00:01:01,019 --> 00:01:06,019
and then we filter only for movements that are positive.
21
00:01:06,100 --> 00:01:08,990
And so only these are the deposits.
22
00:01:08,990 --> 00:01:10,930
And so the result of this
23
00:01:10,930 --> 00:01:14,070
operation here will be in your array.
24
00:01:14,070 --> 00:01:19,070
And so now we can call map on that array.
25
00:01:19,090 --> 00:01:21,630
So here again, we then get a movement
26
00:01:23,180 --> 00:01:27,330
and now we can convert that movement to US dollars.
27
00:01:27,330 --> 00:01:31,883
So we can do that with that variable that we used before.
28
00:01:32,840 --> 00:01:34,143
Let's see where that is.
29
00:01:36,610 --> 00:01:37,967
So Euro to USD.
30
00:01:43,646 --> 00:01:45,230
So,
31
00:01:45,230 --> 00:01:48,917
movements times Euro to USD.
32
00:01:50,070 --> 00:01:52,050
And so with this we converted
33
00:01:52,050 --> 00:01:55,630
all of the deposits to US dollars,
34
00:01:55,630 --> 00:01:58,110
but now we can take this even further
35
00:01:58,110 --> 00:02:02,060
and on this result, we can also call a reduce.
36
00:02:02,060 --> 00:02:06,880
And of course we could also call more filters or more maps,
37
00:02:06,880 --> 00:02:09,210
but now let's just do a reduce here.
38
00:02:09,210 --> 00:02:12,970
And so basically add all of these values together.
39
00:02:12,970 --> 00:02:15,540
And so we already know how that works.
40
00:02:15,540 --> 00:02:18,703
So accumulator and then the current movement,
41
00:02:19,670 --> 00:02:22,630
and we just need to return accumulator
42
00:02:23,580 --> 00:02:26,190
plus the current movement.
43
00:02:26,190 --> 00:02:30,083
So that's movement and zero.
44
00:02:31,050 --> 00:02:35,480
And so now let's store all of this into total
45
00:02:36,800 --> 00:02:39,993
deposits in US dollar.
46
00:02:42,000 --> 00:02:43,100
Okay.
47
00:02:43,100 --> 00:02:44,940
So you see that we did three data
48
00:02:44,940 --> 00:02:47,483
transformations here all in one go.
49
00:02:48,810 --> 00:02:52,100
So let's log it to the console to see that we
50
00:02:52,100 --> 00:02:53,883
actually get a result here.
51
00:02:54,770 --> 00:02:56,940
And yeah, we do.
52
00:02:56,940 --> 00:02:59,030
So this is the deposits that we did
53
00:02:59,030 --> 00:03:02,440
into our account in US dollars.
54
00:03:02,440 --> 00:03:04,530
And as I mentioned we could of course
55
00:03:04,530 --> 00:03:07,150
chain many other methods here as well,
56
00:03:07,150 --> 00:03:10,510
as long as they return new arrays.
57
00:03:10,510 --> 00:03:13,020
So filter returns a new array.
58
00:03:13,020 --> 00:03:15,857
So we could have added something else here
59
00:03:15,857 --> 00:03:19,160
or the same goes for map, but reduce,
60
00:03:19,160 --> 00:03:22,060
for example, will return a value.
61
00:03:22,060 --> 00:03:24,110
So only this number in this case.
62
00:03:24,110 --> 00:03:27,440
And so of course here we could now not have chained
63
00:03:27,440 --> 00:03:29,870
a map or a filter after this.
64
00:03:29,870 --> 00:03:33,160
So we can only chain a method after another one,
65
00:03:33,160 --> 00:03:36,170
if the first one returns an array.
66
00:03:36,170 --> 00:03:38,220
So you can imagine all of this
67
00:03:38,220 --> 00:03:42,190
as a sort of pipeline that processes our data.
68
00:03:42,190 --> 00:03:45,700
So we put data in at the beginning, which is here,
69
00:03:45,700 --> 00:03:48,660
and then it goes through all these steps.
70
00:03:48,660 --> 00:03:49,493
So in this case,
71
00:03:49,493 --> 00:03:53,340
these three steps here and then in the end our input data
72
00:03:53,340 --> 00:03:57,023
comes out processed on the other side of the pipeline.
73
00:03:57,890 --> 00:04:00,510
So let's just write this here
74
00:04:02,220 --> 00:04:05,883
because I think this is a nice analogy, right?
75
00:04:06,850 --> 00:04:10,240
Now, when we chain all these methods together here,
76
00:04:10,240 --> 00:04:12,811
it can be a little bit hard to debug
77
00:04:12,811 --> 00:04:16,530
if one of the results is not what we expect.
78
00:04:16,530 --> 00:04:17,363
For example,
79
00:04:17,363 --> 00:04:21,210
if this result here would be something really weird,
80
00:04:21,210 --> 00:04:24,430
we wouldn't really know from which step of this pipeline
81
00:04:24,430 --> 00:04:26,700
it would come from, right?
82
00:04:26,700 --> 00:04:27,610
And to solve this,
83
00:04:27,610 --> 00:04:30,150
it would be good to check out the array
84
00:04:30,150 --> 00:04:32,330
in each of these different steps.
85
00:04:32,330 --> 00:04:35,286
So let's say we did a mistake here
86
00:04:35,286 --> 00:04:38,260
and we wrote it like this.
87
00:04:38,260 --> 00:04:41,070
And so our result would come out negative
88
00:04:41,070 --> 00:04:42,890
and that would be strange.
89
00:04:42,890 --> 00:04:45,850
So in this case, it will probably be nice to know
90
00:04:45,850 --> 00:04:49,032
the result of this filter operation.
91
00:04:49,032 --> 00:04:54,032
And so we can do that by using the array parameter
92
00:04:54,120 --> 00:04:57,560
that we get access to in this callback function.
93
00:04:57,560 --> 00:04:58,540
Remember?
94
00:04:58,540 --> 00:05:01,560
So we have the current element, the index,
95
00:05:01,560 --> 00:05:04,230
and the entire array.
96
00:05:04,230 --> 00:05:07,423
And actually let's duplicate this here first.
97
00:05:11,140 --> 00:05:14,443
Okay and set this back to what it was.
98
00:05:18,050 --> 00:05:19,610
Okay.
99
00:05:19,610 --> 00:05:22,550
So that's now locked to the console, this array.
100
00:05:22,550 --> 00:05:24,570
And so now we need these curly braces
101
00:05:24,570 --> 00:05:27,380
because we will have a code block
102
00:05:28,720 --> 00:05:32,563
and we need to actually return our calculation here.
103
00:05:33,870 --> 00:05:35,880
But anyway, we can now take a look
104
00:05:35,880 --> 00:05:38,090
at the whole current array that
105
00:05:38,090 --> 00:05:41,360
this map method here is being called on.
106
00:05:41,360 --> 00:05:43,000
So let's take a look.
107
00:05:43,000 --> 00:05:45,000
And so indeed, it is this array
108
00:05:45,000 --> 00:05:47,363
of the three negative movements.
109
00:05:49,050 --> 00:05:51,713
So let's log the movements here one more time.
110
00:05:54,400 --> 00:05:56,240
So you see that indeed
111
00:05:56,240 --> 00:05:58,880
we get to these three negative movements now.
112
00:05:58,880 --> 00:06:02,400
And so that is the result of this filter here.
113
00:06:02,400 --> 00:06:03,470
And so again,
114
00:06:03,470 --> 00:06:07,110
if we want to see that result of only this operation,
115
00:06:07,110 --> 00:06:08,947
we can check out the current array
116
00:06:08,947 --> 00:06:13,880
and the next array method that has chained on that filter.
117
00:06:13,880 --> 00:06:16,310
And so in this case, it's the map.
118
00:06:16,310 --> 00:06:19,080
And so this is one of the great use cases
119
00:06:19,080 --> 00:06:21,880
of having access to this current array.
120
00:06:21,880 --> 00:06:23,880
Because as you see, of course,
121
00:06:23,880 --> 00:06:27,710
this array has to be the result of the previous operation.
122
00:06:27,710 --> 00:06:29,000
So of this filter.
123
00:06:29,000 --> 00:06:31,360
It is not this initial movement array
124
00:06:32,482 --> 00:06:35,460
because that's not what we called the map method on,
125
00:06:35,460 --> 00:06:36,293
right?
126
00:06:36,293 --> 00:06:37,820
The map method was called on
127
00:06:37,820 --> 00:06:40,710
the result of movements, that filter,
128
00:06:40,710 --> 00:06:44,023
and therefore that is the value here of this array.
129
00:06:44,900 --> 00:06:46,450
That makes sense?
130
00:06:46,450 --> 00:06:49,580
Now it was of course logged here three times
131
00:06:49,580 --> 00:06:53,820
because this callback function here is called three times.
132
00:06:53,820 --> 00:06:56,663
So once for each of these three values.
133
00:06:57,790 --> 00:07:02,430
Okay, so let's put it back to what it was
134
00:07:02,430 --> 00:07:05,020
and now we get to correct array.
135
00:07:05,020 --> 00:07:06,770
This one is now printed five times
136
00:07:06,770 --> 00:07:09,563
because there are five values in the array.
137
00:07:10,960 --> 00:07:14,130
Let's just turn this one off here as well.
138
00:07:14,130 --> 00:07:17,030
And so this was just to show you that we can
139
00:07:17,030 --> 00:07:21,340
inspect the current array at any stage of the pipeline
140
00:07:21,340 --> 00:07:24,513
using the third parameter of the callback function.
141
00:07:25,360 --> 00:07:26,240
All right.
142
00:07:26,240 --> 00:07:29,130
And so now that we know how this chaining works
143
00:07:29,130 --> 00:07:31,503
we can go back to our application here.
144
00:07:33,301 --> 00:07:34,570
Let's give us some more space
145
00:07:34,570 --> 00:07:38,850
and we can now calculate these statistics down here.
146
00:07:38,850 --> 00:07:41,270
So that's all of the deposits.
147
00:07:41,270 --> 00:07:43,400
So incomes here basically.
148
00:07:43,400 --> 00:07:45,240
Then we have the outcomes.
149
00:07:45,240 --> 00:07:47,750
So that's the sum of all the withdrawals
150
00:07:47,750 --> 00:07:51,971
and then also an interest that the bank might pay us.
151
00:07:51,971 --> 00:07:56,033
And so let's go back up here to the application.
152
00:07:57,700 --> 00:08:00,752
And so we already have display movements,
153
00:08:00,752 --> 00:08:02,730
calcDisplayBalance.
154
00:08:02,730 --> 00:08:06,350
And now here I will create another
155
00:08:06,350 --> 00:08:09,337
function called calcDisplaySummary.
156
00:08:16,840 --> 00:08:19,150
And just as our previous function here
157
00:08:19,150 --> 00:08:21,660
to calculate the balance
158
00:08:21,660 --> 00:08:24,783
this one also receives the movements data.
159
00:08:26,190 --> 00:08:28,297
And so we will also call it
160
00:08:28,297 --> 00:08:31,093
with the account one dot movements.
161
00:08:34,559 --> 00:08:38,210
And once again, we will then later change this
162
00:08:38,210 --> 00:08:41,053
to the user that is logging into the application.
163
00:08:43,580 --> 00:08:46,833
Okay, so let's start by calculating the incomes.
164
00:08:47,720 --> 00:08:49,713
So that's this first value here.
165
00:08:51,360 --> 00:08:54,313
And so that's all the movements.
166
00:08:55,641 --> 00:09:00,020
And then we filter them for only the positive ones.
167
00:09:00,020 --> 00:09:03,133
And so this is now exactly what we did before.
168
00:09:05,140 --> 00:09:07,150
So greater than zero.
169
00:09:07,150 --> 00:09:11,340
And now onto this one, we simply chain another reduce
170
00:09:13,170 --> 00:09:15,610
because now we want to add all these
171
00:09:15,610 --> 00:09:17,720
positive numbers together.
172
00:09:17,720 --> 00:09:19,743
So there's no mapping involved here.
173
00:09:22,430 --> 00:09:25,303
It's just filtering and then adding together.
174
00:09:28,690 --> 00:09:31,820
Give it a safe and now we can put it here
175
00:09:31,820 --> 00:09:36,573
inside of this label, so this HTML element.
176
00:09:38,300 --> 00:09:41,183
So it's always a good idea to check out the name of it.
177
00:09:43,210 --> 00:09:47,613
So this one is called summary value in.
178
00:09:49,953 --> 00:09:53,870
So as before I already have that here,
179
00:09:53,870 --> 00:09:57,320
so it's this one and it's called labelSumIn.
180
00:09:57,320 --> 00:10:00,533
We will also then need labelSumOut and labelSumInterest.
181
00:10:02,260 --> 00:10:04,883
So keep these in mind for a bit later.
182
00:10:06,320 --> 00:10:08,350
So here we have
183
00:10:09,889 --> 00:10:10,722
labelSumIn
184
00:10:11,860 --> 00:10:14,573
and then our old text content property.
185
00:10:17,360 --> 00:10:20,240
So incomes and then the Euro sign.
186
00:10:20,240 --> 00:10:22,370
And now I know how it works.
187
00:10:22,370 --> 00:10:24,880
At least on Mac, you can use the emoji picker
188
00:10:25,900 --> 00:10:29,220
and then you just search for a Euro like this.
189
00:10:29,220 --> 00:10:30,590
And here you go.
190
00:10:30,590 --> 00:10:34,230
And I'm sure there is something similar on Windows as well.
191
00:10:34,230 --> 00:10:35,730
Let me actually copy it and put it
192
00:10:35,730 --> 00:10:38,740
also here instead of this Euro,
193
00:10:38,740 --> 00:10:41,873
and to same also here in this movement.
194
00:10:43,400 --> 00:10:45,780
So here where we display all the movements
195
00:10:45,780 --> 00:10:49,523
so that the Euro sign also appears here on all these.
196
00:10:51,450 --> 00:10:54,590
Okay, this should now already be working.
197
00:10:54,590 --> 00:10:59,123
So let's give it a safe, but nothing happened here.
198
00:11:01,110 --> 00:11:05,023
That's because I am calling the wrong function here.
199
00:11:05,920 --> 00:11:07,750
So this has gotta be summary.
200
00:11:07,750 --> 00:11:11,313
So I was calling calcDisplayBalance for a second time.
201
00:11:12,610 --> 00:11:16,113
Now it works, so that's 5,000 Euros.
202
00:11:17,440 --> 00:11:20,160
And you see that also now here we have the Euro sign
203
00:11:20,160 --> 00:11:22,870
which makes it look a little bit more
204
00:11:22,870 --> 00:11:25,053
like a bank application, right?
205
00:11:26,070 --> 00:11:29,480
And now do the same for the outgoing money.
206
00:11:29,480 --> 00:11:34,480
So we're going to calculate a variable called out.
207
00:11:35,100 --> 00:11:36,990
And now I want to leave this one here again
208
00:11:36,990 --> 00:11:38,670
as a challenge for you.
209
00:11:38,670 --> 00:11:40,300
So that's a very simple one.
210
00:11:40,300 --> 00:11:42,600
Just don't look at the rest of the code
211
00:11:42,600 --> 00:11:45,250
and I'm sure you can do this one without any problem.
212
00:11:49,030 --> 00:11:53,453
So that's just movements dot filter.
213
00:11:55,050 --> 00:11:58,163
And so now it's basically just the opposite.
214
00:11:59,240 --> 00:12:01,193
So the negative movements.
215
00:12:12,040 --> 00:12:14,023
Okay, and then labelSumOut,
216
00:12:18,900 --> 00:12:19,903
set to out,
217
00:12:22,215 --> 00:12:24,303
and data did not work.
218
00:12:25,190 --> 00:12:26,643
I see we have an error here.
219
00:12:27,700 --> 00:12:30,583
And so assignment to constant variable.
220
00:12:31,930 --> 00:12:33,030
Oh, I see.
221
00:12:33,030 --> 00:12:37,410
We are forgetting here the text content property.
222
00:12:37,410 --> 00:12:41,750
Maybe you saw that coming and now it works here beautifully.
223
00:12:41,750 --> 00:12:46,449
Okay, now I just want to get rid of this minus sign here.
224
00:12:46,449 --> 00:12:49,360
We already know that the money is going out,
225
00:12:49,360 --> 00:12:53,210
so there's no need for the negative sign.
226
00:12:53,210 --> 00:12:56,190
So let's just take the absolute value here.
227
00:12:56,190 --> 00:12:58,170
So we did that before.
228
00:12:58,170 --> 00:13:03,170
So math dot abs and this is going to remove the sign.
229
00:13:06,430 --> 00:13:07,573
Yeah, beautiful.
230
00:13:08,420 --> 00:13:10,260
Now finally, the interest here.
231
00:13:10,260 --> 00:13:15,240
And so let's say that this bank pays out an interest
232
00:13:15,240 --> 00:13:18,910
each time that there is a deposit to the bank account.
233
00:13:18,910 --> 00:13:23,910
And that interest is 1.2% of the deposited amount.
234
00:13:24,050 --> 00:13:28,183
Unfortunately in the real world, it's nothing like that.
235
00:13:28,183 --> 00:13:31,000
But here in our fictional bank,
236
00:13:31,000 --> 00:13:36,000
we can do whatever rules we want, right?
237
00:13:36,000 --> 00:13:40,190
So as I said, the interest is paid on each deposit.
238
00:13:40,190 --> 00:13:43,240
So first we need to get these deposits.
239
00:13:43,240 --> 00:13:45,200
And so that's this filter here.
240
00:13:45,200 --> 00:13:46,223
Let me just copy it.
241
00:13:48,557 --> 00:13:49,390
Okay.
242
00:13:49,390 --> 00:13:54,390
And so now on each of these deposits, we will receive 1.2%.
243
00:13:54,432 --> 00:13:56,550
So what do we do here?
244
00:13:56,550 --> 00:13:58,500
Well, we're going to create a new array
245
00:13:58,500 --> 00:14:01,270
which contains all of these interests.
246
00:14:01,270 --> 00:14:04,333
And then in the end we can just add them together.
247
00:14:05,550 --> 00:14:07,973
And so map is the way to go here.
248
00:14:10,060 --> 00:14:12,320
So we take the current movement
249
00:14:12,320 --> 00:14:15,120
and we could even call this array a deposit.
250
00:14:15,120 --> 00:14:16,601
Let's do that.
251
00:14:16,601 --> 00:14:19,650
We know that this has to be a deposit.
252
00:14:19,650 --> 00:14:23,290
And so let's call it that to make it a bit more explicit.
253
00:14:23,290 --> 00:14:26,433
We could do the same here, but that's not necessary.
254
00:14:27,320 --> 00:14:28,603
So we get 1.2%.
255
00:14:29,840 --> 00:14:34,840
So we multiply this by 1.2 divided by 100.
256
00:14:36,470 --> 00:14:39,300
So that's how you calculate percentages.
257
00:14:39,300 --> 00:14:41,573
And then finally we just edit all together.
258
00:14:43,870 --> 00:14:46,913
So let's just take this one here, chain it here,
259
00:14:48,609 --> 00:14:50,210
and now each of the current elements
260
00:14:50,210 --> 00:14:52,290
is no longer a movement.
261
00:14:52,290 --> 00:14:56,493
So let me just call it here an interest, so int.
262
00:15:01,150 --> 00:15:06,150
All right, and now let's also just copy this one here.
263
00:15:11,890 --> 00:15:12,840
So labelSumInterest
264
00:15:14,612 --> 00:15:18,195
and then here of course it is the interest.
265
00:15:19,635 --> 00:15:24,635
And you see we got six Euros and 24 cents of interest.
266
00:15:24,710 --> 00:15:27,140
Great, but now let's say that the bank
267
00:15:27,140 --> 00:15:29,320
introduces a new rule.
268
00:15:29,320 --> 00:15:31,610
So now the bank only pays an interest
269
00:15:31,610 --> 00:15:35,060
if that interest is at least one Euro
270
00:15:35,060 --> 00:15:37,190
or whatever other currency.
271
00:15:37,190 --> 00:15:40,720
So where do we put that in our calculation?
272
00:15:40,720 --> 00:15:44,890
So again, only if one interest is at least one
273
00:15:44,890 --> 00:15:48,162
only then it will be added here to this total.
274
00:15:48,162 --> 00:15:51,670
And so this sounds like it's gotta be somewhere
275
00:15:51,670 --> 00:15:54,499
between this place where we actually
276
00:15:54,499 --> 00:15:56,350
calculate the individual interests
277
00:15:56,350 --> 00:15:59,572
and here where we then add them together.
278
00:15:59,572 --> 00:16:03,370
So let's add a new method here in the chain
279
00:16:03,370 --> 00:16:05,780
between the map and the reduce.
280
00:16:05,780 --> 00:16:07,860
And it is going to be a filter
281
00:16:08,940 --> 00:16:11,340
because we basically want to exclude
282
00:16:11,340 --> 00:16:14,590
the interests that are below one.
283
00:16:14,590 --> 00:16:17,680
So this one here is an array of interests.
284
00:16:17,680 --> 00:16:20,250
And actually let's take a look also
285
00:16:20,250 --> 00:16:22,450
at the current array here.
286
00:16:22,450 --> 00:16:26,600
So interests then I, which we're not going to need,
287
00:16:26,600 --> 00:16:27,863
and the whole array.
288
00:16:29,518 --> 00:16:33,110
And so let's log to the console the whole array,
289
00:16:33,110 --> 00:16:35,250
just to see what's happening.
290
00:16:35,250 --> 00:16:38,280
But anyway, what we will have to do here
291
00:16:38,280 --> 00:16:42,927
is to filter the results of culling these interests here
292
00:16:42,927 --> 00:16:46,750
for values that are at least one.
293
00:16:46,750 --> 00:16:50,580
So interests greater or equal one.
294
00:16:50,580 --> 00:16:52,800
And only these interests will make it
295
00:16:52,800 --> 00:16:54,410
into the final calculation.
296
00:16:54,410 --> 00:16:57,120
So into the next step here of the pipeline,
297
00:16:57,120 --> 00:16:58,743
which is this reduce.
298
00:17:00,950 --> 00:17:03,700
So you see that the interest now decreased a little bit
299
00:17:07,700 --> 00:17:09,690
and that's because indeed
300
00:17:09,690 --> 00:17:12,220
here in this array of interests,
301
00:17:12,220 --> 00:17:15,040
we have one value that is below one.
302
00:17:15,040 --> 00:17:19,580
So this 0.84, and therefore it will get filtered out
303
00:17:19,580 --> 00:17:24,340
in this new step that we added here to the processing.
304
00:17:24,340 --> 00:17:26,500
And so then the final interest
305
00:17:26,500 --> 00:17:28,780
that's going to be paid by the bank
306
00:17:28,780 --> 00:17:32,520
is only these other four values added together.
307
00:17:32,520 --> 00:17:35,600
So these three plus this one,
308
00:17:35,600 --> 00:17:37,663
but this one here has been excluded.
309
00:17:39,056 --> 00:17:42,239
All right, that makes sense?
310
00:17:42,239 --> 00:17:44,160
So anyway,
311
00:17:44,160 --> 00:17:49,030
this was another great part here of our bankers application.
312
00:17:49,030 --> 00:17:52,760
So with this, we now also completed this part here.
313
00:17:52,760 --> 00:17:56,550
And hopefully you can start to really appreciate
314
00:17:56,550 --> 00:18:00,310
the huge advantage that working with these array methods
315
00:18:00,310 --> 00:18:04,432
gives us over simply working with more traditional loops.
316
00:18:04,432 --> 00:18:06,780
And now just to finish this lecture,
317
00:18:06,780 --> 00:18:10,970
let me just give you a couple of remarks about chaining.
318
00:18:10,970 --> 00:18:14,160
So first we should not overuse chaining,
319
00:18:14,160 --> 00:18:16,080
so we should try to optimize it
320
00:18:16,080 --> 00:18:19,810
because chaining tons of methods one after the other
321
00:18:19,810 --> 00:18:22,310
can cause a real performance issues
322
00:18:22,310 --> 00:18:25,130
if we have really huge arrays.
323
00:18:25,130 --> 00:18:27,990
So if we have a huge chain of methods,
324
00:18:27,990 --> 00:18:29,900
chained one after the other,
325
00:18:29,900 --> 00:18:33,070
we should try to compress all the functionality
326
00:18:33,070 --> 00:18:37,030
that they do into as little methods as possible.
327
00:18:37,030 --> 00:18:39,430
For example, sometimes we create way more
328
00:18:39,430 --> 00:18:42,050
map methods then we actually need,
329
00:18:42,050 --> 00:18:45,900
where we could just do it all in just one map call.
330
00:18:45,900 --> 00:18:47,950
So when you chain methods like this,
331
00:18:47,950 --> 00:18:50,270
keep looking for opportunities of
332
00:18:50,270 --> 00:18:52,784
keeping up your codes performance.
333
00:18:52,784 --> 00:18:57,010
And second, it is a bad practice in JavaScript
334
00:18:57,010 --> 00:19:01,740
to chain methods that mutate the underlying original array.
335
00:19:01,740 --> 00:19:05,460
And an example of that is the splice method.
336
00:19:05,460 --> 00:19:08,050
So again, you should not chain a method
337
00:19:08,050 --> 00:19:11,830
like the splice or the reverse method.
338
00:19:11,830 --> 00:19:13,800
I mean, you can do that,
339
00:19:13,800 --> 00:19:16,270
and for a small application like this one,
340
00:19:16,270 --> 00:19:19,840
it's not a big deal and it's not going to cause problems,
341
00:19:19,840 --> 00:19:22,060
but in a large scale application,
342
00:19:22,060 --> 00:19:24,530
it's usually always a good practice
343
00:19:24,530 --> 00:19:27,170
to avoid mutating arrays.
344
00:19:27,170 --> 00:19:28,720
And we will come back to this
345
00:19:28,720 --> 00:19:31,983
when we talk a little bit more about functional programming.
346
00:19:32,820 --> 00:19:35,170
Anyway, with that being said there is now
347
00:19:35,170 --> 00:19:37,463
another coding challenge waiting for you.
25440
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.