Suggest an edit

Improve this article

Refine the answer for “Array find method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

1. **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`.

2. **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; });
   ```

3. **Using `find()` when you only care whether something exists.** If the answer you want is `true` or `false`, `some()` is clearer and cheaper.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts627 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.