find() returns the first array element matching a condition, or undefined if none match. It replaced the older, more roundabout pattern of filtering an array just to grab its first result.
1Array.prototype.find() | JavaScript Tutorial - In-Depth Guide Part 1
find() returns the first element for which the callback returns true, short-circuiting immediately once found.
const admin = users.find((u) => u.role === 'admin');The First Match
2Array.prototype.find() | JavaScript Tutorial - In-Depth Guide Part 2
If no element matches, find() returns 'undefined' — not null, not -1, and not an empty array.
const missing = users.find((u) => u.id === 'nonexistent');
missing; // undefinedundefined on No Match
3Array.prototype.find() | JavaScript Tutorial - In-Depth Guide Part 3
Using 'filter(...)[0]' to simulate find() always scans the whole array and allocates an intermediate array — wasteful and less clear.
// Works, but wasteful:
const admin1 = users.filter((u) => u.role === 'admin')[0];
// Better:
const admin2 = users.find((u) => u.role === 'admin');find() vs filter()[0]
4Array.prototype.find() | JavaScript Tutorial - In-Depth Guide Part 4
find() is often chained with optional chaining, since a missing match (undefined) would otherwise throw when you try to access a property on it.
const adminName = users.find((u) => u.role === 'admin')?.name;Pairs with Optional Chaining
5Array.prototype.find() | JavaScript Tutorial - In-Depth Guide Part 5
find() also receives the index and the full array as extra callback arguments, just like map, filter, and forEach.
prices.find((price, i, arr) => i > 0 && price !== arr[i - 1]);Index & Array Access
6Step-by-Step Breakdown
find() returns the first element for which the callback returns true, short-circuiting immediately once found.
If no element matches, find() returns 'undefined' — not null, not -1, and not an empty array.
Checkpoint: What does .find() return when no element matches the callback?
- →undefined
- →null
Using 'filter(...)[0]' to simulate find() always scans the whole array and allocates an intermediate array — wasteful and less clear.
Checkpoint: Does .filter(fn)[0] do strictly more work than .find(fn) to get the same first match?
- →Yes, filter always scans the whole array first
- →No, they perform identically
find() is often chained with optional chaining, since a missing match (undefined) would otherwise throw when you try to access a property on it.
find() also receives the index and the full array as extra callback arguments, just like map, filter, and forEach.
Next, we'll explore 'The findIndex() Method'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Handle the "Not Found" Case from find() with a Clear Accessible Message
When find() returns undefined for a user's search or filter action, ensure the UI announces a clear 'No results found' message via an ARIA live region, rather than silently rendering nothing.
SEO Implications
- 1
No Direct SEO Effect
find() is a lookup utility; its SEO relevance is limited to correctness of server-rendered content derived from lookups.
Best Practices
Use find() Instead of filter()[0] for Single-Item Lookups
find() short-circuits on the first match and avoids allocating an unnecessary intermediate array, making intent clearer and execution faster.
Pair find() with Optional Chaining When Accessing Properties on the Result
Since a missing match returns undefined, immediately chaining `?.` avoids a runtime crash when the search comes up empty.
Frequent Bugs
Comparing find()'s result against `null` instead of `undefined` when checking for a missing match, causing the missing-case branch to never execute.
Check against undefined explicitly, or simply use the result in a boolean context (`if (!result)`), since undefined is falsy.
Chaining a property access directly on find()'s result without a safety net, causing "Cannot read properties of undefined" when no match exists.
Use optional chaining (`find(fn)?.prop`) or explicitly check the result before accessing properties on it.
Real-World Examples
Looking Up a Single Record by ID
A UI needed to display details for a single selected item, looked up from a larger in-memory array by its unique ID.
const selectedProduct = products.find((p) => p.id === selectedId);
if (!selectedProduct) {
showNotFoundMessage();
}