Array.find()

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

Hi everyone, and welcome to another exciting edition of Boring JavaScript! Today, we tackle the Array.find() method – a perfect way to find any element within your array, even if it holds complex data.

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

Finding Nemo

Using the Array.find() is very, VERY easy. The idea behind it is that you supply a function, and that function is executed against each and every element in the array (with JavaScript doing the iteration for you). Your function will then return either a Boolean True or Boolean False. If True, then the .find() method stops and returns that element. If False, it will continue with the next element in the iteration. If it gets through all the elements without getting a True, it will return ‘undefined’, meaning that no element in the array matches what you wanted to match.

Like I said, real simple.

Let’s take 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 myCat = zoo.find((animal) => animal.type === 'Cat');
console.log(`The zoo's cat is named ${myCat.name}.`);

/* output
The zoo's cat is named Fluffy
*/

In Line 1 we have an array of complex elements, in this case objects. Our goal is to find the first element that has the property ‘type’ equal to ‘Cat’.

Line 13 is the .find() method, and it takes one argument, the callback function. This function is executed against each element in the array and will return a True or False depending upon condition we set.

When the function is executed by JavaScript, it will pass three arguments:

element – the element in the array to be checked
index – the index of the element in the array
array – the array itself.

In our case, we’re only concerned with checking the ‘type’ property on the object, so all we need is the element. And our function merely returns a True or False if the ‘type’ property is set to ‘Cat’.

That’s All Folks!

And, yes, that’s it! There’s nothing else to it. As long as your function returns a Boolean True or Boolean False, JavaScript will iterate the array for you and stop when you return that True.

Simple!