> Что такое метод filter в JavaScript и как он работает (JavaScript)

Короткий ответ

filter - это метод массива в JavaScript, который создаёт новый массив, содержащий только те элементы исходного массива, которые удовлетворяют условию, заданному в callback-функции. Он не мутирует исходный массив, а возвращает новый. Callback вызывается для каждого элемента, и если он возвращает true (truthy value), элемент попадает в результат. Если false - отбрасывается.

Подробное объяснение

Метод filter относится к категории итерационных методов массивов (наряду с map, forEach, reduce). Его синтаксис:

JAVASCRIPT
const newArray = array.filter(callback(element, index, array), thisArg?)

Callback принимает три аргумента:

• element - текущий элемент массива
• index - индекс текущего элемента (необязательный)
• array - сам массив, по которому идёт итерация (необязательный)

Второй параметр thisArg позволяет задать значение this внутри callback (используется редко).

Ключевые особенности:

• Возвращает новый массив, исходный остаётся неизменным
• Длина нового массива может быть меньше или равна длине исходного (включая пустой массив, если ни один элемент не прошёл условие)
• Не вызывает callback для "дырок" в разреженных массивах (sparse arrays), но сохраняет их в результате
• Работает со всеми типами данных, не только с числами и строками
• Может быть использован для фильтрации объектов по свойствам, для удаления null/undefined, для поиска уникальных значений и т.д.

На практике

filter применяется повсеместно: фильтрация списков по поисковому запросу, отбор товаров по цене или категории, удаление невалидных записей из данных, полученных с сервера, работа с пользовательским вводом. Часто комбинируется с map и reduce для построения цепочек обработки данных.

Важно помнить, что filter всегда возвращает массив, даже если ожидается один элемент - для поиска одного элемента лучше использовать find. Также стоит учитывать, что для больших массивов фильтрация создаёт новый массив, что может быть неэффективно по памяти в горячих циклах - в таких случаях можно использовать обычный цикл с push.

Пример кода

JAVASCRIPT
// Базовая фильтрация чисел
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

// Фильтрация объектов по свойству
const users = [
  { name: 'Анна', age: 25 },
  { name: 'Иван', age: 17 },
  { name: 'Мария', age: 30 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Анна', age: 25 }, { name: 'Мария', age: 30 }]

// Удаление falsy значений
const mixed = [0, 'hello', false, null, 42, undefined, ''];
const truthy = mixed.filter(Boolean);
console.log(truthy); // ['hello', 42]

// Использование индекса в callback
const letters = ['a', 'b', 'c', 'd'];
const everySecond = letters.filter((_, index) => index % 2 === 0);
console.log(everySecond); // ['a', 'c']

// Цепочка с другими методами
const products = [
  { name: 'Телефон', price: 50000, inStock: true },
  { name: 'Ноутбук', price: 80000, inStock: false },
  { name: 'Планшет', price: 30000, inStock: true }
];
const availableNames = products
  .filter(p => p.inStock && p.price < 60000)
  .map(p => p.name);
console.log(availableNames); // ['Телефон']

Как отвечать на собеседовании

Начни с краткого определения: метод создаёт новый массив из элементов, прошедших проверку. Затем покажи базовый синтаксис и приведи простой пример. Упомяни, что исходный массив не изменяется - это важный принцип иммутабельности. Расскажи про аргументы callback и про thisArg. Покажи, что умеешь комбинировать с другими методами. Если спросят про производительность - честно скажи, что для большинства задач filter достаточно, но для очень больших массивов можно рассмотреть ручной цикл. Не углубляйся в редкие edge cases, если не спрашивают.

Что проверяет интервьюер

• Понимание разницы между filter и map (фильтрация vs трансформация)
• Знание, что метод возвращает новый массив, а не мутирует исходный
• Умение использовать все аргументы callback, особенно index
• Понимание truthy/falsy значений в контексте условия
• Способность комбинировать filter с другими методами массивов
• Осознание, когда filter уместен, а когда лучше find или some

Типичные ошибки

• Попытка использовать filter для поиска одного элемента - лучше find
• Забывание, что callback должен возвращать boolean (или truthy/falsy) - если вернуть число, оно будет приведено к boolean, что может дать неожиданный результат
• Ожидание, что filter изменит исходный массив - он этого не делает
• Использование filter для удаления элементов из массива внутри самого массива (например, в цикле) - это приводит к багам
• Передача в filter функции, которая возвращает новый массив или объект - это всегда truthy, и фильтр вернёт все элементы
• Путаница с filter и reduce - reduce может делать то же самое, но filter читается лучше