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.