Array.prototype.find()
find(callbackFn, thisArg) The find() method returns the first element in an array that satisfies the provided testing function. If no element matches, it returns undefined. Unlike filter() which always returns an array, find() returns the actual element or nothing.
Syntax
find(callbackFn, thisArg)
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
callbackFn | function | required | Function to test each element |
thisArg | object | undefined | Value to use as this when executing callbackFn |
callbackFn Parameters
| Parameter | Type | Description |
|---|---|---|
element | any | Current element being processed |
index | number | Index of current element |
array | Array | Array that find was called on |
Examples
The examples below start with a simple numeric search and build toward more realistic use cases. Each block demonstrates one aspect of how find() behaves with different data and predicates.
Finding a number
const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(num => num > 10);
console.log(found);
// 12
Searching for scalars covers the most common case, but find() really shows its value with arrays of objects. Because the callback receives the entire element, you can inspect any property to locate the right record. This is particularly handy with structured data like API responses that arrive as arrays of plain objects.
Finding an object in an array
const users = [
{ name: 'Alice', age: 28 },
{ name: 'Bob', age: 34 },
{ name: 'Charlie', age: 22 }
];
const youngUser = users.find(user => user.age < 25);
console.log(youngUser);
// { name: 'Charlie', age: 22 }
The callback also receives the index of the current element. This is useful when position matters—for example, searching only the second half of an array or combining positional and value-based conditions. The index also helps when you need to skip a known number of leading entries.
Using index parameter
const items = ['apple', 'banana', 'cherry', 'date'];
const found = items.find((item, index) => index > 1 && item.startsWith('c'));
console.log(found);
// 'cherry'
When no element in the array satisfies the callback, find() returns undefined rather than throwing an error. This is intentional: it lets you check the result directly without a try/catch block, but it also means you should guard property access on the returned value.
When no match is found
const numbers = [1, 2, 3, 4, 5];
const result = numbers.find(num => num > 100);
console.log(result);
// undefined
Common Patterns
The examples so far show find() in isolation. In practice, you reach for it in two common patterns: locating an object by a known property value, and deciding between find() and filter() when you need the first match. Both patterns come up frequently in UI code that needs to pull a single record from a list.
Finding by property
const products = [
{ id: 1, name: 'Laptop', price: 999 },
{ id: 2, name: 'Phone', price: 699 },
{ id: 3, name: 'Tablet', price: 449 }
];
const product = products.find(p => p.name === 'Phone');
// { id: 2, name: 'Phone', price: 699 }
Property-based lookup reads clearly with find(), but it is worth comparing it to an approach you might reach for instead: filter()[0]. The next block shows why find() is usually the better fit for single-result searches—it stops early and the return type is simpler.
First matching vs filter
const numbers = [1, 2, 3, 4, 5];
// find returns the element
console.log(numbers.find(n => n > 3));
// 4
// filter returns a new array
console.log(numbers.filter(n => n > 3));
// [4, 5]
How find() works
find() iterates the array from index 0 to the last index, passing each element to the callback. The callback receives three arguments: the current element, its index, and the array itself. The search stops as soon as the callback returns a truthy value, and that element is returned.
You can confirm the short-circuit behaviour with a callback that logs each element:
const nums = [2, 4, 6, 8, 10];
const result = nums.find(n => {
console.log('checking:', n);
return n > 5;
});
// checking: 2
// checking: 4
// checking: 6
// result = 6 — stops before 8 and 10
Short-circuit behaviour
find() stops iterating as soon as the callback returns a truthy value. It does not process the rest of the array. This makes find() efficient for searching large arrays where matches are likely to appear early, because it avoids scanning the entire array unnecessarily.
When find() is the right choice
find() is best when you need the matching item itself and you expect at most one result that matters. That makes it a good fit for settings arrays, user lists, or lookup tables stored as objects inside an array. It is often cleaner than filter()[0] because the intent is direct: stop when the first match appears. The callback can also inspect the index and the full array, which makes find() flexible enough for many search tasks without needing a separate loop.
Returning undefined safely
The fact that find() returns undefined on failure is convenient but easy to overlook. If the array might contain undefined as a valid element, you need to be careful not to treat a missing result and a matched undefined as the same thing. Optional chaining and nullish coalescing are useful here, because they let you write fallback logic without throwing when nothing is found.
find() vs findIndex()
find() returns the matching element itself; findIndex() returns its index. Use find() when you need the value, findIndex() when you need to know the position - for example, to later remove or replace the element with splice().
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const user = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }
const idx = users.findIndex(u => u.id === 2);
// 1
Sparse arrays
find() visits every slot, including holes in sparse arrays. Holes are treated as undefined, so a callback that returns true for undefined will match a hole. This distinguishes find() from filter(), which skips holes entirely.
Return value on no match
When no element satisfies the callback, find() returns undefined. Always guard against this if you plan to access properties on the result:
const found = users.find(u => u.id === 99);
console.log(found?.name ?? 'Not found'); // 'Not found'
See Also
- Array.prototype.filter() - returns all matching elements
- Array.prototype.findIndex() - returns the index instead
- Array.prototype.some() - tests if any element passes