Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,230 --> 00:00:02,480
In JavaScript,
2
2
00:00:02,480 --> 00:00:05,640
there are three big and important array methods
3
3
00:00:05,640 --> 00:00:10,270
that we use all the time to perform data transformations.
4
4
00:00:10,270 --> 00:00:11,340
So basically,
5
5
00:00:11,340 --> 00:00:12,940
these are methods that we use
6
6
00:00:12,940 --> 00:00:15,120
to create new arrays based
7
7
00:00:15,120 --> 00:00:18,490
on transforming data from other arrays.
8
8
00:00:18,490 --> 00:00:19,890
And in recent years,
9
9
00:00:19,890 --> 00:00:24,640
these tools have become really popular and for good reasons
10
10
00:00:24,640 --> 00:00:27,810
and therefore you'll see them everywhere you look
11
11
00:00:27,810 --> 00:00:29,513
in Modern JavaScript.
12
12
00:00:31,230 --> 00:00:36,230
And the tools I'm talking about are; map, filter and reduce.
13
13
00:00:36,750 --> 00:00:39,080
So these are three array methods
14
14
00:00:39,080 --> 00:00:40,160
and in this lecture,
15
15
00:00:40,160 --> 00:00:43,390
I'm gonna give you a quick overview of them.
16
16
00:00:43,390 --> 00:00:45,780
Then over the next couple of lectures,
17
17
00:00:45,780 --> 00:00:48,720
we're gonna dive deep into these three methods
18
18
00:00:48,720 --> 00:00:51,410
in practice so that we can use them
19
19
00:00:51,410 --> 00:00:53,233
throughout the rest of the course.
20
20
00:00:54,070 --> 00:00:58,250
First the map method is yet another method that we can use
21
21
00:00:58,250 --> 00:01:00,670
to loop over arrays.
22
22
00:01:00,670 --> 00:01:02,850
So, map is actually similar
23
23
00:01:02,850 --> 00:01:06,000
to the forEach method that we studied before
24
24
00:01:06,000 --> 00:01:09,830
but with the difference that map creates a brand new array
25
25
00:01:09,830 --> 00:01:12,600
based on the original array.
26
26
00:01:12,600 --> 00:01:16,500
So essentially the map method takes an array,
27
27
00:01:16,500 --> 00:01:18,450
loops over that array
28
28
00:01:18,450 --> 00:01:20,050
and in each alteration,
29
29
00:01:20,050 --> 00:01:22,060
it applies a covic function
30
30
00:01:22,060 --> 00:01:24,220
that we specify on our code
31
31
00:01:24,220 --> 00:01:26,780
to the current array element.
32
32
00:01:26,780 --> 00:01:29,990
So in this example we say that each element
33
33
00:01:29,990 --> 00:01:31,583
shall be multiplied by two.
34
34
00:01:32,420 --> 00:01:34,400
And with this covic in place,
35
35
00:01:34,400 --> 00:01:38,410
the map method multiplies every single element by two
36
36
00:01:38,410 --> 00:01:40,853
and puts it into a new array.
37
37
00:01:42,790 --> 00:01:46,650
We say that it maps the values of the original array
38
38
00:01:46,650 --> 00:01:51,120
to a new array and that's why this method is called map.
39
39
00:01:51,120 --> 00:01:53,360
And it is extremely useful.
40
40
00:01:53,360 --> 00:01:57,000
Usually way more useful than in forEach method
41
41
00:01:57,000 --> 00:02:00,590
because forEach simply allows us to do some work
42
42
00:02:00,590 --> 00:02:02,820
with each array element.
43
43
00:02:02,820 --> 00:02:04,820
But map on the other hand,
44
44
00:02:04,820 --> 00:02:06,910
builds us a brand new array
45
45
00:02:06,910 --> 00:02:10,270
containing the results of applying an operation
46
46
00:02:10,270 --> 00:02:11,803
to the original array,
47
47
00:02:12,860 --> 00:02:13,700
all right?
48
48
00:02:13,700 --> 00:02:15,180
And we will use the map method
49
49
00:02:15,180 --> 00:02:17,723
in practice right in the next video.
50
50
00:02:18,630 --> 00:02:19,463
Anyway,
51
51
00:02:19,463 --> 00:02:21,990
next up we have the filter method,
52
52
00:02:21,990 --> 00:02:25,960
which as the name says, is used to filter for elements
53
53
00:02:25,960 --> 00:02:30,960
in the original array which satisfy a certain condition.
54
54
00:02:31,060 --> 00:02:33,160
So in this example we are only looking
55
55
00:02:33,160 --> 00:02:36,090
for elements greater than two.
56
56
00:02:36,090 --> 00:02:39,360
So all the elements that pass the test
57
57
00:02:39,360 --> 00:02:43,683
that we specified will make it into a new filtered array.
58
58
00:02:44,570 --> 00:02:48,770
Or in other words elements for which the condition is true
59
59
00:02:48,770 --> 00:02:50,540
will be included in a new array
60
60
00:02:50,540 --> 00:02:53,380
that the filter method returns.
61
61
00:02:53,380 --> 00:02:56,410
All other elements will get filtered out
62
62
00:02:56,410 --> 00:02:59,563
so they will not be included in the new array.
63
63
00:03:00,870 --> 00:03:04,360
And finally there is also the reduce method
64
64
00:03:04,360 --> 00:03:07,320
which we use to boil down all the elements
65
65
00:03:07,320 --> 00:03:11,490
of the original array into one single value.
66
66
00:03:11,490 --> 00:03:14,700
And an example of this can be to add all the elements
67
67
00:03:14,700 --> 00:03:16,340
of an array together.
68
68
00:03:16,340 --> 00:03:19,233
But we can also do many other interesting things.
69
69
00:03:20,130 --> 00:03:24,170
So for the example of adding up all numbers in the array,
70
70
00:03:24,170 --> 00:03:27,570
we need to specify an operation like this one
71
71
00:03:27,570 --> 00:03:30,003
where we have an accumulator variable.
72
72
00:03:30,880 --> 00:03:34,230
Then as the reduce method loops over the array,
73
73
00:03:34,230 --> 00:03:37,890
it keeps adding the current element onto the accumulator
74
74
00:03:37,890 --> 00:03:40,450
until at the end of the loop we have
75
75
00:03:40,450 --> 00:03:43,540
to total sum of all the elements.
76
76
00:03:43,540 --> 00:03:46,370
So you can imagine this as a snowball,
77
77
00:03:46,370 --> 00:03:48,300
it keeps getting bigger and bigger
78
78
00:03:48,300 --> 00:03:50,690
as it rolls down a hill.
79
79
00:03:50,690 --> 00:03:54,210
And so this is known as the snowball effect
80
80
00:03:54,210 --> 00:03:57,610
and reduce is pretty similar to that,
81
81
00:03:57,610 --> 00:03:58,630
okay?
82
82
00:03:58,630 --> 00:04:01,920
So keep that in mind as a nice analogy.
83
83
00:04:01,920 --> 00:04:04,670
Now we also said that this whole process
84
84
00:04:04,670 --> 00:04:09,320
has now reduced the original array to one single value
85
85
00:04:09,320 --> 00:04:12,900
which in this case is the sum of all the elements
86
86
00:04:12,900 --> 00:04:16,670
but it can of course be many other operations.
87
87
00:04:16,670 --> 00:04:20,380
Now it's this value that then actually gets returned
88
88
00:04:20,380 --> 00:04:23,420
from the reduce method in the end.
89
89
00:04:23,420 --> 00:04:26,290
So there is no new array in this case
90
90
00:04:26,290 --> 00:04:28,323
but only the reduced value.
91
91
00:04:29,180 --> 00:04:31,910
Now this probably sounds more complicated
92
92
00:04:31,910 --> 00:04:33,420
than it actually is.
93
93
00:04:33,420 --> 00:04:34,830
And so let's start to put it
94
94
00:04:34,830 --> 00:04:37,393
into practice right in the next video.
7906
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.