Метод find у масиві

JavaScriptJunior~2 хв читання

Метод find() шукає в масиві перший елемент, який задовольняє умову, і повертає саме його. Він не фільтрує і не проходить масив повністю заради нового: знаходить перший придатний елемент і зупиняється.

Теорія

TL;DR

find() повертає перший елемент, для якого умова дала true.
Якщо жоден елемент не підійшов, результат, це undefined, а не помилка.
Перебір зупиняється одразу після першого збігу.
Повертається сам елемент, а не масив.
Callback отримує element, index та array.
Вихідний масив не змінюється.

Швидкий приклад

javascript

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

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

console.log(found); // 15

find() повернув перше значення, що задовольняє умову (> 10), і зупинив пошук.

Синтаксис і параметри callback

javascript

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

Аргумент	Опис
`element`	Поточний елемент масиву
`index`	Індекс поточного елемента
`array`	Сам вихідний масив

Приклад 1. Пошук об'єкта за властивістю

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 }

Дуже поширений випадок, це пошук елемента в масиві об'єктів, наприклад за id.

Приклад 2. Коли елемент не знайдено

javascript

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

console.log(res); // undefined

Якщо жодного придатного елемента немає, повертається undefined, а не помилка. Тому результат варто перевіряти перед тим, як звертатися до його властивостей.

Коли брати `find()`

Мета	Чи підходить `find()`
Знайти перший елемент, що задовольняє умову	Так
Знайти всі придатні елементи	Ні, використовуйте `filter()`
Перевірити, чи є хоча б один елемент	Ні, використовуйте `some()`
Перетворити дані	Ні, використовуйте `map()`

Формула для запам'ятовування: arr.find(умова) дає один_елемент_або_undefined.

Порівняння зі схожими методами

Метод	Що повертає	Коли зупиняється	Приклад
`find()`	Перший придатний елемент	Після першого збігу	`[1,2,3].find(x => x > 1)` дає `2`
`filter()`	Усі придатні елементи (масив)	Після проходу всього масиву	`[1,2,3].filter(x => x > 1)` дає `[2,3]`
`findIndex()`	Індекс знайденого елемента	Після першого збігу	`[10,20,30].findIndex(x => x > 10)` дає `1`
`some()`	`true` або `false`, чи знайшовся хоч один	Після першого збігу	`[1,2,3].some(x => x > 2)` дає `true`

Типові помилки

Очікування масиву замість одного елемента:

javascript
const result = arr.find(num => num > 5); console.log(result.length); // помилка, find повертає елемент, а не масив

Якщо потрібні всі елементи, а не один, використовуйте filter(). Якщо результат може бути undefined, спершу перевірте його або скористайтеся опціональним ланцюжком result?.length.
Забутий return у фігурних дужках:

javascript
arr.find(num => { num > 5 }); // завжди undefined

Правильно:

javascript
arr.find(num => num > 5); // або arr.find(num => { return num > 5; });
Використання find() там, де потрібен лише факт наявності. Якщо відповідь потрібна у вигляді true або false, зрозуміліше і дешевше взяти some().

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.