Original subtitles

1 1

Now let's learn about the Filter Method. 2

2

Which, as we learned before is used to filter for elements 3

3

that satisfy a certain condition. 4

4

And how do we specify such a condition? 5

5

Well, you guessed it, we use a callback function again. 6

6

So, let's again work with our movements. 7

7

And so now the filter array. 8

8

And once again I will start with a regular function. 9

9

And just like the other callback functions like in the Map, 10

10

and for each, this one also gets access 11

11

to the current array element as well as the index 12

12

and the entire array. 13

13

But let's only work with the current element here, 14

14

which in filter is usually all that we need. 15

15

Okay, now what we want to do here 16

16

is to create an array of the deposits. 17

17

So let's actually write that. 18

18

So deposits and deposits are only the movements 19

19

that are above zero. 20

20

So we already know that. Right? 21

21

Let's indeed take a look at the movements here. 22

22

So here they are. 23

23

And so we want to filter out these negative values. 24

24

And so that condition is so that only the values 25

25

that has the condition will then make it into the new array. 26

26

And passing that condition means that it's true. 27

27

So, we will again return something here. 28

28

And here, the trick is that we return a Boolean value. 29

29

And so, in this case 30

30

all we need to do is to say the current movement, 31

31

greater than zero and that's it. 32

32

And so now only the array elements, 33

33

for which this condition is true 34

34

will make it into the deposits array. 35

35

All the other ones will simply get filtered out. 36

36

So they will not be included in this deposits array. 37

37

Okay. 38

38

And in fact, we only get the positive values now. 39

39

Beautiful. 40

40

And that's actually it, that's really simple, right? 41

41

So, just as I told you if you know how to use 42

42

the callback function correctly 43

43

and if you know how and why it works, 44

44

then all of these methods, become really really simple. 45

45

And once more, I also want to use a four of loop here again 46

46

so that you can appreciate the difference. 47

47

And that's very simple. 48

48

So, we need of course the same condition. 49

49

So if the current movement is greater than zero, 50

50

then we want to push the current element into a new array. 51

51

So we need to create that here deposits 52

52

for and start again with an empty array. 53

53

And so in this case, we simply push it there. 54

54

So we push the current movement. 55

55

And so let's take a look now. 56

56

And, as expected we get the same result. 57

57

And so you could again ask, what is the big difference here? 58

58

Like, what's the big deal 59

59

and why not just use the four loop for everything. 60

60

And the reason for that is again the push that exists 61

61

in JavaScript for using more functional code, like this. 62

62

But there's also a more practical implication here. 63

63

And that's because we can actually chain 64

64

all of these methods together. 65

65

So, basically use them all one after another 66

66

to build a big final result. 67

67

So, a bit similar in fact to what we did here 68

68

in our application, right here. 69

69

But here we mixed string methods with array methods, 70

70

but later on we will do, like big chains, 71

71

only with array methods 72

72

and that would be completely impossible using the four loop. 73

73

So, that's another big advantage of using the methods 74

74

instead of the regular four loop. 75

75

Now, anyway I have just another small challenge 76

76

for you here which is to create an array of the withdrawals. 77

77

So, withdrawals like this. 78

78

So I want you to create this array without looking 79

79

at the code we already wrote. 80

80

And so the withdrawals should only include 81

81

the negative numbers too. 82

82

So pause the video now for a minute, 83

83

and please try to write this code on your own. 84

84

Okay, so hopefully you did that. 85

85

And so, it is movements and again dot filter. 86

86

And now I will use an arrow function here. 87

87

So I will leave this one with the regular one 88

88

and now an arrow function. 89

89

Okay. And now, more of or less than zero, and that's it. 90

90

This is our condition and never forget 91

91

that this one is actually returned here. 92

92

So again, it is like having return written here. 93

93

And so this is why this works 94

94

lets log it to the console 95

95

and yeah, only the negative numbers remain now. 96

96

All the positive ones get the result of false 97

97

here in this condition. 98

98

And so therefore, they were not included 99

99

in the withdrawals array. 100

100

And again, these callback function here also get access 101

101

to the current index and the whole array. 102

102

And I will just leave it here, 103

103

but I never used these in my life ever in the Filter Method. 104

104

Okay, so this was the second 105

105

of the data transformation methods. 106

106

So that's Map, Filter and Reduce. 107

107

And so, in the next video we will then talk about Reduce.