Menu Home

Array.findIndex()

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.

The Video

As always, we have a video that shows and example of using findIndex().

Shameless Plug

You can find us anywhere!

Check out all our videos at: https://www.boringjavascript.com

Github Repository: https://github.com/TheVirtuoid/boringjavascript

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as:

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: