filter() - метод для фильтрации элементов массива в JavaScript

filter() создаёт новый массив только из тех элементов, которые подходят под условие.

Это один из самых удобных методов, когда нужно отобрать часть массива и не менять исходные данные.

Синтаксис

array.filter(callback)
array.filter(callback, thisArg)

callback - функция, которая проверяет каждый элемент массива.

Что делает filter()

Метод проходит по массиву слева направо и для каждого элемента вызывает callback.

Если callback возвращает true, элемент попадает в новый массив.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter((value) => value > 2);

console.log(result); // [3, 4, 5]

Что возвращает filter()

filter() всегда возвращает новый массив.

const numbers = [1, 2, 3];
const result = numbers.filter((value) => value > 10);

console.log(result); // []

Если подходящих элементов нет, результатом будет пустой массив.

Это важное отличие от find(), который возвращает один элемент или undefined.

Аргументы callback

Callback в filter() может получать до трёх аргументов:

array.filter((element, index, array) => {
  // ...
});

element - текущий элемент
index - индекс текущего элемента
array - сам исходный массив

Пример:

const fruits = ["apple", "banana", "orange"];

const result = fruits.filter((fruit, index) => {
  return index !== 1;
});

console.log(result); // ["apple", "orange"]

Поиск нескольких элементов

filter() полезен, когда нужно получить не одно совпадение, а сразу все подходящие элементы.

const numbers = [2, 4, 5, 6, 7, 8];
const evens = numbers.filter((value) => value % 2 === 0);

console.log(evens); // [2, 4, 6, 8]

Фильтрация массива объектов

Очень частый сценарий - отфильтровать массив объектов по какому-то признаку.

const users = [
  { name: "Anna", active: true },
  { name: "Ivan", active: false },
  { name: "Oleg", active: true },
];

const activeUsers = users.filter((user) => user.active);

console.log(activeUsers);
// [{ name: "Anna", active: true }, { name: "Oleg", active: true }]

filter() не меняет исходный массив

Метод создаёт новый массив и не работает “на месте”.

const numbers = [1, 2, 3, 4];
const result = numbers.filter((value) => value > 2);

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

Это один из главных плюсов filter().

filter() и find()

Эти методы часто путают.

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

console.log(numbers.find((value) => value > 2));   // 3
console.log(numbers.filter((value) => value > 2)); // [3, 4]

find() возвращает только первое совпадение.

filter() возвращает массив всех совпадений.

filter() и map()

У этих методов разная задача.

const numbers = [1, 2, 3];

console.log(numbers.filter((value) => value > 1)); // [2, 3]
console.log(numbers.map((value) => value * 2));    // [2, 4, 6]

filter() отбирает элементы.

map() преобразует каждый элемент.

Иногда их используют вместе:

const result = [1, 2, 3, 4]
  .filter((value) => value % 2 === 0)
  .map((value) => value * 10);

console.log(result); // [20, 40]

Пустые слоты

filter() пропускает пустые слоты массива.

const arr = Array(3);
const result = arr.filter((value) => true);

console.log(result); // []

Callback для пустых слотов здесь не вызывается.

Truthy и falsy

Иногда filter() используют с короткой формой:

const values = [0, 1, false, 2, "", 3, null];
const result = values.filter(Boolean);

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

Такой вариант убирает falsy-значения:

0
false
""
null
undefined
NaN

Но использовать его стоит только тогда, когда это действительно нужно.

Когда это полезно

filter() удобно использовать, когда:

нужно получить все элементы, подходящие под условие
нужно отфильтровать массив объектов
важно не менять исходные данные

Пример:

const products = [
  { name: "Phone", price: 500 },
  { name: "Laptop", price: 1500 },
  { name: "Mouse", price: 50 },
];

const expensive = products.filter((item) => item.price > 100);

console.log(expensive);
// [{ name: "Phone", price: 500 }, { name: "Laptop", price: 1500 }]

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

Думать, что filter() возвращает один элемент

const numbers = [1, 2, 3];
const result = numbers.filter((value) => value > 1);

console.log(result); // [2, 3]

Это массив, а не одно значение.

Путать filter() и find()

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

console.log(numbers.filter((value) => value > 2)); // [3, 4]

Если нужен только первый подходящий элемент, обычно лучше подходит find().

Забывать return в callback

const numbers = [1, 2, 3];
const result = numbers.filter((value) => {
  value > 1;
});

console.log(result); // []

Если callback ничего не возвращает, элемент не попадёт в результат.

Быстрая памятка

filter() возвращает новый массив с элементами, подходящими под условие
если совпадений нет, результатом будет []
callback может получать element, index и array
исходный массив не меняется
find() возвращает один элемент, а filter() - массив всех совпадений

Коротко

filter() - это удобный способ отобрать из массива только нужные элементы. Главное, что стоит запомнить: метод возвращает новый массив со всеми совпадениями и не меняет исходный.