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

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

Метод 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().

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

Немає 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; });
Спроба змінювати елементи всередині filter(). Метод призначений тільки для відбору, а не для трансформації; для перетворень використовують map().
Використання filter() замість find(). Якщо потрібен один елемент, filter() все одно пройде масив до кінця і поверне масив, з якого доведеться брати [0]; find() зупиняється на першому збігу і повертає сам елемент.

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

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

Premium

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