> Что такое map, filter и reduce в JavaScript и в чем их отличие (JavaScript)

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

map, filter и reduce - это методы массива в JavaScript для функциональной обработки данных. map преобразует каждый элемент и возвращает новый массив той же длины. filter отбирает элементы по условию и возвращает новый массив меньшей или равной длины. reduce сворачивает массив в одно значение, аккумулируя результат на каждом шаге. Главное отличие - в цели: трансформация, фильтрация или агрегация. Все три не мутируют исходный массив.

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

Все три метода появились в ES5 и работают одинаково: принимают callback-функцию и вызывают её для каждого элемента массива. Callback получает три аргумента: текущий элемент, индекс и сам массив. Ни один из методов не изменяет исходный массив - они возвращают новый результат.

map - применяет функцию к каждому элементу и возвращает новый массив с результатами. Длина результата всегда равна длине исходного массива. Используется для преобразования данных: например, извлечение поля из объектов, изменение формата, математические операции.

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

reduce - проходит по массиву и накапливает результат в аккумуляторе. Callback принимает четыре аргумента: аккумулятор, текущий элемент, индекс и массив. Вторым аргументом reduce принимает начальное значение аккумулятора. Если начальное значение не указано, аккумулятором становится первый элемент, а обход начинается со второго. Используется для вычисления суммы, произведения, построения объектов, группировки и других агрегаций.

Ключевое отличие - семантика: map - "преобразовать каждый", filter - "оставить подходящие", reduce - "свести к одному значению". reduce - самый мощный, через него можно выразить и map, и filter, но это не рекомендуется из-за читаемости.

На практике

В реальной работе эти методы часто комбинируют в цепочки. Типичный паттерн: сначала filter для отбора, затем map для преобразования, и при необходимости reduce для агрегации. Это позволяет писать декларативный код без промежуточных переменных и циклов.

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

Также стоит знать, что reduce можно использовать не только для чисел: с его помощью строят объекты, объединяют строки, группируют данные по ключам.

Пример кода

JAVASCRIPT
const numbers = [1, 2, 3, 4, 5, 6];

// map - удваиваем каждый элемент
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10, 12]

// filter - оставляем только чётные
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6]

// reduce - суммируем все элементы
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 21

// Комбинация: сумма квадратов чётных чисел
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .reduce((acc, n) => acc + n, 0);
// 4 + 16 + 36 = 56

// reduce для построения объекта
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// { apple: 2, banana: 2, orange: 1 }

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

Начни с краткого определения каждого метода и их назначения. Затем переходи к сравнению: подчеркни, что map возвращает массив той же длины, filter - подмножество, reduce - одно значение. Приведи простой пример для каждого. Если спросят про reduce подробнее - объясни про аккумулятор и начальное значение. Хорошо показать комбинацию методов в цепочке. Упомяни, что все методы иммутабельны. Если уровень позволяет, добавь, что reduce универсален и может заменить map и filter, но это ухудшает читаемость.

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

Интервьюер проверяет базовое понимание функционального подхода в JavaScript: знает ли кандидат сигнатуры методов, понимает ли разницу между трансформацией, фильтрацией и агрегацией, умеет ли читать и писать цепочки вызовов. Также проверяется понимание иммутабельности и умение работать с callback-функциями. Для junior достаточно уверенного объяснения и простых примеров.

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

• Путать map и forEach: map возвращает новый массив, forEach - undefined.
• Забывать передать начальное значение в reduce для пустого массива - будет ошибка.
• Использовать filter для преобразования элементов - это задача map.
• Мутировать исходный массив внутри callback - нарушение иммутабельности.
• Не возвращать значение из callback в map - получится массив из undefined.
• Пытаться использовать reduce для простых задач, где достаточно map или filter - код становится менее читаемым.