Menu Home

Array.find()

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!

The Video

As always, we have a video that shows you how to use the Array.find() method.

Shameless Plug

You can find us anywhere!

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

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: