find() vs filter()

Both search an array with a predicate, but they answer different questions and return different things. Find returns the first element that matches, or the empty value if nothing matches. Filter returns a new array containing every element that matches, which may be empty.

The distinction matters for readability. If you write filter and then take the first element of the result, you are expressing a single-item lookup in a way that hides the intent and costs extra work. The reverse mistake, using find when you actually need all the matches, is worse, because it silently drops data.

Both accept the same predicate signature, so the callback receives the element, the index and the whole array. Both skip holes in a sparse array. And both leave the original array untouched, returning new data rather than mutating.

There is a third option worth knowing. FindIndex returns the position of the first match rather than the element, which is what you want when the element itself is not enough, for example when you need to remove it or highlight it in a list. FindLast searches from the end, which is handy for picking the most recent entry in a log, and findLastIndex does the same for positions. Both of those arrived in the 2023 edition of the language and are available in current Node and browsers.

Filter always scans the whole array and always allocates a new array, even when the match is on the first element. Find stops as soon as it finds a match, so the work it does is proportional to the position of the answer rather than the size of the collection.

const users = [
  { id: 1, name: "Ada", active: true },
  { id: 2, name: "Bob", active: false },
  { id: 3, name: "Cleo", active: true },
];

// find stops at the first match.
const first = users.find((u) => u.active);
console.log(first.name);   // "Cleo"

// filter scans everything and builds a new array.
const all = users.filter((u) => u.active);
console.log(all.length);   // 2

console.log(users.findIndex((u) => u.id === 2));   // 1
console.log(users.findLast((u) => u.active).name); // "Cleo"

// The wasteful version, on a large list:
const wasteful = users.filter((u) => u.id === 1)[0];
console.log(wasteful.name);   // "Ada" - but every element was visited

On a small array the difference is irrelevant. On a list of thousands of records, or on a list that is rebuilt on every render, it matters, and it is the kind of thing a code reviewer should flag because it looks harmless. The filter plus index zero pattern is the classic form of it.

There is a second, subtler cost. Filter returns a new array, so it allocates. If you are calling it inside a render or a hot loop, that allocation adds up even when the predicate is cheap.

Two rules to take away. If you want one element, use find or findIndex and let it short-circuit. If you want every match, use filter and pay the scan knowingly. And if you are filtering a large collection repeatedly with the same predicate, consider indexing the data once with a Map rather than searching on every lookup.