WEBVTT 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 line:15% So pause the video now for a minute, 83 00:04:48.380 --> 00:04:50.933 line:15% 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.