const - JS | lectureWorking With Arrays

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. The findIndex method works almost the same way as find. But as the name says, findIndex returns the index of the found element, not the element itself.

Let's see a great use case for findIndex. Let's consider the below accounts array.

const accounts = [
  {
    owner: 'Leon Craig',
    username: 'lc',
    pin: 114,
    loggedIn: false,
  },
  {
    owner: 'Ella Pena',
    username: 'ep',
    pin: 189,
    loggedIn: true,
  },
  {
    owner: 'Clarence Ingram',
    username: 'ci',
    pin: 149,
    loggedIn: false,
  },
];

Now let's say we have a bank application and a user wants to close an account. And to close an account the user needs to provide a username and a pin. By closing an account, we mean removing it from the accounts array. So, for example if Clarence Ingram decides to close her account, then the object will be deleted from the accounts array.

To delete an account from the accounts array, we need to use the splice method. And to use the splice method, we need to know the index of the account to be deleted. And in order to find the index of the account to be deleted, we need to use the findIndex method.

Let write our close account function. The first step will be to check the user's credentials to make sure that the entered credentials belongs to the currently logged in user.

let currentLoggedInUser = accounts.find((account) => account.loggedIn);
const closeAccount = function (username, pin) {
  if (currentLoggedInUser.username === username && currentLoggedInUser.pin === pin) {    // Start deleting the account  }};

Now that the credentials are verified, we need to find the index of the account to be deleted.

let currentLoggedInUser = accounts.find((account) => account.loggedIn);
console.log(`Currently Logged In User: ${currentLoggedInUser.owner}`);
const closeAccount = function (username, pin) {
  if (currentLoggedInUser.username === username && currentLoggedInUser.pin === pin) {
    const index = accounts.findIndex(      (account) => account.username === currentLoggedInUser.username    );    console.log(`Currently Logged In User Index: ${index}`);  }
};

closeAccount('ep', 189);

You can see that just like the find method, we passed in a callback function (also referred to as the testing function) in the findIndex method that loops over the entire array and returns a boolean value. And the findIndex method will then return the index of the first element in the array that matches the condition account.username === currentLoggedInUser.username

You might notice that it is actually similar to the indexOf method studied before. The big difference is that with the indexOf method, we can only search for a value that's in the array. On the other hand, with findIndex, we can create a complex condition like the one above, and of course, it doesn't have to be the equality operator. It can be anything that returns true or false

Alright! Now that the credentials are veriefied, and the index of the account to be deleted is found, all that's left is to pass the index of the account to be deleted to the splice method.

let currentLoggedInUser = accounts.find((account) => account.loggedIn);
console.log(`Currently Logged In User: ${currentLoggedInUser.owner}`);

const closeAccount = function (username, pin) {
  if (currentLoggedInUser.username === username && currentLoggedInUser.pin === pin) {
    const index = accounts.findIndex(
      (account) => account.username === currentLoggedInUser.username
    );
    console.log(`Currently Logged In User Index: ${index}`);

    accounts.splice(index, 1);
    // Set the currently logged in user to null
    currentLoggedInUser = null;
  }
}


console.log('Users BEFORE closeAccount()');
console.log(accounts);

closeAccount('ep', 189);

console.log('Users AFTER closeAccount()');
console.log(accounts);

console.log(`Currently Logged In User: `, currentLoggedInUser);

From the above log, you can see that we are now left with only two accounts in the accounts array. That is, the account of Ella Pena is no more.

To finish this lecture, note that both the find and findIndex methods also have access to the current index and current entire array.

accounts.find((currEl, currIdx, array) => {
  /* do something...*/
});
accounts.findIndex((currEl, currIdx, array) => {
  /* do something...*/
});

The second thing to note is that both the find and findIndex methods were added to JavaScript in ES6. So these methods won't work in older browsers.