Original subtitles

Welcome back, it's great to still have you here

in this project.

And now that we have a good grip on the find method,

let me introduce you to a close cousin of the find method,

which is the findIndex method.

And the the findIndex method works

almost the same way as find.

But as the name says, findIndex returns the index

of the found element and not the element itself.

So, let's see a great use case for findIndex

in our Application here,

which is the close account feature that we have here.

And in our Application here,

closing an account, means to basically just delete

that account object from the accounts array.

So from this one here, okay?

So for example, if Sarah decides to close her account,

then this account for will simply be deleted,

and that's it.

Now, to delete an element from an array,

we use the splice method, remember,

but for the splice method,

we need the index at which we want to delete,

and where could that index come from,

and you guessed it from the findIndex method.

So, let's first select this button here,

and attach an event handler to it.

And so that's the button close here.

So let's come down here to our event handlers,

now we have multiple,

and button, Close.addEventListener,

click, and then as always,

or function in which we need the event object,

so that we can call a preventDefault.

All right, let's just test,

if this connection works here,

let's login,

and now as we click this here, we get delete.

So that's great.

And now let's take a look at our flowchart here.

And so, yeah the first thing that we need to do,

is to check if the credentials are correct.

So basically, if the username that is inputted here,

is equal to the current user and the same for the pin.

So, that doesn't sound too hard, does it?

So actually, let me leave that for you as a challenge.

So just write this condition here to again,

check if both the user is correct and the pin.

All right, I hope you did that.

So let's first take a look at the element names

that we have up here.

And so that's inputCloseUsername and inputClosedPin.

So I hope you figured these names out here too.

And so let's now say,

inputCloseUsername.value,

needs to be exactly the same as the username

in the current account.

So currentAccount.username.

So this needs to be true,

and the same thing for the pin.

So that's inputClosePin.value,

and once again, converted to a real number.

And this one, also needs to be equal

to the currentAccount.Pin.

And now let's actually do the deletion itself here.

So as I already said, we are going to use the splice method

to delete the current account.

So let me actually start by writing that part.

So, we will take our accounts array

and splice it at a certain index,

which is the index that we're gonna calculate in a second,

and we will remove exactly one element, all right?

And then the splice method actually mutates

the underlying array itself,

and so there is no need to save

the result of this anywhere, all right?

And so now let's actually calculate that index

at which we want to delete.

So we take the accounts, and now instead of find,

we use findIndex,

and once again, this one takes a callback function,

which is very similar to all the other callback functions,

we have been using.

So it's gonna loop over the array essentially,

and in each iteration, we get access to the current account.

And then we want to find the one

where the account has the username,

equal to the currentAccount.username, all right?

And so let's then take a look at that index.

And for now, let's actually take out this part.

Okay, and we will then come back

and maybe explain this a little bit better.

So as I click this here without anything, nothing happens.

So just as we intended,

then with the correct user, and with a wrong pin,

also nothing happens.

And notice that here,

you cannot see the numbers I'm typing now,

because this is a different format in HTML.

But I'm still using the four ones, the 1111.

And now something should happen.

And indeed, we get to the index number of the JS account,

in the accounts array.

So let's take a look at that array here.

And indeed, the Jonas one is number zero, right?

Now, if we logged in here as Steven, STW, with 3333.

And now we need to confirm that here.

So STW again and 3333.

Hit enter and then the result should be down here,

and indeed, it is.

So that's element number two.

So zero, one and two,

so that is correct, and so or splice here

would now indeed delete the user.

Okay, so let's see here what we did in the findIndex.

So just like before, in find, we passed in a condition,

so something that will return either true or false.

And the findIndex method will then return the index

of the first element in the array

that matches this condition.

So for which this condition here returns true.

So again, similar to find, but it returns the index,

and not the element itself.

Now, you might notice that this is actually similar

to the indexOf method that we studied before.

So, indexOf,

and then here we can pass in some value, all right?

Now, the big difference here is that with indexOf,

we can only search for a value that is in the array.

So, if the array contains the 23, then it's true,

and if not, then it's false.

But on the other hand, with findIndex,

we can create a complex condition like this one,

and of course, it doesn't have to be

the equality operator here.

It can be anything that returns true or false, okay?

And here we can simply check

if the array contains this value or not,

and if so, return the indexOf it.

So both return an index number,

but this one here is a lot simpler.

And so now let's actually delete this element here.

So this current user, on the current account.

And now let's get back here to our flowchart,

which I closed for some reason.

And so, we just did this part.

Now, we also need to log out the user.

So that just means to hide the UI.

And so that's similar to what we did here,

where we showed the UI.

Now we want to set it back to zero.

So, down here.

So hide UI,

and here delete account,

Okay, and then, of course, as we reload the page,

as I said before, the user will then be back of course,

because we do not persist this data anywhere, all right?

Well, the UI is still there.

Oh, that's because we didn't change this here to zero.

But anyway, let's still take a look at the accounts object

in this moment.

And we see that we now only have three accounts left,

and one of Jonas is nowhere to be found.

So this means that it actually worked,

now we just need to fix this here and set it to zero.

And we also just like before,

I want to clear these fields here.

So that's the same as we did before.

So, similar to this one,

let me just copy it here.

And this one we can paste right here outside

of the IF statement,

and then just copy these two inputs here.

So close username and close pin.

This is set to zero.

And now, this should actually be complete.

So let's see.

Well, nothing happened.

So let's see here.

Oh, okay, this is a bug that I just introduced here.

So basically, before even reading the data from this field,

I'm already setting it back to empty here,

Okay, and so therefore of course, nothing can work.

So this needs to be after the IF-Else statement, all right?

But it's still a good thing

that these small bugs keep happening here.

So that I can fix them,

and show to you that everyone makes this kind of mistakes.

So let's try it again 1111.

And now it's gone.

And as I try to log in now as this user,

you see that nothing happens,

and we get undefined down here,

and that's because this user no longer exists now

in our accounts array.

Great, so one more feature implemented successfully.

Now, there's just a couple of things

I want you to note here,

both the find and findIndex methods

get access to also the current index,

and the current entire array.

So as always, besides the current element,

these other two values are also available.

But in practice, I never found these useful.

And second, the both the find and findIndex methods

were added to JavaScript in ESX.

And so they will not work in like super old browsers.

But don't worry, there is going to be a lecture

a little bit later on how to support

all of these old browsers.