WEBVTT 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.