WEBVTT 1 00:00:01.280 --> 00:00:03.040 So we're getting closer 2 00:00:03.040 --> 00:00:04.940 to the end of this section 3 00:00:04.940 --> 00:00:09.370 but there are still a couple of array methods left to learn. 4 00:00:09.370 --> 00:00:10.460 And so in this lecture, 5 00:00:10.460 --> 00:00:13.823 we're gonna look at the some and the every methods. 6 00:00:15.740 --> 00:00:18.860 And to start learning about the some method, 7 00:00:18.860 --> 00:00:21.523 let's look back at the includes method 8 00:00:21.523 --> 00:00:23.023 that we studied earlier. 9 00:00:24.440 --> 00:00:29.440 So let's log to the console here movements.includes -130. 10 00:00:34.340 --> 00:00:37.730 And let's also log our movements array so we can see it 11 00:00:39.370 --> 00:00:44.370 and so indeed, the value of -140 that we're testing here 12 00:00:45.330 --> 00:00:46.990 is in the array 13 00:00:46.990 --> 00:00:49.340 and that's why we get true here. 14 00:00:49.340 --> 00:00:51.700 And so we can use the includes method 15 00:00:51.700 --> 00:00:55.720 to test if an array includes a certain value. 16 00:00:55.720 --> 00:01:00.720 Now, however, we can only really test for equality, right? 17 00:01:01.140 --> 00:01:04.790 So basically includes here returns true 18 00:01:04.790 --> 00:01:09.790 if any value in the array is exactly equal to -130, right? 19 00:01:11.650 --> 00:01:16.180 And so again, this is essentially testing for equality 20 00:01:16.180 --> 00:01:20.540 but what if we wanted to test for a condition instead? 21 00:01:20.540 --> 00:01:23.973 And so that's where this some method comes into play. 22 00:01:25.720 --> 00:01:29.090 So let's say that we would like to know 23 00:01:29.090 --> 00:01:32.700 if there has been any deposits on this account. 24 00:01:32.700 --> 00:01:34.530 So in other words, we want to know 25 00:01:34.530 --> 00:01:38.230 if there is any positive movement in this array. 26 00:01:38.230 --> 00:01:40.600 So any number above zero. 27 00:01:40.600 --> 00:01:42.163 So how would we do that? 28 00:01:44.020 --> 00:01:48.530 Well, we can say movements.some 29 00:01:48.530 --> 00:01:52.960 and now we can specify our condition here as always. 30 00:01:52.960 --> 00:01:55.200 So the same callback function, 31 00:01:55.200 --> 00:01:58.083 which has to return either true or false. 32 00:01:59.690 --> 00:02:04.690 And so a deposit is a movement greater than zero. 33 00:02:06.990 --> 00:02:09.000 So let's call this here anyDeposits 34 00:02:15.160 --> 00:02:16.873 and log it to a console. 35 00:02:19.780 --> 00:02:22.240 And so indeed here we get true. 36 00:02:22.240 --> 00:02:26.070 So we have, of course, more than one deposits here. 37 00:02:26.070 --> 00:02:27.290 But let's say we wanted to test 38 00:02:27.290 --> 00:02:30.903 if there is any deposit above 5,000. 39 00:02:32.970 --> 00:02:35.840 So easy enough, we can check if there is something 40 00:02:35.840 --> 00:02:39.880 above this value and then it is false. 41 00:02:39.880 --> 00:02:43.773 Or we can check if these is something above 1,500. 42 00:02:44.800 --> 00:02:48.510 And so now it's true because there is one movement here 43 00:02:48.510 --> 00:02:50.083 in that condition. 44 00:02:50.930 --> 00:02:53.250 And so you can see that these two methods here 45 00:02:53.250 --> 00:02:55.280 are kind of similar. 46 00:02:55.280 --> 00:02:58.783 The difference is that here it checks only for equality. 47 00:03:00.380 --> 00:03:05.380 So equality but here, we can specify a condition now, right? 48 00:03:08.210 --> 00:03:10.540 So basically, this one here, 49 00:03:10.540 --> 00:03:14.173 we could rewrite it like this. 50 00:03:15.340 --> 00:03:17.213 So let's log it to the console here. 51 00:03:18.730 --> 00:03:22.293 So movements.some, 52 00:03:27.690 --> 00:03:29.130 minus 130. 53 00:03:29.130 --> 00:03:31.310 So this would be exactly the same. 54 00:03:31.310 --> 00:03:35.200 And so that's why we also get true in this one. 55 00:03:35.200 --> 00:03:37.920 Now, for equality, this doesn't make much sense. 56 00:03:37.920 --> 00:03:40.670 We could then simply use the includes method 57 00:03:40.670 --> 00:03:45.033 but for the case we need a condition like this one here, 58 00:03:46.190 --> 00:03:48.100 or really this one, 59 00:03:48.100 --> 00:03:52.440 then the some method is perfect for that, okay? 60 00:03:52.440 --> 00:03:55.700 And probably if I would have named this method, 61 00:03:55.700 --> 00:03:57.883 I would have called it like any. 62 00:03:59.140 --> 00:04:01.410 But of course, that's not the real name 63 00:04:01.410 --> 00:04:03.060 but that's really what it does. 64 00:04:03.060 --> 00:04:05.830 And so if there is any value 65 00:04:05.830 --> 00:04:07.950 for which this condition is true, 66 00:04:07.950 --> 00:04:10.810 then the some method will return true. 67 00:04:10.810 --> 00:04:15.220 Now, right and now let's actually use this some method 68 00:04:15.220 --> 00:04:18.360 to implement our missing functionality, 69 00:04:18.360 --> 00:04:21.023 which is to request a loan to the bank. 70 00:04:22.640 --> 00:04:27.240 So we will do that right here 71 00:04:27.240 --> 00:04:32.240 between the transfer button and the close button. 72 00:04:32.390 --> 00:04:34.560 And the some method will become helpful 73 00:04:34.560 --> 00:04:36.340 for this loan feature 74 00:04:36.340 --> 00:04:38.020 because our bank has a rule, 75 00:04:38.020 --> 00:04:40.450 which says that it only grants a loan 76 00:04:40.450 --> 00:04:43.170 if there at least one deposit 77 00:04:43.170 --> 00:04:47.590 with at least 10% of the requested loan amount. 78 00:04:47.590 --> 00:04:49.260 So that sounds complicated 79 00:04:49.260 --> 00:04:52.240 but we will implement this here in a second. 80 00:04:52.240 --> 00:04:55.283 So btnLoan.addEventListener click 81 00:04:59.860 --> 00:05:02.963 and this is now always the same as you can see. 82 00:05:05.770 --> 00:05:09.930 So starting by preventing the default action, 83 00:05:09.930 --> 00:05:12.690 so that's always gonna be the first thing 84 00:05:12.690 --> 00:05:16.560 and then let's have a look here at the user interface 85 00:05:16.560 --> 00:05:19.303 because right now it is hidden. 86 00:05:20.520 --> 00:05:23.163 So you see that here we only have this one field. 87 00:05:24.400 --> 00:05:28.297 And this field is called the inputLoanAmount, okay? 88 00:05:30.432 --> 00:05:34.010 So inputLoanAmount, so that's the element 89 00:05:34.010 --> 00:05:36.373 with this long class name. 90 00:05:37.440 --> 00:05:39.493 So let's copy that actually. 91 00:05:43.360 --> 00:05:46.253 And so let's start by actually getting that amount here. 92 00:05:49.420 --> 00:05:50.950 So we already know we will have 93 00:05:50.950 --> 00:05:54.647 to convert this input .value, okay? 94 00:05:58.090 --> 00:06:02.010 And now we need to create our condition here. 95 00:06:02.010 --> 00:06:03.040 So first of all, 96 00:06:03.040 --> 00:06:07.660 that amount should be greater than zero, okay? 97 00:06:07.660 --> 00:06:10.843 And now let's take a look here at our flow chart again. 98 00:06:11.950 --> 00:06:14.400 So this is what I was saying earlier. 99 00:06:14.400 --> 00:06:18.670 The loan is only granted if there is any deposit 100 00:06:18.670 --> 00:06:23.573 that's greater or equal 10% of the requested amount of loan. 101 00:06:26.280 --> 00:06:27.113 Now, right? 102 00:06:28.400 --> 00:06:30.800 So here we need now our second condition, 103 00:06:30.800 --> 00:06:33.100 which translates that. 104 00:06:33.100 --> 00:06:37.350 And so whenever we see or hear the word any, 105 00:06:37.350 --> 00:06:40.550 we can already know that it's probably a good use case 106 00:06:40.550 --> 00:06:42.990 for the some method. 107 00:06:42.990 --> 00:06:44.283 So let me show it to you. 108 00:06:45.150 --> 00:06:47.740 So as always, we get the movements 109 00:06:47.740 --> 00:06:52.220 from the currentAccount object .movements 110 00:06:52.220 --> 00:06:55.193 and now on there, we call the some method. 111 00:06:56.040 --> 00:06:59.060 So we already know by now 112 00:06:59.060 --> 00:07:02.960 how this callback function feature here works. 113 00:07:02.960 --> 00:07:04.700 So we get the current movement 114 00:07:04.700 --> 00:07:06.890 in the current iteration 115 00:07:06.890 --> 00:07:10.530 and now here the condition is that movement needs 116 00:07:10.530 --> 00:07:15.113 to be greater or equal than 10% of the amount. 117 00:07:16.400 --> 00:07:20.150 So that's the amount divided by 10. 118 00:07:20.150 --> 00:07:21.530 Okay? 119 00:07:21.530 --> 00:07:24.330 Or we could also do times 0.1 120 00:07:25.440 --> 00:07:27.890 and so that's exactly the same thing. 121 00:07:27.890 --> 00:07:31.290 So 0.1 here stands for 10% 122 00:07:31.290 --> 00:07:33.353 and so let's keep it like this. 123 00:07:35.310 --> 00:07:38.760 Give it a save so that it looks nicer 124 00:07:38.760 --> 00:07:42.840 and so yeah, if at least one of the elements 125 00:07:42.840 --> 00:07:46.030 in the movements array has this condition, 126 00:07:46.030 --> 00:07:50.950 so it's true, so basically it's greater than 10% 127 00:07:50.950 --> 00:07:52.690 of the requested amount, 128 00:07:52.690 --> 00:07:56.040 then all of this here will become true. 129 00:07:56.040 --> 00:07:58.380 And so the some method is perfect 130 00:07:58.380 --> 00:08:01.100 to be used in a condition like this. 131 00:08:01.100 --> 00:08:05.230 So when we need to test for something, okay? 132 00:08:05.230 --> 00:08:07.450 So in case this is true. 133 00:08:07.450 --> 00:08:10.163 Oh and I closed our flow chart again. 134 00:08:12.320 --> 00:08:14.670 So in case this is true, 135 00:08:14.670 --> 00:08:18.320 then add a positive movement to the current data 136 00:08:18.320 --> 00:08:19.997 and update the UI. 137 00:08:21.830 --> 00:08:23.423 So that's easy enough. 138 00:08:25.120 --> 00:08:27.320 So add the movement here. 139 00:08:30.671 --> 00:08:35.671 So currentAccount.movements.push 140 00:08:36.020 --> 00:08:39.293 and then of course, the amount that was requested. 141 00:08:40.810 --> 00:08:43.081 And then update the UI 142 00:08:43.081 --> 00:08:46.060 and for that, we already created our nice function, 143 00:08:46.060 --> 00:08:49.180 which does all of the functionalities in one go. 144 00:08:49.180 --> 00:08:50.780 And so that's updateUI 145 00:08:52.110 --> 00:08:56.020 and we simply pass the currentAccount into it. 146 00:08:56.020 --> 00:08:57.230 Okay. 147 00:08:57.230 --> 00:08:58.639 And that's it. 148 00:08:58.639 --> 00:09:03.137 Finally, let's also then clear the input field. 149 00:09:06.520 --> 00:09:10.363 So that value equals empty value. 150 00:09:11.590 --> 00:09:16.273 So we did that here and here and also up here. 151 00:09:20.580 --> 00:09:21.413 Okay. 152 00:09:22.660 --> 00:09:23.683 Let's log in. 153 00:09:27.230 --> 00:09:30.850 And so you see, my deposits, my largest deposit 154 00:09:30.850 --> 00:09:35.850 is 3,000 and so the loan that I can request 155 00:09:36.729 --> 00:09:41.120 can be maximum 30,000, okay? 156 00:09:41.120 --> 00:09:44.313 Because 3,000 here is 10% of that. 157 00:09:45.550 --> 00:09:47.720 So let me try something bigger. 158 00:09:47.720 --> 00:09:49.373 So something really huge. 159 00:09:51.200 --> 00:09:52.903 And so now nothing happened. 160 00:09:53.750 --> 00:09:55.330 And again in the real world, 161 00:09:55.330 --> 00:09:58.240 we would then probably get some error message 162 00:09:58.240 --> 00:10:01.000 somewhere here at the top or so 163 00:10:01.000 --> 00:10:04.010 but in this case, we're not gonna do that. 164 00:10:04.010 --> 00:10:06.560 Let's just try 5,000 now. 165 00:10:06.560 --> 00:10:10.990 And so now indeed it appeared here in our movements 166 00:10:10.990 --> 00:10:13.700 and also as you see, our balance was updated 167 00:10:14.820 --> 00:10:17.707 and also here our total income. 168 00:10:19.840 --> 00:10:20.800 Okay? 169 00:10:20.800 --> 00:10:24.080 Now let's request 50,000 170 00:10:25.900 --> 00:10:28.220 and so with this, you can now actually cheat. 171 00:10:28.220 --> 00:10:31.343 You can always create a little bit of a larger number. 172 00:10:32.350 --> 00:10:34.680 So now I can even request half a million 173 00:10:36.160 --> 00:10:39.200 and so that's cheating our algorithm, 174 00:10:39.200 --> 00:10:41.850 which is way too simple. 175 00:10:41.850 --> 00:10:45.410 But of course, this is just for testing purposes. 176 00:10:45.410 --> 00:10:46.243 All right. 177 00:10:47.410 --> 00:10:50.590 So that's how the some method works. 178 00:10:50.590 --> 00:10:52.203 I hope that makes sense. 179 00:10:53.370 --> 00:10:55.560 And so let's now actually go back here 180 00:10:55.560 --> 00:10:59.140 and talk about the close cousin of the some method, 181 00:10:59.140 --> 00:11:02.313 which is the every method. 182 00:11:05.310 --> 00:11:08.090 So let's write here some 183 00:11:10.860 --> 00:11:12.400 and every. 184 00:11:12.400 --> 00:11:15.510 So again, the every method is pretty similar 185 00:11:15.510 --> 00:11:17.070 to the some method 186 00:11:17.070 --> 00:11:20.240 but as you might guess, the difference between them 187 00:11:20.240 --> 00:11:23.000 is that every only returns true 188 00:11:23.000 --> 00:11:26.893 if all of the elements in the array satisfy the condition 189 00:11:26.893 --> 00:11:28.610 that we pass in. 190 00:11:28.610 --> 00:11:32.550 So in other words, if every element passes the test 191 00:11:32.550 --> 00:11:34.270 in our callback function, 192 00:11:34.270 --> 00:11:37.210 only then the every method returns true 193 00:11:37.210 --> 00:11:40.440 and that's why the method is called every 194 00:11:40.440 --> 00:11:42.160 in the first place. 195 00:11:42.160 --> 00:11:44.073 So let's test it out here now. 196 00:11:45.340 --> 00:11:49.930 So let's log to the console movements.every 197 00:11:52.740 --> 00:11:55.090 and then with the same condition. 198 00:11:55.090 --> 00:11:57.120 So let's essentially check 199 00:11:57.120 --> 00:12:00.590 if all of our movements here are deposits 200 00:12:01.600 --> 00:12:04.010 and well, indeed, they are not 201 00:12:04.010 --> 00:12:06.070 and that's why we get false. 202 00:12:06.070 --> 00:12:08.440 However, we do have one account, 203 00:12:08.440 --> 00:12:10.363 which only has positive moments. 204 00:12:12.940 --> 00:12:15.430 So let me show that to you. 205 00:12:15.430 --> 00:12:17.360 That's account4. 206 00:12:17.360 --> 00:12:21.490 So account4, all the movements are positive. 207 00:12:21.490 --> 00:12:23.443 So let's check it out now. 208 00:12:26.600 --> 00:12:29.880 So account4 and then the same condition 209 00:12:32.400 --> 00:12:34.240 and every is not a function 210 00:12:34.240 --> 00:12:35.540 and that's, of course, 211 00:12:35.540 --> 00:12:38.253 because we are still missing the movements array. 212 00:12:40.060 --> 00:12:42.900 And now it is true, all right? 213 00:12:42.900 --> 00:12:46.530 And so that indeed proves that the every returns true 214 00:12:46.530 --> 00:12:50.330 if all the elements in the array satisfy this condition 215 00:12:50.330 --> 00:12:52.220 because in this movements array, 216 00:12:52.220 --> 00:12:57.170 all of the values are in fact above zero, okay? 217 00:12:57.170 --> 00:12:59.710 So that's how the every method works 218 00:12:59.710 --> 00:13:02.953 and I think it's quite straightforward, isn't it? 219 00:13:03.790 --> 00:13:06.560 And now to finish, there is now more cool thing 220 00:13:06.560 --> 00:13:08.190 that I want to show you. 221 00:13:08.190 --> 00:13:09.980 So up until this point, 222 00:13:09.980 --> 00:13:13.280 we have always written the callback function directly 223 00:13:13.280 --> 00:13:17.100 as an argument into our array methods, right? 224 00:13:17.100 --> 00:13:21.120 However, we could also write this function separately 225 00:13:21.120 --> 00:13:23.823 and then pass the function as a callback. 226 00:13:25.100 --> 00:13:26.260 So let's say 227 00:13:29.560 --> 00:13:30.890 separate callback 228 00:13:32.120 --> 00:13:34.143 and so we could do this. 229 00:13:35.170 --> 00:13:38.943 So let's call deposit to this function. 230 00:13:42.680 --> 00:13:43.810 All right? 231 00:13:43.810 --> 00:13:47.930 And so this function here is exactly the same as these ones 232 00:13:47.930 --> 00:13:49.250 but as I just said, 233 00:13:49.250 --> 00:13:53.580 there is no reason for them to being directly written here 234 00:13:53.580 --> 00:13:55.600 in all of these array methods. 235 00:13:55.600 --> 00:13:57.830 We could simply write them like this 236 00:13:57.830 --> 00:14:00.960 and then all we would have to do 237 00:14:00.960 --> 00:14:05.940 is to call movements.some, for example, 238 00:14:05.940 --> 00:14:09.040 and then deposits or deposit. 239 00:14:09.040 --> 00:14:11.250 And now we could reuse the same function 240 00:14:11.250 --> 00:14:13.590 for all kinds of different methods 241 00:14:13.590 --> 00:14:17.540 that require callbacks with a true/false condition. 242 00:14:17.540 --> 00:14:22.173 So that could be every or filter as well. 243 00:14:23.800 --> 00:14:25.340 Okay? 244 00:14:25.340 --> 00:14:29.960 And so here is the result of these three operations 245 00:14:29.960 --> 00:14:32.770 and so here we get the expected results. 246 00:14:32.770 --> 00:14:35.960 And all by reusing the same function. 247 00:14:35.960 --> 00:14:37.980 Then if we wanted to change the function, 248 00:14:37.980 --> 00:14:42.200 all we would have to do is to change it here in one place 249 00:14:42.200 --> 00:14:43.580 and then all the results 250 00:14:43.580 --> 00:14:46.253 would become different according to that. 251 00:14:47.810 --> 00:14:50.980 So in practice, that's something that we do sometimes 252 00:14:50.980 --> 00:14:54.970 because this is, of course, better for the DRY principle. 253 00:14:54.970 --> 00:14:56.850 So don't repeat yourself. 254 00:14:56.850 --> 00:15:01.400 That's always important and it is important here as well. 255 00:15:01.400 --> 00:15:05.280 But anyway, with this small detour that we did here, 256 00:15:05.280 --> 00:15:09.193 let's now move on to learning about two more array methods.