Skip to main content

JavaScript Arrays

JavaScript Array find

Written by Published

JavaScript find returns the first element that passes a test, or undefined.

Unlike filter, it gives you one element rather than an array.

It stops as soon as it finds a match.

Example

Example

javascript

const numbers = [1, 8, 3, 12];

console.log(numbers.find(n => n > 4));

The output is 8, the first match.

find and findIndex

find returns the matching element itself.

findIndex returns its position, or -1 when nothing matches.

Both stop at the first match, so they are faster than filtering the whole array.

Syntax

Syntax

javascript

array.find(function (value) {
  return condition;
});

The callback returns true for the element you want.

Finding an Object

This is the usual reason to reach for find.

Example

Example

javascript

const users = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Grace" }
];

console.log(users.find(u => u.id === 2).name);

The whole object is returned, so its properties can be read straight away.

No Match Gives undefined

This is worth guarding, because reading a property of undefined throws.

Example

Example

javascript

const users = [{ id: 1 }];

const found = users.find(u => u.id === 99);

console.log(typeof found);

Check the result before using it, or use optional chaining.

findIndex

Use this when you need the position rather than the value.

Example

Example

javascript

const list = ["a", "b", "c"];

console.log(list.findIndex(x => x === "b"));
console.log(list.findIndex(x => x === "z"));

A missing value gives -1.

find or filter?

find gives one element; filter gives an array.

If you only need the first match, find says so more clearly and stops early.

Example

Example

javascript

const numbers = [1, 8, 3, 12];

console.log(numbers.find(n => n > 4));
console.log(numbers.filter(n => n > 4).join(","));

The first prints 8; the second prints 8,12.

findLast

This searches from the end and returns the last match.

Example

Example

javascript

const numbers = [1, 8, 3, 12];

console.log(numbers.findLast(n => n > 4));

The output is 12.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript find</title>
</head>
<body>

  <h1>JavaScript find</h1>

  <p id="result"></p>

  <script>
    const users = [
      { id: 1, name: "Ada" },
      { id: 2, name: "Grace" },
      { id: 3, name: "Alan" }
    ];

    const user = users.find(function (u) {
      return u.id === 2;
    });

    document.getElementById("result").innerHTML = "Found: " + user.name;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a missing id:

Search for id 99 and see what happens when nothing matches.

Important Points

  • find returns the first matching element.
  • It returns undefined when nothing matches.
  • findIndex returns the position, or -1.
  • Both stop at the first match.
  • Use filter when you want every match.

Conclusion

find is how you pull one item out of a list of objects.

Always consider what happens when nothing matches.

It is clearer and faster than filtering and taking the first element.