1 00:00:01,420 --> 00:00:03,968 Now let's learn about the Filter Method. 2 00:00:03,968 --> 00:00:08,910 Which, as we learned before is used to filter for elements 3 00:00:08,910 --> 00:00:11,313 that satisfy a certain condition. 4 00:00:12,237 --> 00:00:16,620 And how do we specify such a condition? 5 00:00:16,620 --> 00:00:21,100 Well, you guessed it, we use a callback function again. 6 00:00:21,100 --> 00:00:25,533 So, let's again work with our movements. 7 00:00:25,533 --> 00:00:28,253 And so now the filter array. 8 00:00:29,160 --> 00:00:31,910 And once again I will start with a regular function. 9 00:00:31,910 --> 00:00:35,972 And just like the other callback functions like in the Map, 10 00:00:35,972 --> 00:00:39,330 and for each, this one also gets access 11 00:00:39,330 --> 00:00:43,457 to the current array element as well as the index 12 00:00:43,457 --> 00:00:45,610 and the entire array. 13 00:00:45,610 --> 00:00:48,004 But let's only work with the current element here, 14 00:00:48,004 --> 00:00:51,223 which in filter is usually all that we need. 15 00:00:51,223 --> 00:00:53,899 Okay, now what we want to do here 16 00:00:53,899 --> 00:00:56,871 is to create an array of the deposits. 17 00:00:56,871 --> 00:00:59,423 So let's actually write that. 18 00:01:01,408 --> 00:01:05,371 So deposits and deposits are only the movements 19 00:01:05,371 --> 00:01:07,107 that are above zero. 20 00:01:07,107 --> 00:01:09,745 So we already know that. Right? 21 00:01:09,745 --> 00:01:13,883 Let's indeed take a look at the movements here. 22 00:01:16,372 --> 00:01:18,264 So here they are. 23 00:01:18,264 --> 00:01:23,264 And so we want to filter out these negative values. 24 00:01:23,510 --> 00:01:26,740 And so that condition is so that only the values 25 00:01:26,740 --> 00:01:30,334 that has the condition will then make it into the new array. 26 00:01:30,334 --> 00:01:34,190 And passing that condition means that it's true. 27 00:01:34,190 --> 00:01:37,825 So, we will again return something here. 28 00:01:37,825 --> 00:01:42,264 And here, the trick is that we return a Boolean value. 29 00:01:42,264 --> 00:01:44,110 And so, in this case 30 00:01:44,110 --> 00:01:48,163 all we need to do is to say the current movement, 31 00:01:49,062 --> 00:01:52,055 greater than zero and that's it. 32 00:01:52,055 --> 00:01:54,535 And so now only the array elements, 33 00:01:54,535 --> 00:01:56,838 for which this condition is true 34 00:01:56,838 --> 00:01:59,851 will make it into the deposits array. 35 00:01:59,851 --> 00:02:03,919 All the other ones will simply get filtered out. 36 00:02:03,919 --> 00:02:08,463 So they will not be included in this deposits array. 37 00:02:10,228 --> 00:02:11,295 Okay. 38 00:02:11,295 --> 00:02:15,960 And in fact, we only get the positive values now. 39 00:02:15,960 --> 00:02:17,257 Beautiful. 40 00:02:17,257 --> 00:02:21,620 And that's actually it, that's really simple, right? 41 00:02:21,620 --> 00:02:24,610 So, just as I told you if you know how to use 42 00:02:24,610 --> 00:02:26,105 the callback function correctly 43 00:02:26,105 --> 00:02:28,736 and if you know how and why it works, 44 00:02:28,736 --> 00:02:32,913 then all of these methods, become really really simple. 45 00:02:33,830 --> 00:02:38,477 And once more, I also want to use a four of loop here again 46 00:02:38,477 --> 00:02:41,952 so that you can appreciate the difference. 47 00:02:41,952 --> 00:02:44,313 And that's very simple. 48 00:02:46,203 --> 00:02:49,765 So, we need of course the same condition. 49 00:02:49,765 --> 00:02:52,351 So if the current movement is greater than zero, 50 00:02:52,351 --> 00:02:56,416 then we want to push the current element into a new array. 51 00:02:56,416 --> 00:02:59,710 So we need to create that here deposits 52 00:03:00,770 --> 00:03:04,734 for and start again with an empty array. 53 00:03:04,734 --> 00:03:08,743 And so in this case, we simply push it there. 54 00:03:09,878 --> 00:03:13,325 So we push the current movement. 55 00:03:13,325 --> 00:03:16,497 And so let's take a look now. 56 00:03:16,497 --> 00:03:20,580 And, as expected we get the same result. 57 00:03:20,580 --> 00:03:24,990 And so you could again ask, what is the big difference here? 58 00:03:24,990 --> 00:03:26,530 Like, what's the big deal 59 00:03:26,530 --> 00:03:30,043 and why not just use the four loop for everything. 60 00:03:30,043 --> 00:03:34,360 And the reason for that is again the push that exists 61 00:03:34,360 --> 00:03:38,980 in JavaScript for using more functional code, like this. 62 00:03:38,980 --> 00:03:41,678 But there's also a more practical implication here. 63 00:03:41,678 --> 00:03:44,151 And that's because we can actually chain 64 00:03:44,151 --> 00:03:46,080 all of these methods together. 65 00:03:46,080 --> 00:03:49,930 So, basically use them all one after another 66 00:03:49,930 --> 00:03:52,271 to build a big final result. 67 00:03:52,271 --> 00:03:55,740 So, a bit similar in fact to what we did here 68 00:03:55,740 --> 00:03:58,325 in our application, right here. 69 00:03:58,325 --> 00:04:01,811 But here we mixed string methods with array methods, 70 00:04:01,811 --> 00:04:05,139 but later on we will do, like big chains, 71 00:04:05,139 --> 00:04:07,264 only with array methods 72 00:04:07,264 --> 00:04:12,264 and that would be completely impossible using the four loop. 73 00:04:12,372 --> 00:04:17,002 So, that's another big advantage of using the methods 74 00:04:17,002 --> 00:04:19,960 instead of the regular four loop. 75 00:04:19,960 --> 00:04:23,610 Now, anyway I have just another small challenge 76 00:04:23,610 --> 00:04:27,743 for you here which is to create an array of the withdrawals. 77 00:04:32,081 --> 00:04:35,083 So, withdrawals like this. 78 00:04:35,960 --> 00:04:39,020 So I want you to create this array without looking 79 00:04:39,020 --> 00:04:41,090 at the code we already wrote. 80 00:04:41,090 --> 00:04:43,740 And so the withdrawals should only include 81 00:04:43,740 --> 00:04:46,650 the negative numbers too. 82 00:04:46,650 --> 00:04:48,380 So pause the video now for a minute, 83 00:04:48,380 --> 00:04:50,933 and please try to write this code on your own. 84 00:04:52,530 --> 00:04:55,283 Okay, so hopefully you did that. 85 00:04:56,690 --> 00:05:00,902 And so, it is movements and again dot filter. 86 00:05:00,902 --> 00:05:03,482 And now I will use an arrow function here. 87 00:05:03,482 --> 00:05:07,090 So I will leave this one with the regular one 88 00:05:07,090 --> 00:05:08,563 and now an arrow function. 89 00:05:10,890 --> 00:05:15,862 Okay. And now, more of or less than zero, and that's it. 90 00:05:15,862 --> 00:05:18,991 This is our condition and never forget 91 00:05:18,991 --> 00:05:22,063 that this one is actually returned here. 92 00:05:23,760 --> 00:05:27,013 So again, it is like having return written here. 93 00:05:28,680 --> 00:05:31,310 And so this is why this works 94 00:05:32,481 --> 00:05:34,752 lets log it to the console 95 00:05:34,752 --> 00:05:39,400 and yeah, only the negative numbers remain now. 96 00:05:39,400 --> 00:05:43,780 All the positive ones get the result of false 97 00:05:43,780 --> 00:05:45,110 here in this condition. 98 00:05:45,110 --> 00:05:47,143 And so therefore, they were not included 99 00:05:47,143 --> 00:05:49,680 in the withdrawals array. 100 00:05:49,680 --> 00:05:54,012 And again, these callback function here also get access 101 00:05:54,012 --> 00:05:57,611 to the current index and the whole array. 102 00:05:57,611 --> 00:06:00,000 And I will just leave it here, 103 00:06:00,000 --> 00:06:05,000 but I never used these in my life ever in the Filter Method. 104 00:06:05,531 --> 00:06:07,961 Okay, so this was the second 105 00:06:07,961 --> 00:06:10,502 of the data transformation methods. 106 00:06:10,502 --> 00:06:13,480 So that's Map, Filter and Reduce. 107 00:06:13,480 --> 00:06:16,953 And so, in the next video we will then talk about Reduce.