DEV Community

Nedy Udombat
Nedy Udombat

Posted on • Updated on

Understanding Javascript Array Series XII - Array Loops & Iteration Part IX

In the previous article, I talked about iterating over arrays using the Array.find() array method. You can check it out below:

Today, I will talk about using array.findIndex() to iterate over arrays.

Array.findIndex()

This method is similar to the Array.find() in the last article. It is used to find the first element in an array that meets a particular criterion and returns its position(index) in the array.

The difference between Array.find() and Array.findIndex() is that the former returns the first item in the array that meets a specified criterion while the latter returns the postion(index) of that element in the given array.

// syntax
arr.findIndex(callback([currentValue], [arrayIndex], [arr]));

[currentValue]: This is the current item in the array that is being processed. After the procession, the current value becomes the value of the next element in the array.

[arrayIndex]: This is the index of the current value in the array. This also changes after the current value has been processed.

[arr]: This is the array being iterated over.

[callback]: This is basically a function to be performed on each element of the array. It accepts the first three items (currentValue, index, and array) as arguments.

Let's take a look at the examples from yesterday:

  • Find the first even number the given array [1, 3, 5, 6, 7, 8, 9] and its position:
// index     0  1  2  3  4  5  6 
const arr = [1, 3, 5, 6, 7, 8, 9];

// Array.find returns the element
const even = arr.find(num => num%2 === 0);
console.log(even); //6

// Array.findIndex returns the elements position in the array.
const evenIndex = arr.findIndex(num => num%2 === 0);
console.log(evenIndex); //3
  • Find the position of the first person in this array that is old enough to buy a car(18):
  // array
  const playerArr = [
    { name: "Soji", age: 8},
    { name: "Naza", age: 15},
    { name: "Nedy", age: 22},
    { name: "Ezekiel", age: 17},
    { name: "LII", age: 50},
  ]

  const firstEligibleCandidate = playerArr.findIndex(player => player.age > 18);
  console.log(firstEligibleCandidate); //2

Conclusion

Array.findIndex() is great when you want to get the position of the first element of an array that meets a particular criterion. In a situation where you want to get the element itself, we can use the Array.find() method. I wrote about it here.

Got any other instances for the use of the Array.findIndex() function? Please do well to share it in the comment section.

That's all for today, tomorrow we will talk about another set of functions used in array Iteration.

Here is the link to the other articles on this Array series written by me:

Got any question, addition or correction? Please leave a comment.

Thank you for reading. 👍

Top comments (11)

Collapse
 
chimexi_42 profile image
Chima Chidera Okoro

Is there any difference between the find and filter method?

Collapse
 
nedyudombat profile image
Nedy Udombat

Yes, the find method looks for the first element that first a particular criterion while the filter element gets all the element that fits a criteria and stores them in a new array.

Collapse
 
chimexi_42 profile image
Chima Chidera Okoro

Okay thanks... helpful

Collapse
 
akintoluvic profile image
Vick Greenfields

Well done, in summary, arr.find() finds a described value while arr.findIndex() finds the index of such a value

Collapse
 
nedyudombat profile image
Nedy Udombat

Yes @akintulovic.

Collapse
 
dreman3082 profile image
Oluwadamilare Alonge

This is really good

Collapse
 
nedyudombat profile image
Nedy Udombat

Thank you @dreman3082

Collapse
 
__naaza profile image
Naza

Nice

Collapse
 
nedyudombat profile image
Nedy Udombat

Thank you @__naaza

Collapse
 
bamiogunfemi profile image
bamiogunfemi

Awesome read

Collapse
 
nedyudombat profile image
Nedy Udombat

Thank you @bamiogunfemi