Original subtitles

1 1

In JavaScript, 2

2

there are three big and important array methods 3

3

that we use all the time to perform data transformations. 4

4

So basically, 5

5

these are methods that we use 6

6

to create new arrays based 7

7

on transforming data from other arrays. 8

8

And in recent years, 9

9

these tools have become really popular and for good reasons 10

10

and therefore you'll see them everywhere you look 11

11

in Modern JavaScript. 12

12

And the tools I'm talking about are; map, filter and reduce. 13

13

So these are three array methods 14

14

and in this lecture, 15

15

I'm gonna give you a quick overview of them. 16

16

Then over the next couple of lectures, 17

17

we're gonna dive deep into these three methods 18

18

in practice so that we can use them 19

19

throughout the rest of the course. 20

20

First the map method is yet another method that we can use 21

21

to loop over arrays. 22

22

So, map is actually similar 23

23

to the forEach method that we studied before 24

24

but with the difference that map creates a brand new array 25

25

based on the original array. 26

26

So essentially the map method takes an array, 27

27

loops over that array 28

28

and in each alteration, 29

29

it applies a covic function 30

30

that we specify on our code 31

31

to the current array element. 32

32

So in this example we say that each element 33

33

shall be multiplied by two. 34

34

And with this covic in place, 35

35

the map method multiplies every single element by two 36

36

and puts it into a new array. 37

37

We say that it maps the values of the original array 38

38

to a new array and that's why this method is called map. 39

39

And it is extremely useful. 40

40

Usually way more useful than in forEach method 41

41

because forEach simply allows us to do some work 42

42

with each array element. 43

43

But map on the other hand, 44

44

builds us a brand new array 45

45

containing the results of applying an operation 46

46

to the original array, 47

47

all right? 48

48

And we will use the map method 49

49

in practice right in the next video. 50

50

Anyway, 51

51

next up we have the filter method, 52

52

which as the name says, is used to filter for elements 53

53

in the original array which satisfy a certain condition. 54

54

So in this example we are only looking 55

55

for elements greater than two. 56

56

So all the elements that pass the test 57

57

that we specified will make it into a new filtered array. 58

58

Or in other words elements for which the condition is true 59

59

will be included in a new array 60

60

that the filter method returns. 61

61

All other elements will get filtered out 62

62

so they will not be included in the new array. 63

63

And finally there is also the reduce method 64

64

which we use to boil down all the elements 65

65

of the original array into one single value. 66

66

And an example of this can be to add all the elements 67

67

of an array together. 68

68

But we can also do many other interesting things. 69

69

So for the example of adding up all numbers in the array, 70

70

we need to specify an operation like this one 71

71

where we have an accumulator variable. 72

72

Then as the reduce method loops over the array, 73

73

it keeps adding the current element onto the accumulator 74

74

until at the end of the loop we have 75

75

to total sum of all the elements. 76

76

So you can imagine this as a snowball, 77

77

it keeps getting bigger and bigger 78

78

as it rolls down a hill. 79

79

And so this is known as the snowball effect 80

80

and reduce is pretty similar to that, 81

81

okay? 82

82

So keep that in mind as a nice analogy. 83

83

Now we also said that this whole process 84

84

has now reduced the original array to one single value 85

85

which in this case is the sum of all the elements 86

86

but it can of course be many other operations. 87

87

Now it's this value that then actually gets returned 88

88

from the reduce method in the end. 89

89

So there is no new array in this case 90

90

but only the reduced value. 91

91

Now this probably sounds more complicated 92

92

than it actually is. 93

93

And so let's start to put it 94

94

into practice right in the next video.