Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Метод filter у масиві». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`filter()` перебирає масив і повертає новий масив тільки з тих елементів, для яких callback повернув `true`.** Оригінал не змінюється, а довжина результату може бути меншою за вихідну, аж до порожнього масиву. Callback отримує `element`, `index` і сам `array`, тому умову можна будувати і за значенням, і за позицією. ```javascript const even = [1, 2, 3, 4, 5, 6].filter(num => num % 2 === 0); // [2, 4, 6] ``` **Ключове:** `filter()` відбирає елементи, а не змінює їх; для перетворення значень беріть `map()`, для пошуку одного елемента, `find()`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Метод `filter()` відбирає елементи масиву за умовою і створює новий масив тільки з тих, для яких умова повернула `true`.** Це один з найкорисніших методів масиву в JavaScript, і, як і `map()`, він не змінює вихідний масив. ## Теорія ### TL;DR - `filter()` повертає новий масив з елементами, що пройшли перевірку. - Умова обчислюється для кожного елемента: `true` залишає його, `false` виключає. - Вихідний масив не мутується. - Розмір результату може бути меншим за вихідний або нульовим. - Callback отримує `element`, `index` та `array`. - `filter(Boolean)` прибирає всі falsy значення. ### Швидкий приклад ```javascript const numbers = [1, 2, 3, 4, 5, 6]; const even = numbers.filter(num => num % 2 === 0); console.log(even); // [2, 4, 6] console.log(numbers); // [1, 2, 3, 4, 5, 6], вихідний масив не змінився ``` ### Синтаксис і параметри callback ```javascript const newArray = array.filter((element, index, array) => { return condition; // true, елемент залишається; false, елемент відкидається }); ``` | Аргумент | Опис | | --- | --- | | `element` | Поточний елемент масиву | | `index` | Індекс поточного елемента | | `array` | Сам вихідний масив | Повернуте з callback значення приводиться до булевого, тому умова не обов'язково має бути строго `true` або `false`: будь-яке truthy значення залишає елемент у результаті. ### Приклад 1. Фільтрація чисел ```javascript const numbers = [1, 2, 3, 4, 5, 6]; const even = numbers.filter(num => num % 2 === 0); console.log(even); // [2, 4, 6] console.log(numbers); // [1, 2, 3, 4, 5, 6] ``` > `filter()` перевіряє кожен елемент і, якщо умова дає `true`, додає його до результату. ### Приклад 2. Фільтрація за властивістю об'єкта ```javascript const users = [ { name: 'Tim', age: 25 }, { name: 'Alex', age: 17 }, { name: 'Maria', age: 30 } ]; const adults = users.filter(user => user.age >= 18); console.log(adults); // [ // { name: 'Tim', age: 25 }, // { name: 'Maria', age: 30 } // ] ``` > Типовий сценарій, це відбір користувачів, товарів, записів тощо за умовою. ### Приклад 3. Прибирання «порожніх» значень ```javascript const values = [0, null, '', 'Hello', undefined, 42]; const truthy = values.filter(Boolean); console.log(truthy); // ['Hello', 42] ``` > Передача `Boolean` як функції автоматично відсіює falsy значення: `0`, `null`, `''`, `undefined`, `NaN`, `false`. ### Коли брати `filter()` | Мета | Чи підходить `filter()` | | --- | --- | | Відібрати елементи за умовою | Так | | Перетворити значення | Ні, використовуйте `map()` | | Знайти один елемент | Ні, використовуйте `find()` | | Змінити вихідний масив | Ні, `filter()` повертає новий масив | Формула для запам'ятовування: `arr.filter(умова)` дає `новий_масив_підмножина`. ### Різниця між `map()` і `filter()` | Метод | Що робить | Розмір нового масиву | | --- | --- | --- | | `map()` | Перетворює кожен елемент | Завжди однаковий | | `filter()` | Відбирає елементи за умовою | Може бути меншим | Методи добре поєднуються в ланцюжок: спершу відібрати потрібне через `filter()`, потім перетворити відібране через `map()`. ### Типові помилки 1. **Немає `return` у фігурних дужках.** Блокове тіло стрілочної функції нічого не повертає, тому умова завжди `undefined`, тобто falsy, і результат порожній: ```javascript const result = arr.filter(num => { num > 5 }); // [] ``` Правильно: ```javascript const result = arr.filter(num => num > 5); // або const result = arr.filter(num => { return num > 5; }); ``` 2. **Спроба змінювати елементи всередині `filter()`.** Метод призначений тільки для відбору, а не для трансформації; для перетворень використовують `map()`. 3. **Використання `filter()` замість `find()`.** Якщо потрібен один елемент, `filter()` все одно пройде масив до кінця і поверне масив, з якого доведеться брати `[0]`; `find()` зупиняється на першому збігу і повертає сам елемент.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.