How can I find the first matching array item with `find()`?

find() calls your condition on array items in ascending index order and returns the first item for which the condition produces a truthy result. It stops when it finds that item. If nothing matches, the return value is undefined. [S1]

For example, suppose scores contains numbers and you need the first score above 10:

const scores = [5, 12, 18];
const firstHighScore = scores.find(score => score > 10);

console.log(firstHighScore); // 12

The result is the matching array value, not a new array of matches. In this example, 18 also meets the condition, but find() returns 12 because it comes first.

Put the lookup condition in the callback. For instance, assuming this example array has objects with an id property:

const people = [
  { id: 1, name: "Mina" },
  { id: 2, name: "Omar" }
];

const person = people.find(item => item.id === 2);
const missingPerson = people.find(item => item.id === 3);

console.log(person);        // { id: 2, name: "Omar" }
console.log(missingPerson); // undefined

The second lookup has no match, so it returns undefined rather than an object or an empty array. [S1] Before reading a property from a result that might be missing, check it:

if (person !== undefined) {
  console.log(person.name);
}

This keeps the no-match case explicit. Adapt the property names and values to your own data.

Store the result, then branch on whether it is undefined before using it. Here is a copyable pattern, using a placeholder condition you can replace:

const item = items.find(entry => entry.key === wantedKey);

if (item === undefined) {
  console.log("No matching item");
} else {
  console.log(item);
}

The items, key, and wantedKey names are placeholders; use the array and condition from your program. For arrays of objects like this example, the check makes the no-match case explicit. If your array can contain undefined as a matching value, that result alone cannot distinguish a match from no match. find() uses the callback result as a condition and returns the array element when that result is truthy. [S1]

Use find() when the task is “give me the first matching item.” If the task is “give me all matching items,” use filter() instead; that is the method MDN identifies for obtaining all matches. [S1] For example, with [5, 12, 18], scores.find(score => score > 10) gives 12, while scores.filter(score => score > 10) gives [12, 18].

Before writing the callback, state the condition in plain language: “the first item whose ___ is ___.” Then check that the property and comparison in your code express that condition. The example illustrates the method’s behavior; it does not establish how any particular application’s data is structured.