Array find method

JavaScriptJunior~2 min read

The find() method looks for the first array element that satisfies a condition and returns that element. It does not filter and does not scan the whole array to build a new one: it finds the first match and stops.

Theory

TL;DR

find() returns the first element for which the condition returned true.
When no element matches, the result is undefined, not an error.
Iteration stops right after the first match.
It returns the element itself, not an array.
The callback receives element, index and array.
The source array is not changed.

Quick example

javascript

const numbers = [1, 5, 10, 15, 20];

const found = numbers.find(num => num > 10);

console.log(found); // 15

find() returned the first value satisfying the condition (> 10) and stopped searching.

Syntax and callback parameters

javascript

const result = array.find((element, index, array) => {
  return condition;
});

Argument	Description
`element`	The current array element
`index`	The index of the current element
`array`	The source array itself

Example 1. Finding an object by a property

javascript

const users = [
  { id: 1, name: 'Tim', age: 25 },
  { id: 2, name: 'Alex', age: 17 },
  { id: 3, name: 'Maria', age: 30 }
];

const user = users.find(u => u.id === 3);

console.log(user);
// { id: 3, name: 'Maria', age: 30 }

A very common case is looking an element up in an array of objects, for example by id.

Example 2. When nothing is found

javascript

const arr = [10, 20, 30];
const res = arr.find(num => num > 50);

console.log(res); // undefined

If no element matches, you get undefined rather than an error. That is why the result is worth checking before you touch its properties.

When to reach for `find()`

Goal	Is `find()` a fit
Find the first element that satisfies a condition	Yes
Find every matching element	No, use `filter()`
Check whether at least one element exists	No, use `some()`
Transform data	No, use `map()`

A formula worth remembering: arr.find(condition) gives you one_element_or_undefined.

Compared with similar methods

Method	What it returns	When it stops	Example
`find()`	The first matching element	After the first match	`[1,2,3].find(x => x > 1)` gives `2`
`filter()`	Every matching element (an array)	After scanning the whole array	`[1,2,3].filter(x => x > 1)` gives `[2,3]`
`findIndex()`	The index of the found element	After the first match	`[10,20,30].findIndex(x => x > 10)` gives `1`
`some()`	`true` or `false`, whether any matched	After the first match	`[1,2,3].some(x => x > 2)` gives `true`

Common mistakes

Expecting an array instead of a single element:

javascript
const result = arr.find(num => num > 5); console.log(result.length); // an error, find returns an element, not an array

When you need all the elements rather than one, use filter(). When the result may be undefined, check it first or use optional chaining: result?.length.
Forgetting return inside the curly braces:

javascript
arr.find(num => { num > 5 }); // always undefined

The fix:

javascript
arr.find(num => num > 5); // or arr.find(num => { return num > 5; });
Using find() when you only care whether something exists. If the answer you want is true or false, some() is clearer and cheaper.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.