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