Array.findIndex()

By thevirtuoid on November 30, 2021 • ( Leave a comment )

Hi everyone, and welcome to another exciting edition of Boring JavaScript! Today, we tackle the Array.findIndex() – much like the Array.find() method we talked about earlier. In fact, it’s almost exactly the same – except that it returns the index of the element found in your array rather than the element.

Don’t like to read? Then watch the video.

Here I Go, Finding Again

The findIndex() method takes a single argument – a callback function that you supply. JavaScript then executes that function against each element in the array. If the function returns Boolean True, then the process stops and JavaScript returns the index number of the element found. If the function returns Boolean False, then the next element is checked, and so on until the end of the array is reached. When that happens, findIndex() will return a -1, which means it cannot find an element that matches the condition set forth in the function.

And that’s it! Really. Let’s take a look at some code:

const zoo = [
	{ "type": "Cat", "name": "Fluffy", "class": "Mammalia"},
	{ "type": "Dog", "name": "Fido", "class": "Mammalia"},
	{ "type": "Horse", "name": "Mr. Ed", "class": "Mammalia"},
	{ "type": "Cow", "name": "Betsy", "class": "Mammalia"},
	{ "type": "Coyote", "name": "Wile E.", "class": "Mammalia"},
	{ "type": "Road Runner", "name": "Beep Beep", "class": "Aves"},
	{ "type": "Dolphin", "name": "Flipper",  "class": "Mammalia"},
	{ "type": "Whale", "name": "Moby Dick", "class": "Mammalia"},
	{ "type": "Lizard", "name": "Larry", "class": "Reptilia"}
];

const myCatIndex = zoo.findIndex((animal) => animal.type === 'Cat');
console.log(`The zoo's cat is named ${zoo[myCatIndex].name}.`);

const myZebraIndex = zoo.findIndex((animal) => animal.type === 'Zebra');
if (myZebraIndex === -1) {
	console.log('Sorry, but we have no Zebras in the zoo.');
} else {
	console.log(`The zoo's zebra is named ${zoo[myZebraIndex].name}.`);
}

/* output
The zoo's cat is named Fluffy.
Sorry, but we have no Zebras in the the zoo.
*/

Lines 13 and 16 have the findIndex() methods. As mentioned, it takes a single argument, the callback function that gets executed with each iteration of the array. Now, one thing that is different from the example above is that JavaScript actually passes three arguments to your function – the element in question, the index number of the element, and the array being parsed. In our case, we only need the element so that’s all that is declared in both lines.

The function returns either Boolean True or Boolean False. In the first case, the type of ‘Cat’ was found on Index #0 in the array, so findIndex() would have returned 0. In the second case, the type of ‘Zebra’ is NOT found in the array, so findIndex() returned -1. And we check for that in the zebra case (Line 17).

And that’s it. Really simple to use.