Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Метод find у масиві». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`find()` повертає перший елемент масиву, для якого callback дав `true`, і одразу зупиняє перебір; якщо збігу немає, повертає `undefined`.** Він віддає сам елемент, а не масив, тому звертатися до `.length` результату не можна. Callback отримує `element`, `index` і `array`, а вихідний масив не змінюється. ```javascript const user = [{ id: 1 }, { id: 3 }].find(u => u.id === 3); // { id: 3 } ``` **Ключове:** `find()` шукає один елемент і зупиняється на першому збігу; потрібні всі збіги, беріть `filter()`, потрібна лише перевірка наявності, `some()`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Метод `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` | ### Типові помилки 1. **Очікування масиву замість одного елемента:** ```javascript const result = arr.find(num => num > 5); console.log(result.length); // помилка, find повертає елемент, а не масив ``` Якщо потрібні всі елементи, а не один, використовуйте `filter()`. Якщо результат може бути `undefined`, спершу перевірте його або скористайтеся опціональним ланцюжком `result?.length`. 2. **Забутий `return` у фігурних дужках:** ```javascript arr.find(num => { num > 5 }); // завжди undefined ``` Правильно: ```javascript arr.find(num => num > 5); // або arr.find(num => { return num > 5; }); ``` 3. **Використання `find()` там, де потрібен лише факт наявності.** Якщо відповідь потрібна у вигляді `true` або `false`, зрозуміліше і дешевше взяти `some()`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.