Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,290 --> 00:00:02,790
Let's now start seeing
2
00:00:02,790 --> 00:00:06,450
the three data transformation methods in practice,
3
00:00:06,450 --> 00:00:09,633
starting with the map method in this video.
4
00:00:11,440 --> 00:00:14,440
And as we just learned, the map method
5
00:00:14,440 --> 00:00:18,690
is yet another way that we can use to loop over a race.
6
00:00:18,690 --> 00:00:22,020
But unlike for each, the map method will give us
7
00:00:22,020 --> 00:00:24,160
a brand new array
8
00:00:24,160 --> 00:00:27,216
and this new array will contain in each position
9
00:00:27,216 --> 00:00:30,430
the results of applying a callback function
10
00:00:30,430 --> 00:00:33,540
to the original array elements.
11
00:00:33,540 --> 00:00:36,310
So let's see how that works.
12
00:00:36,310 --> 00:00:40,863
And let's start by bringing back our movements array here,
13
00:00:42,400 --> 00:00:47,400
so this one, so we will once more work with these movements.
14
00:00:47,410 --> 00:00:52,290
And in this one, we will try to convert them to US dollars.
15
00:00:52,290 --> 00:00:55,280
So let's suppose these movements are in euros
16
00:00:55,280 --> 00:00:58,830
and we now want to convert them to US dollars.
17
00:00:58,830 --> 00:01:02,330
And let's suppose that one Euro is worth $1.1,
18
00:01:04,924 --> 00:01:07,400
so let's just store that conversion rate here first
19
00:01:07,400 --> 00:01:08,963
to a separate variable.
20
00:01:09,990 --> 00:01:14,990
So Euro to USD is 1.1 and so now what we want to do
21
00:01:15,550 --> 00:01:18,110
is to basically multiply each element
22
00:01:18,110 --> 00:01:21,363
of the movements array by this 1.1.
23
00:01:22,320 --> 00:01:27,320
So let's say movements.map, and then just like
24
00:01:28,740 --> 00:01:32,620
in a, for each method, we need a callback function.
25
00:01:32,620 --> 00:01:36,000
And this callback function also gets as an argument,
26
00:01:36,000 --> 00:01:37,850
the current array element.
27
00:01:37,850 --> 00:01:40,360
So again just like in a, for each method
28
00:01:40,360 --> 00:01:42,000
that we studied before
29
00:01:42,000 --> 00:01:43,850
and that's why I said back then
30
00:01:43,850 --> 00:01:46,810
that once you understood the for each method,
31
00:01:46,810 --> 00:01:48,880
all the other methods will then become
32
00:01:48,880 --> 00:01:50,763
a lot easier to understand.
33
00:01:51,690 --> 00:01:54,593
So let's call this one here, a Mov one more time.
34
00:01:55,550 --> 00:01:57,810
And then here in the callback function
35
00:01:57,810 --> 00:02:01,510
we need to return the value that we want the new array
36
00:02:01,510 --> 00:02:04,380
to have in the current position.
37
00:02:04,380 --> 00:02:09,380
And so in this case, we want the original array
38
00:02:10,320 --> 00:02:13,973
times the euro to USD conversion rate.
39
00:02:14,980 --> 00:02:18,820
And this will make sense when we now see this result.
40
00:02:18,820 --> 00:02:21,830
And so let's actually store it to a variable.
41
00:02:21,830 --> 00:02:25,450
So we already know that the map method will return
42
00:02:25,450 --> 00:02:26,743
a brand new array.
43
00:02:28,110 --> 00:02:30,173
And so we need to store that somewhere.
44
00:02:31,030 --> 00:02:35,453
So let's call it movements USD, and then let's log both
45
00:02:37,040 --> 00:02:41,893
to the console movements and movements USD,
46
00:02:45,200 --> 00:02:47,150
give it a safe and sometimes we need
47
00:02:47,150 --> 00:02:48,793
to reload the page as well.
48
00:02:50,830 --> 00:02:53,850
But anyway, here is the result.
49
00:02:53,850 --> 00:02:56,960
Now, nevermind these multiplication errors here.
50
00:02:56,960 --> 00:03:00,200
I'll explain you a little bit later where they come from,
51
00:03:00,200 --> 00:03:04,220
but essentially this new value here is now 220
52
00:03:04,220 --> 00:03:07,800
which is exactly 200 times 1.1.
53
00:03:07,800 --> 00:03:10,920
And so indeed we ended up with a new array
54
00:03:10,920 --> 00:03:12,960
containing all the movements
55
00:03:12,960 --> 00:03:16,550
but convert it from euros to US dollars.
56
00:03:16,550 --> 00:03:19,510
And again that's because that is exactly
57
00:03:19,510 --> 00:03:23,060
what we returned here from this callback function
58
00:03:23,060 --> 00:03:26,653
we could of course have returned simply something else.
59
00:03:27,830 --> 00:03:31,510
So we could have returned simply 23.
60
00:03:31,510 --> 00:03:34,763
And so what do you think we will end up in this situation?
61
00:03:36,340 --> 00:03:40,070
Well, we now simply have an array of the same length
62
00:03:40,070 --> 00:03:43,170
which in each of the position contains 23
63
00:03:43,170 --> 00:03:46,800
because that's what we returned from the callback function.
64
00:03:46,800 --> 00:03:50,430
And so in each iteration of the original movements array
65
00:03:50,430 --> 00:03:55,430
it simply put 23 into the new array at the same position.
66
00:03:55,520 --> 00:03:58,090
But of course that's a little bit useless.
67
00:03:58,090 --> 00:04:02,770
And so let's go back to the example that we're working with.
68
00:04:02,770 --> 00:04:06,103
Great, and of course you can also see
69
00:04:06,103 --> 00:04:08,320
that the original movements array
70
00:04:08,320 --> 00:04:11,510
was not mutated at all right?
71
00:04:11,510 --> 00:04:15,080
And so indeed the map method really only returns
72
00:04:15,080 --> 00:04:18,290
in new array with the new elements.
73
00:04:18,290 --> 00:04:20,450
And this really is the fundamentals
74
00:04:20,450 --> 00:04:22,810
of how the map method works.
75
00:04:22,810 --> 00:04:24,070
So we can use this
76
00:04:24,070 --> 00:04:28,240
and we will use it in all kinds of different situations.
77
00:04:28,240 --> 00:04:31,170
Now, just for fun let's write the same thing here
78
00:04:31,170 --> 00:04:36,170
using a for off loop, so we can create another Muff.
79
00:04:38,070 --> 00:04:41,500
And then we are looping the movements, of course.
80
00:04:41,500 --> 00:04:44,590
And so in this loop, we want to create a new array.
81
00:04:44,590 --> 00:04:46,060
And so in this case
82
00:04:46,060 --> 00:04:49,183
actually, we first need to create that new array.
83
00:04:50,940 --> 00:04:53,333
So let's call it again, movements USD,
84
00:04:54,570 --> 00:04:59,570
but then for, so here we first need to define that MTRA
85
00:05:01,160 --> 00:05:03,560
and then as we loop over movements
86
00:05:03,560 --> 00:05:08,560
we keep pushing a value to the new movements USD for array.
87
00:05:12,020 --> 00:05:17,020
So push mov current element times euros to USD,
88
00:05:22,680 --> 00:05:24,300
Let's log that as well,
89
00:05:24,300 --> 00:05:27,090
and it should look exactly the same,
90
00:05:27,090 --> 00:05:29,660
and in fact it does.
91
00:05:29,660 --> 00:05:32,470
And so, yeah, we could have written this here
92
00:05:32,470 --> 00:05:35,280
and it doesn't look too bad either
93
00:05:35,280 --> 00:05:38,300
but it's a completely different philosophy.
94
00:05:38,300 --> 00:05:42,510
So here in the map method, we use a function
95
00:05:42,510 --> 00:05:46,210
to solve this problem of creating a new array.
96
00:05:46,210 --> 00:05:49,710
While here we simply loop over one array
97
00:05:49,710 --> 00:05:52,190
and then manually create a new one.
98
00:05:52,190 --> 00:05:54,810
So these are completely different philosophies
99
00:05:54,810 --> 00:05:57,090
or we can also say paradigms.
100
00:05:57,090 --> 00:06:00,780
So this here is more in line with functional programming
101
00:06:00,780 --> 00:06:02,700
which is something that I have mentioned
102
00:06:02,700 --> 00:06:04,850
a couple of times in this course.
103
00:06:04,850 --> 00:06:08,570
And we will talk about it later in greater detail
104
00:06:08,570 --> 00:06:11,190
and in modern JavaScript, there is definitely
105
00:06:11,190 --> 00:06:15,270
a push going on in the direction of functional programming.
106
00:06:15,270 --> 00:06:17,350
So over a more functional language.
107
00:06:17,350 --> 00:06:20,070
And therefore in modern JavaScript this here
108
00:06:20,070 --> 00:06:21,610
is the way to go.
109
00:06:21,610 --> 00:06:24,110
So using methods together with callback functions
110
00:06:24,110 --> 00:06:28,023
like this, is the new and modern way of doing stuff.
111
00:06:29,690 --> 00:06:32,960
All right, but now let's actually make
112
00:06:32,960 --> 00:06:36,600
our callback function here, look a little bit cleaner.
113
00:06:36,600 --> 00:06:40,630
So this callback function we can simplify it greatly.
114
00:06:40,630 --> 00:06:43,270
So do you remember arrow functions.
115
00:06:43,270 --> 00:06:45,920
We could perfectly use an arrow function here
116
00:06:45,920 --> 00:06:49,830
and simplified as here into just one line of code.
117
00:06:49,830 --> 00:06:51,950
So here is my challenge for you.
118
00:06:51,950 --> 00:06:54,420
Do you think that you can do that yourself?
119
00:06:54,420 --> 00:06:58,570
So basically replacing this callback with an arrow function
120
00:06:58,570 --> 00:07:01,520
take a minute and see if you can do that for yourself.
121
00:07:01,520 --> 00:07:03,473
And I'll see you back here in a second.
122
00:07:05,690 --> 00:07:10,690
So let's just copy this and then replace this by parts.
123
00:07:13,850 --> 00:07:16,820
So first we can remove the function keywords
124
00:07:17,970 --> 00:07:21,730
and then replace it with an arrow.
125
00:07:21,730 --> 00:07:24,570
Then we can also remove these parenthesis here
126
00:07:24,570 --> 00:07:27,400
because there's only one argument.
127
00:07:27,400 --> 00:07:31,120
And finally, since we only have one line of code,
128
00:07:31,120 --> 00:07:33,800
we can remove the curly braces
129
00:07:33,800 --> 00:07:37,650
and we can even remove the return statement.
130
00:07:37,650 --> 00:07:39,750
And so this code that we have here now
131
00:07:39,750 --> 00:07:42,570
is exactly the same as before.
132
00:07:42,570 --> 00:07:44,693
So we can comment out this one here.
133
00:07:45,870 --> 00:07:48,360
And of course I'm leaving it here for reference,
134
00:07:48,360 --> 00:07:51,370
but as I save it now you see that the result
135
00:07:51,370 --> 00:07:52,920
is exactly the same.
136
00:07:52,920 --> 00:07:55,710
And so here we now have a nice and clean
137
00:07:55,710 --> 00:07:59,350
one liner callback function, just like this.
138
00:07:59,350 --> 00:08:03,830
However many people don't like the way that this looks.
139
00:08:03,830 --> 00:08:06,850
So they argued that this lacks the function
140
00:08:06,850 --> 00:08:09,350
and the return keyword which they say
141
00:08:09,350 --> 00:08:11,300
it leads to bad readability.
142
00:08:11,300 --> 00:08:13,470
And that it makes this whole thing
143
00:08:13,470 --> 00:08:16,130
more difficult to understand.
144
00:08:16,130 --> 00:08:19,400
And while I can see that, that might be true.
145
00:08:19,400 --> 00:08:22,870
I actually do prefer the fact how much smaller
146
00:08:22,870 --> 00:08:25,160
and cleaner this code is.
147
00:08:25,160 --> 00:08:27,890
So in my opinion if you understand well enough
148
00:08:27,890 --> 00:08:29,990
how the arrow function actually works
149
00:08:29,990 --> 00:08:33,500
then you will become familiar with this pretty quickly.
150
00:08:33,500 --> 00:08:37,565
And so then there is no problem in writing code like this.
151
00:08:37,565 --> 00:08:40,430
Okay, the main thing that you need to keep in mind
152
00:08:40,430 --> 00:08:44,860
is that here we are actually returning this value.
153
00:08:44,860 --> 00:08:46,570
So you need to remember
154
00:08:46,570 --> 00:08:49,363
that this is like writing return here.
155
00:08:51,740 --> 00:08:55,560
And so if you understand that, then you're good to go.
156
00:08:55,560 --> 00:08:59,700
So I will actually use arrow functions in this situations
157
00:08:59,700 --> 00:09:02,380
in the rest of the course, because I believe
158
00:09:02,380 --> 00:09:06,170
that they are perfect for these small callback functions.
159
00:09:06,170 --> 00:09:08,490
In my opinion they were really developed
160
00:09:08,490 --> 00:09:11,000
for this kind of application.
161
00:09:11,000 --> 00:09:13,930
But as always, if you do prefer the irregular
162
00:09:13,930 --> 00:09:17,890
function syntax then please feel 100% free
163
00:09:17,890 --> 00:09:20,450
to keep using them instead.
164
00:09:20,450 --> 00:09:23,420
And with that being said, let's now experiment
165
00:09:23,420 --> 00:09:26,983
a little bit more and explore the map method some more.
166
00:09:28,470 --> 00:09:30,800
So just like to for each method,
167
00:09:30,800 --> 00:09:33,470
the math method also has access
168
00:09:33,470 --> 00:09:36,320
to the exact same three parameters.
169
00:09:36,320 --> 00:09:38,670
So besides the current array element
170
00:09:38,670 --> 00:09:41,360
which is this one here, we also get access
171
00:09:41,360 --> 00:09:45,240
to the current index as well as the whole array.
172
00:09:45,240 --> 00:09:49,460
So let's now use the map method to loop again
173
00:09:49,460 --> 00:09:51,170
over the movements array.
174
00:09:51,170 --> 00:09:54,600
But this time we're gonna create a string similar
175
00:09:54,600 --> 00:09:56,210
to the one step we printed
176
00:09:56,210 --> 00:09:59,330
to the console earlier using for each.
177
00:09:59,330 --> 00:10:01,363
So let me actually get that logic.
178
00:10:02,660 --> 00:10:04,573
And so it's this one here.
179
00:10:11,050 --> 00:10:13,800
So let's specify a callback function
180
00:10:13,800 --> 00:10:18,180
and indeed now I will actually use an arrow function.
181
00:10:18,180 --> 00:10:22,520
And so, as I said, we get access to the current element
182
00:10:22,520 --> 00:10:25,950
but also to the index and to the entire array
183
00:10:28,520 --> 00:10:31,770
this time we do need a block, at least for now.
184
00:10:31,770 --> 00:10:35,100
And then here we have our logic.
185
00:10:35,100 --> 00:10:38,890
Now in this case, we will not lock something to the console.
186
00:10:38,890 --> 00:10:41,670
So instead we want to return the string
187
00:10:41,670 --> 00:10:44,960
so that it then gets put into the new array,
188
00:10:44,960 --> 00:10:47,523
that results from the map method.
189
00:10:48,860 --> 00:10:51,793
So let's say here movementsDiscriptions
190
00:10:55,640 --> 00:11:00,640
so that's a long name, but anyway
191
00:11:00,930 --> 00:11:04,473
again, here we do not want to lock something to the console.
192
00:11:05,990 --> 00:11:10,190
So we don't want to simply do something with this value.
193
00:11:10,190 --> 00:11:13,400
Like we do when we console.log instead
194
00:11:13,400 --> 00:11:15,880
we really want to return it.
195
00:11:15,880 --> 00:11:20,223
And so that will then place this value into the new array.
196
00:11:21,160 --> 00:11:23,006
So let's save that.
197
00:11:23,006 --> 00:11:25,000
Let's then also log this
198
00:11:25,000 --> 00:11:28,263
to the console movementDescriptions.
199
00:11:30,190 --> 00:11:32,550
And so indeed we get to this array
200
00:11:32,550 --> 00:11:36,980
with these strings that we previously logged to the console.
201
00:11:36,980 --> 00:11:39,880
And by the way it's completely acceptable
202
00:11:39,880 --> 00:11:41,860
to have to return statements
203
00:11:41,860 --> 00:11:44,280
or even more in the same function
204
00:11:44,280 --> 00:11:48,670
as long as only one of them is executed, right?
205
00:11:48,670 --> 00:11:51,610
So in this case either this one here is executed
206
00:11:51,610 --> 00:11:54,650
or this one, it's impossible for both of them
207
00:11:54,650 --> 00:11:57,700
to return at the same time, right?
208
00:11:57,700 --> 00:12:01,470
And actually we can even simplify this whole thing here
209
00:12:01,470 --> 00:12:04,000
because these two strings are essentially
210
00:12:04,000 --> 00:12:08,380
the exact same thing, except for this word here.
211
00:12:08,380 --> 00:12:11,687
And so let's do something else here, right.
212
00:12:14,310 --> 00:12:17,970
Now you also have this math.absolute value
213
00:12:17,970 --> 00:12:21,710
but if the value is already positive as it is here,
214
00:12:21,710 --> 00:12:24,660
then that simply makes no difference.
215
00:12:24,660 --> 00:12:29,240
And so let's use a ternary operator here,
216
00:12:29,240 --> 00:12:33,253
to put either withdrew or deposited right here.
217
00:12:34,800 --> 00:12:37,420
And so this has nothing to do with the map method,
218
00:12:37,420 --> 00:12:41,270
but yeah, it's a good way to also keep practicing
219
00:12:41,270 --> 00:12:44,390
the other skills that we have been learning.
220
00:12:44,390 --> 00:12:48,200
So we can check if the movement is greater than zero.
221
00:12:48,200 --> 00:12:50,130
So the same condition as here.
222
00:12:50,130 --> 00:12:54,210
And if it is then at this part of the string,
223
00:12:54,210 --> 00:12:56,300
it should say deposited.
224
00:12:56,300 --> 00:13:00,203
And if not, well, then it should say withdrew.
225
00:13:02,220 --> 00:13:06,000
And so like this, we built this string all in one go.
226
00:13:06,000 --> 00:13:07,960
And so we can get rid of this.
227
00:13:07,960 --> 00:13:10,180
We can get rid of this.
228
00:13:10,180 --> 00:13:14,680
And so therefore we don't need the return keyword anymore.
229
00:13:14,680 --> 00:13:16,423
And so it works just the same.
230
00:13:17,670 --> 00:13:21,890
Okay, now, in this case, we don't need this array here.
231
00:13:21,890 --> 00:13:23,790
So that's actually also get rid of it.
232
00:13:26,090 --> 00:13:29,910
And it's a good idea to keep in mind why we actually
233
00:13:29,910 --> 00:13:33,910
get access to these two parameters here.
234
00:13:33,910 --> 00:13:37,430
So one more time, all we do here is to pass
235
00:13:37,430 --> 00:13:41,930
this callback function into the map method, right?
236
00:13:41,930 --> 00:13:44,705
But we do not call this function by ourselves.
237
00:13:44,705 --> 00:13:48,230
It is the map method who we'll call this function
238
00:13:48,230 --> 00:13:53,230
for each of the array elements in the movement array.
239
00:13:53,230 --> 00:13:58,230
Okay, now each time that the map method calls or callback
240
00:13:58,300 --> 00:14:01,780
it will simply pass in the current array element as well
241
00:14:01,780 --> 00:14:04,690
as the current index and the whole array.
242
00:14:04,690 --> 00:14:08,910
And off these three, here we are only using the first two,
243
00:14:08,910 --> 00:14:13,370
just the current element and the current index, all right?
244
00:14:13,370 --> 00:14:15,500
And with this, I hope that by now
245
00:14:15,500 --> 00:14:19,700
it is really crystal clear how this all works.
246
00:14:19,700 --> 00:14:23,110
Now you could say, that what we did here
247
00:14:23,110 --> 00:14:26,100
with this map method is essentially the same
248
00:14:26,100 --> 00:14:28,810
as what we did with the, for each method.
249
00:14:28,810 --> 00:14:31,510
But in fact, there is a big, big difference
250
00:14:31,510 --> 00:14:33,820
between these two approaches.
251
00:14:33,820 --> 00:14:36,860
So before we printed each line individually
252
00:14:36,860 --> 00:14:40,330
to the console, as we were looping over the array.
253
00:14:40,330 --> 00:14:43,770
So in each of the iterations, we performed some action
254
00:14:43,770 --> 00:14:46,160
that was then visible in the console
255
00:14:46,160 --> 00:14:48,910
and we can call this a side effect.
256
00:14:48,910 --> 00:14:52,480
So the, for each method creates side effects.
257
00:14:52,480 --> 00:14:54,940
But now here with this map method,
258
00:14:54,940 --> 00:14:56,800
all we did was to return each
259
00:14:56,800 --> 00:14:59,550
of the strings from the callback.
260
00:14:59,550 --> 00:15:03,200
And so basically they got added into a new array.
261
00:15:03,200 --> 00:15:06,430
And then finally we logged that entire array
262
00:15:06,430 --> 00:15:09,880
to the console and not the elements one by one.
263
00:15:09,880 --> 00:15:12,510
And so here in this map method
264
00:15:12,510 --> 00:15:16,270
we did not create a side effect in each of the iteration.
265
00:15:16,270 --> 00:15:19,890
All we did was to build a brand new array
266
00:15:19,890 --> 00:15:23,780
and this idea of side effects will become important again,
267
00:15:23,780 --> 00:15:26,940
as we talk more about functional programming.
268
00:15:26,940 --> 00:15:30,340
Great, and this is how the map method works,
269
00:15:30,340 --> 00:15:34,030
in the next video, we will see a more practical application
270
00:15:34,030 --> 00:15:37,923
of it in the context of our Bankist application.
21015
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.