Метод filter в JavaScript: отбор элементов

filter - метод массива, который отбирает элементы по условию и возвращает новый массив. Исходный массив не меняется.

Главная идея: колбэк возвращает true или false.

true - элемент попадает в результат
false - элемент не попадает

Простой пример

const nums = [1, 2, 3, 4, 5];

const evens = nums.filter(n => n % 2 === 0);

console.log(evens); // [2, 4]
console.log(nums);  // [1, 2, 3, 4, 5]

Синтаксис

array.filter((value, index, array) => {
  return condition;
});

value - текущий элемент
index - индекс
array - исходный массив (редко нужен)

Колбэк должен вернуть значение, которое приводится к boolean (обычно это результат сравнения).

Примеры отбора

1) Числа больше заданного

const nums = [3, 10, 2, 8, 1];

const big = nums.filter(n => n > 5);
console.log(big); // [10, 8]

2) Строки по длине

const words = ["hi", "hello", "ok", "world"];

const longWords = words.filter(w => w.length >= 4);
console.log(longWords); // ["hello", "world"]

3) Отбор объектов

const users = [
  { id: 1, name: "Sam", isActive: true },
  { id: 2, name: "Alex", isActive: false },
  { id: 3, name: "Kim", isActive: true }
];

const active = users.filter(u => u.isActive);
console.log(active);
// [{ id: 1, name: "Sam", isActive: true }, { id: 3, name: "Kim", isActive: true }]

4) Использование index

Иногда индекс нужен для отбора “через один”:

const items = ["a", "b", "c", "d", "e"];

const evenIndex = items.filter((value, index) => index % 2 === 0);
console.log(evenIndex); // ["a", "c", "e"]

filter возвращает массив, который может быть пустым

Если ничего не подошло, результат будет [].

const nums = [1, 2, 3];

const found = nums.filter(n => n > 10);
console.log(found); // []
console.log(found.length); // 0

filter и truthy/falsy

Иногда используют filter(Boolean), чтобы убрать falsy значения (0, "", null, undefined, NaN, false). Это работает, но важно понимать смысл: фильтрация идет по приведению к boolean.

const values = [0, 1, "", "ok", null, undefined, 2];

const cleaned = values.filter(Boolean);
console.log(cleaned); // [1, "ok", 2]

Если 0 и "" важны, такой подход не подходит.

Частые ошибки

1) Путаница filter и map

filter отбирает элементы, map преобразует элементы.

const nums = [1, 2, 3, 4];

const res = nums.filter(n => n * 2);
console.log(res); // [1, 2, 3, 4]

Здесь n * 2 почти всегда truthy, поэтому фильтрация ничего не отбрасывает. Для умножения нужно map.

Правильно:

const nums = [1, 2, 3, 4];

const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

2) Возврат не boolean из колбэка

filter приводит результат к boolean, поэтому важно возвращать условие, а не случайное значение.

Лучше:

const nums = [1, 2, 3, 4];

const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

3) Ожидание, что filter изменит исходный массив

filter не мутирует массив:

const nums = [1, 2, 3, 4];

nums.filter(n => n % 2 === 0);

console.log(nums); // [1, 2, 3, 4]

Результат нужно сохранить:

const nums = [1, 2, 3, 4];

const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

Что стоит запомнить

filter возвращает новый массив с элементами, которые прошли проверку.
Исходный массив не меняется.
Колбэк должен возвращать условие (true/false).
filter(Boolean) убирает falsy значения, но может убрать 0 и пустые строки.
Для преобразования используется map, для отбора - filter.