Using the Array.find Method in JavaScript

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.