Table of Contents
URL: https://www.progressiverobot.com/js-array-find-method/
The JavaScript Array.find method is a convenient way to find and return the first occurence of an element in an array, under a defined testing function. When you want a <^>single<^> needle from the haystack, reach for find()!
When to Use Array.find
The function and syntax of find() is very much like the Array.filter method, except it only returns a <^>single<^> element. Another difference is when nothing is found, this method returns a value of undefined.
So if you only need a single value, use find()! When you need to find/return multiple values, reach for filter() instead.
How to Use Array.find
Using find() is super easy! The only required parameter of this method is a testing function, and it can be as simple or complex as needed. In its most basic form:
array.find(testingFunction); // that's it!
Simple example:
Here's a simple example with an array of strings:
const trees = [
"birch",
"maple",
"oak",
"poplar"
];
const result = trees.find(tree => tree.startsWith("m"));
// "maple"
In non-shorthand, non-ES6 form:
const result = trees.find(function(tree) {
return tree.startsWith("m");
});
// "maple"
Using with objects:
We can use find() to easily search arrays of objects, too!
const trees = [
{ name: "birch", count: 4 },
{ name: "maple", count: 5 },
{ name: "oak", count: 2 }
];
const result = trees.find(tree => tree.name === "oak");
// { name: "oak", count, 2 }
Using the same example, notice if we use find() when a test has multiple results, we only get the first value found:
const result = trees.find(tree => tree.count > 2);
// { name: "birch", count: 4 }
This is an instance where you should probably use filter() instead. See the difference?
Tip: Separating the testing function
Sometimes you'll want to re-use the same find() test function in multiple places. In that case, it can be really helpful to create a separate testing function.
Let's demo this technique, expanding on our previous examples:
const deciduous = [
{ name: "birch", count: 4 },
{ name: "maple", count: 5 },
{ name: "oak", count: 2 }
];
const evergreens = [
{ name: "cedar", count: 2 },
{ name: "fir", count: 6 },
{ name: "pine", count: 3 }
];
// our testing function
const hasFiveOrMore = el => el.count >= 5;
const decResult = deciduous.find(hasFiveOrMore);
// { name: "maple", count: 5 }
const evgResult = evergreens.find(hasFiveOrMore);
// { name: "fir", count: 6 }
Simple, but powerful! 💪
Using the index parameter
Like filter(), there is an optional index parameter we can use. Here's one last example, using it as part of our testing function:
const evergreens = [
{ name: "cedar", count: 2 },
{ name: "fir", count: 6 },
{ name: "pine", count: 3 }
];
// suppose we need to skip the first element
const result = evergreens.find((tree, i) => {
if (tree.count > 1 && i !== 0) return true;
});
// { name: "fir", count: 6 }
The index is probably not something you'll need often — but it's great to have available at times.
Conclusion
Array.find is a simple but incredibly useful method for searching JavaScript arrays. It's one of several useful methods available on Arrays, for a more complete guide see How To Use Array Methods in JavaScript: Iteration Methods.
Just remember: only use find when you want a <^>single<^> element returned, and that it returns undefined if nothing is found! Otherwise, use the filter method when you need multiple elements returned.
