1 00:00:00,786 --> 00:00:04,790 Welcome back, it's great to still have you here 2 00:00:04,790 --> 00:00:06,410 in this project. 3 00:00:06,410 --> 00:00:10,180 And now that we have a good grip on the find method, 4 00:00:10,180 --> 00:00:14,500 let me introduce you to a close cousin of the find method, 5 00:00:14,500 --> 00:00:17,263 which is the findIndex method. 6 00:00:19,260 --> 00:00:21,360 And the the findIndex method works 7 00:00:21,360 --> 00:00:24,020 almost the same way as find. 8 00:00:24,020 --> 00:00:28,200 But as the name says, findIndex returns the index 9 00:00:28,200 --> 00:00:32,690 of the found element and not the element itself. 10 00:00:32,690 --> 00:00:36,260 So, let's see a great use case for findIndex 11 00:00:36,260 --> 00:00:37,970 in our Application here, 12 00:00:37,970 --> 00:00:42,230 which is the close account feature that we have here. 13 00:00:42,230 --> 00:00:44,110 And in our Application here, 14 00:00:44,110 --> 00:00:47,520 closing an account, means to basically just delete 15 00:00:47,520 --> 00:00:51,580 that account object from the accounts array. 16 00:00:51,580 --> 00:00:55,510 So from this one here, okay? 17 00:00:55,510 --> 00:00:59,380 So for example, if Sarah decides to close her account, 18 00:00:59,380 --> 00:01:02,330 then this account for will simply be deleted, 19 00:01:02,330 --> 00:01:03,900 and that's it. 20 00:01:03,900 --> 00:01:06,760 Now, to delete an element from an array, 21 00:01:06,760 --> 00:01:10,150 we use the splice method, remember, 22 00:01:10,150 --> 00:01:12,210 but for the splice method, 23 00:01:12,210 --> 00:01:15,850 we need the index at which we want to delete, 24 00:01:15,850 --> 00:01:18,590 and where could that index come from, 25 00:01:18,590 --> 00:01:22,930 and you guessed it from the findIndex method. 26 00:01:22,930 --> 00:01:26,630 So, let's first select this button here, 27 00:01:26,630 --> 00:01:29,430 and attach an event handler to it. 28 00:01:29,430 --> 00:01:32,313 And so that's the button close here. 29 00:01:34,710 --> 00:01:37,620 So let's come down here to our event handlers, 30 00:01:37,620 --> 00:01:38,893 now we have multiple, 31 00:01:41,930 --> 00:01:46,373 and button, Close.addEventListener, 32 00:01:47,210 --> 00:01:50,450 click, and then as always, 33 00:01:50,450 --> 00:01:55,450 or function in which we need the event object, 34 00:01:55,840 --> 00:01:59,890 so that we can call a preventDefault. 35 00:01:59,890 --> 00:02:02,253 All right, let's just test, 36 00:02:03,220 --> 00:02:04,913 if this connection works here, 37 00:02:06,340 --> 00:02:07,443 let's login, 38 00:02:10,248 --> 00:02:13,323 and now as we click this here, we get delete. 39 00:02:14,420 --> 00:02:15,780 So that's great. 40 00:02:15,780 --> 00:02:18,553 And now let's take a look at our flowchart here. 41 00:02:19,850 --> 00:02:23,120 And so, yeah the first thing that we need to do, 42 00:02:23,120 --> 00:02:26,480 is to check if the credentials are correct. 43 00:02:26,480 --> 00:02:30,030 So basically, if the username that is inputted here, 44 00:02:30,030 --> 00:02:33,983 is equal to the current user and the same for the pin. 45 00:02:35,440 --> 00:02:39,320 So, that doesn't sound too hard, does it? 46 00:02:39,320 --> 00:02:42,890 So actually, let me leave that for you as a challenge. 47 00:02:42,890 --> 00:02:46,540 So just write this condition here to again, 48 00:02:46,540 --> 00:02:50,063 check if both the user is correct and the pin. 49 00:02:53,340 --> 00:02:56,240 All right, I hope you did that. 50 00:02:56,240 --> 00:02:59,050 So let's first take a look at the element names 51 00:02:59,050 --> 00:03:01,150 that we have up here. 52 00:03:01,150 --> 00:03:04,683 And so that's inputCloseUsername and inputClosedPin. 53 00:03:06,670 --> 00:03:10,493 So I hope you figured these names out here too. 54 00:03:12,520 --> 00:03:13,923 And so let's now say, 55 00:03:15,248 --> 00:03:17,331 inputCloseUsername.value, 56 00:03:21,610 --> 00:03:25,130 needs to be exactly the same as the username 57 00:03:25,130 --> 00:03:27,060 in the current account. 58 00:03:27,060 --> 00:03:31,080 So currentAccount.username. 59 00:03:31,080 --> 00:03:33,040 So this needs to be true, 60 00:03:33,040 --> 00:03:35,053 and the same thing for the pin. 61 00:03:36,230 --> 00:03:41,010 So that's inputClosePin.value, 62 00:03:41,010 --> 00:03:44,233 and once again, converted to a real number. 63 00:03:48,290 --> 00:03:51,490 And this one, also needs to be equal 64 00:03:51,490 --> 00:03:54,773 to the currentAccount.Pin. 65 00:03:57,400 --> 00:04:01,750 And now let's actually do the deletion itself here. 66 00:04:01,750 --> 00:04:05,760 So as I already said, we are going to use the splice method 67 00:04:05,760 --> 00:04:08,370 to delete the current account. 68 00:04:08,370 --> 00:04:11,053 So let me actually start by writing that part. 69 00:04:13,060 --> 00:04:17,240 So, we will take our accounts array 70 00:04:17,240 --> 00:04:20,490 and splice it at a certain index, 71 00:04:20,490 --> 00:04:24,010 which is the index that we're gonna calculate in a second, 72 00:04:24,010 --> 00:04:28,390 and we will remove exactly one element, all right? 73 00:04:28,390 --> 00:04:31,290 And then the splice method actually mutates 74 00:04:31,290 --> 00:04:33,400 the underlying array itself, 75 00:04:33,400 --> 00:04:35,290 and so there is no need to save 76 00:04:35,290 --> 00:04:38,370 the result of this anywhere, all right? 77 00:04:39,290 --> 00:04:42,870 And so now let's actually calculate that index 78 00:04:42,870 --> 00:04:44,773 at which we want to delete. 79 00:04:46,450 --> 00:04:51,370 So we take the accounts, and now instead of find, 80 00:04:51,370 --> 00:04:52,857 we use findIndex, 81 00:04:54,230 --> 00:04:57,460 and once again, this one takes a callback function, 82 00:04:57,460 --> 00:05:00,380 which is very similar to all the other callback functions, 83 00:05:00,380 --> 00:05:01,890 we have been using. 84 00:05:01,890 --> 00:05:05,010 So it's gonna loop over the array essentially, 85 00:05:05,010 --> 00:05:08,750 and in each iteration, we get access to the current account. 86 00:05:08,750 --> 00:05:11,040 And then we want to find the one 87 00:05:11,040 --> 00:05:15,453 where the account has the username, 88 00:05:16,950 --> 00:05:21,950 equal to the currentAccount.username, all right? 89 00:05:25,170 --> 00:05:28,753 And so let's then take a look at that index. 90 00:05:31,570 --> 00:05:34,333 And for now, let's actually take out this part. 91 00:05:37,020 --> 00:05:40,250 Okay, and we will then come back 92 00:05:40,250 --> 00:05:42,843 and maybe explain this a little bit better. 93 00:05:44,420 --> 00:05:49,100 So as I click this here without anything, nothing happens. 94 00:05:49,100 --> 00:05:51,250 So just as we intended, 95 00:05:51,250 --> 00:05:55,667 then with the correct user, and with a wrong pin, 96 00:05:57,290 --> 00:05:59,240 also nothing happens. 97 00:05:59,240 --> 00:06:00,300 And notice that here, 98 00:06:00,300 --> 00:06:03,170 you cannot see the numbers I'm typing now, 99 00:06:03,170 --> 00:06:07,230 because this is a different format in HTML. 100 00:06:07,230 --> 00:06:10,530 But I'm still using the four ones, the 1111. 101 00:06:10,530 --> 00:06:12,253 And now something should happen. 102 00:06:13,130 --> 00:06:17,283 And indeed, we get to the index number of the JS account, 103 00:06:18,210 --> 00:06:19,373 in the accounts array. 104 00:06:20,240 --> 00:06:23,253 So let's take a look at that array here. 105 00:06:25,700 --> 00:06:30,700 And indeed, the Jonas one is number zero, right? 106 00:06:31,000 --> 00:06:35,970 Now, if we logged in here as Steven, STW, with 3333. 107 00:06:40,080 --> 00:06:42,480 And now we need to confirm that here. 108 00:06:42,480 --> 00:06:45,363 So STW again and 3333. 109 00:06:47,130 --> 00:06:52,040 Hit enter and then the result should be down here, 110 00:06:52,040 --> 00:06:53,920 and indeed, it is. 111 00:06:53,920 --> 00:06:56,190 So that's element number two. 112 00:06:56,190 --> 00:06:59,040 So zero, one and two, 113 00:06:59,040 --> 00:07:02,300 so that is correct, and so or splice here 114 00:07:02,300 --> 00:07:05,600 would now indeed delete the user. 115 00:07:05,600 --> 00:07:10,350 Okay, so let's see here what we did in the findIndex. 116 00:07:10,350 --> 00:07:14,620 So just like before, in find, we passed in a condition, 117 00:07:14,620 --> 00:07:18,930 so something that will return either true or false. 118 00:07:18,930 --> 00:07:22,230 And the findIndex method will then return the index 119 00:07:22,230 --> 00:07:24,430 of the first element in the array 120 00:07:24,430 --> 00:07:26,550 that matches this condition. 121 00:07:26,550 --> 00:07:30,220 So for which this condition here returns true. 122 00:07:30,220 --> 00:07:34,670 So again, similar to find, but it returns the index, 123 00:07:34,670 --> 00:07:36,823 and not the element itself. 124 00:07:37,730 --> 00:07:40,630 Now, you might notice that this is actually similar 125 00:07:40,630 --> 00:07:44,880 to the indexOf method that we studied before. 126 00:07:44,880 --> 00:07:46,323 So, indexOf, 127 00:07:48,260 --> 00:07:52,680 and then here we can pass in some value, all right? 128 00:07:52,680 --> 00:07:56,120 Now, the big difference here is that with indexOf, 129 00:07:56,120 --> 00:07:59,460 we can only search for a value that is in the array. 130 00:07:59,460 --> 00:08:03,480 So, if the array contains the 23, then it's true, 131 00:08:03,480 --> 00:08:06,010 and if not, then it's false. 132 00:08:06,010 --> 00:08:08,320 But on the other hand, with findIndex, 133 00:08:08,320 --> 00:08:12,040 we can create a complex condition like this one, 134 00:08:12,040 --> 00:08:14,080 and of course, it doesn't have to be 135 00:08:14,080 --> 00:08:15,860 the equality operator here. 136 00:08:15,860 --> 00:08:20,467 It can be anything that returns true or false, okay? 137 00:08:20,467 --> 00:08:22,800 And here we can simply check 138 00:08:22,800 --> 00:08:25,390 if the array contains this value or not, 139 00:08:25,390 --> 00:08:27,890 and if so, return the indexOf it. 140 00:08:27,890 --> 00:08:30,010 So both return an index number, 141 00:08:30,010 --> 00:08:32,853 but this one here is a lot simpler. 142 00:08:34,140 --> 00:08:38,640 And so now let's actually delete this element here. 143 00:08:38,640 --> 00:08:43,050 So this current user, on the current account. 144 00:08:43,050 --> 00:08:46,010 And now let's get back here to our flowchart, 145 00:08:46,010 --> 00:08:48,023 which I closed for some reason. 146 00:08:48,950 --> 00:08:51,360 And so, we just did this part. 147 00:08:51,360 --> 00:08:53,993 Now, we also need to log out the user. 148 00:08:54,880 --> 00:08:57,163 So that just means to hide the UI. 149 00:08:58,200 --> 00:09:00,470 And so that's similar to what we did here, 150 00:09:00,470 --> 00:09:03,323 where we showed the UI. 151 00:09:04,170 --> 00:09:06,363 Now we want to set it back to zero. 152 00:09:07,960 --> 00:09:10,163 So, down here. 153 00:09:12,440 --> 00:09:13,553 So hide UI, 154 00:09:15,319 --> 00:09:17,600 and here delete account, 155 00:09:20,910 --> 00:09:23,973 Okay, and then, of course, as we reload the page, 156 00:09:25,400 --> 00:09:28,940 as I said before, the user will then be back of course, 157 00:09:28,940 --> 00:09:33,940 because we do not persist this data anywhere, all right? 158 00:09:35,810 --> 00:09:38,770 Well, the UI is still there. 159 00:09:38,770 --> 00:09:42,690 Oh, that's because we didn't change this here to zero. 160 00:09:42,690 --> 00:09:46,960 But anyway, let's still take a look at the accounts object 161 00:09:46,960 --> 00:09:48,053 in this moment. 162 00:09:49,550 --> 00:09:52,870 And we see that we now only have three accounts left, 163 00:09:52,870 --> 00:09:56,283 and one of Jonas is nowhere to be found. 164 00:09:57,290 --> 00:09:59,850 So this means that it actually worked, 165 00:09:59,850 --> 00:10:03,540 now we just need to fix this here and set it to zero. 166 00:10:03,540 --> 00:10:05,600 And we also just like before, 167 00:10:05,600 --> 00:10:07,393 I want to clear these fields here. 168 00:10:08,630 --> 00:10:11,283 So that's the same as we did before. 169 00:10:12,300 --> 00:10:15,390 So, similar to this one, 170 00:10:15,390 --> 00:10:16,640 let me just copy it here. 171 00:10:19,063 --> 00:10:21,710 And this one we can paste right here outside 172 00:10:21,710 --> 00:10:22,963 of the IF statement, 173 00:10:23,860 --> 00:10:28,440 and then just copy these two inputs here. 174 00:10:28,440 --> 00:10:32,083 So close username and close pin. 175 00:10:34,280 --> 00:10:35,690 This is set to zero. 176 00:10:35,690 --> 00:10:39,213 And now, this should actually be complete. 177 00:10:41,530 --> 00:10:42,713 So let's see. 178 00:10:45,610 --> 00:10:46,853 Well, nothing happened. 179 00:10:48,890 --> 00:10:50,053 So let's see here. 180 00:10:51,410 --> 00:10:56,410 Oh, okay, this is a bug that I just introduced here. 181 00:10:56,770 --> 00:11:01,100 So basically, before even reading the data from this field, 182 00:11:01,100 --> 00:11:04,700 I'm already setting it back to empty here, 183 00:11:04,700 --> 00:11:08,390 Okay, and so therefore of course, nothing can work. 184 00:11:08,390 --> 00:11:13,070 So this needs to be after the IF-Else statement, all right? 185 00:11:14,460 --> 00:11:15,770 But it's still a good thing 186 00:11:15,770 --> 00:11:18,690 that these small bugs keep happening here. 187 00:11:18,690 --> 00:11:20,640 So that I can fix them, 188 00:11:20,640 --> 00:11:24,173 and show to you that everyone makes this kind of mistakes. 189 00:11:25,320 --> 00:11:27,913 So let's try it again 1111. 190 00:11:29,130 --> 00:11:30,883 And now it's gone. 191 00:11:31,990 --> 00:11:34,763 And as I try to log in now as this user, 192 00:11:37,130 --> 00:11:39,130 you see that nothing happens, 193 00:11:39,130 --> 00:11:41,450 and we get undefined down here, 194 00:11:41,450 --> 00:11:44,700 and that's because this user no longer exists now 195 00:11:44,700 --> 00:11:47,210 in our accounts array. 196 00:11:47,210 --> 00:11:51,393 Great, so one more feature implemented successfully. 197 00:11:52,350 --> 00:11:54,450 Now, there's just a couple of things 198 00:11:54,450 --> 00:11:56,340 I want you to note here, 199 00:11:56,340 --> 00:11:59,550 both the find and findIndex methods 200 00:11:59,550 --> 00:12:02,260 get access to also the current index, 201 00:12:02,260 --> 00:12:04,660 and the current entire array. 202 00:12:04,660 --> 00:12:07,300 So as always, besides the current element, 203 00:12:07,300 --> 00:12:10,180 these other two values are also available. 204 00:12:10,180 --> 00:12:14,140 But in practice, I never found these useful. 205 00:12:14,140 --> 00:12:18,640 And second, the both the find and findIndex methods 206 00:12:18,640 --> 00:12:21,720 were added to JavaScript in ESX. 207 00:12:21,720 --> 00:12:26,330 And so they will not work in like super old browsers. 208 00:12:26,330 --> 00:12:28,430 But don't worry, there is going to be a lecture 209 00:12:28,430 --> 00:12:30,830 a little bit later on how to support 210 00:12:30,830 --> 00:12:32,443 all of these old browsers.