Методы массивов: map, filter, reduce

map — это конвейер. Вы описываете функцию «что сделать с одним элементом», а map прогоняет её по всем элементам подряд и складывает результаты в новый массив. Длина результата всегда равна длине исходного массива: один вошёл — один вышел.

const prices = [100, 250, 40];
const doubled = prices.map((price) => price * 2);

console.log(doubled);
console.log(prices);

Чаще всего map достают, когда из массива объектов нужен массив чего-то одного: имён, id, цен. Главное правило — функция обязана вернуть значение. Если она ничего не возвращает, на этом месте в новом массиве окажется undefined.

const users = [{ name: "Аня", age: 25 }, { name: "Борис", age: 34 }];
const names = users.map((user) => user.name);

console.log(names);

Стрелка без фигурных скобок возвращает значение сама. А как только вы пишете фигурные скобки — return нужен явно, иначе получите массив из undefined.

const letters = ["a", "b", "c"];
console.log(letters.map((letter, i) => i + ":" + letter));

filter не меняет значения — он решает, кого пропустить дальше. Ваша функция играет роль охранника на входе: вернула true — элемент попадает в новый массив, вернула false — остаётся за бортом.

const numbers = [4, 11, 7, 20, 3];
const big = numbers.filter((n) => n > 5);

console.log(big);
console.log(big.length);

Длина результата — от нуля до длины исходного массива, порядок элементов сохраняется. И обратите внимание на разницу: у map внутри функции обычно выражение-преобразование, у filter — условие. Если вы написали в filter что-то вроде n * 2, он не преобразует числа, а просто отсеет нули: любое ненулевое число для него истинно.

reduce сворачивает весь массив в одно значение: сумму, максимум, строку, объект — что угодно. У его функции два главных параметра: аккумулятор (то, что накопилось к этому шагу) и текущий элемент. Что функция вернёт — то и станет аккумулятором на следующем шаге.

const cart = [120, 80, 300];
const total = cart.reduce((sum, price) => sum + price, 0);

console.log(total);

Второй аргумент reduce — стартовое значение аккумулятора: 0 для суммы, {} для группировки, [] для сборки массива. Пишите его всегда, даже когда кажется, что можно без него.

Свернуть можно не только в число. Классический приём — группировка: аккумулятор-объект, ключи которого мы дописываем на ходу. Здесь важно не забыть return acc в конце — иначе на следующем шаге аккумулятором станет undefined.

const words = ["кот", "кит", "пёс", "крот"];
const byFirst = words.reduce((acc, word) => {
  const letter = word[0];
  acc[letter] = (acc[letter] || []).concat(word);
  return acc;
}, {});
console.log(byFirst["к"]);

const empty = [];
console.log(empty.reduce((a, b) => a + b, 0));
// без 0 вторым аргументом здесь была бы ошибка TypeError

map и filter возвращают массив, а у массива снова есть map и filter. Поэтому вызовы выстраиваются в цепочку и читаются сверху вниз, как список шагов: «взять чётные, возвести в квадрат, сложить». reduce обычно ставят последним — он возвращает уже не массив.

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers
  .filter((n) => n % 2 === 0)
  .map((n) => n * n)
  .reduce((sum, n) => sum + n, 0);
console.log(result);

Порядок в цепочке — не только про смысл, но и про работу впустую: сначала filter, потом map, чтобы преобразовывать меньше элементов. И если цепочка выросла до пяти звеньев, спокойно разбейте её на две переменные с говорящими именами — это не «менее красиво», это понятнее.

map, filter и reduce не трогают исходный массив — они возвращают новое значение. Отсюда самая частая ошибка новичка: вызвать метод и не присвоить результат. Массив останется прежним, а работа пропадёт.

const source = [3, 1, 2];
const plus = source.map((n) => n + 10);

console.log(plus);
console.log(source);

А вот sort, reverse, push, splice — из другого семейства: они перестраивают сам массив. Поэтому sort в середине цепочки способен незаметно испортить данные, на которые ссылается кто-то ещё. Современная замена — toSorted и toReversed: те же операции, но с копией. В React это различие станет правилом: массив, изменённый на месте, не перерисует экран. Почему так происходит, объясняет статья «Объекты и массивы в состоянии» в части IV.

const scores = [3, 1, 2];
const sorted = scores.sort();

console.log(sorted);
console.log(scores);

forEach — тоже перебор, но он ничего не собирает и всегда возвращает undefined. Его дело — побочное действие: вывести в консоль, отправить запрос, показать alert. Если вы пытаетесь получить из forEach результат, вам был нужен map.

const people = ["Аня", "Борис"];
const nothing = people.forEach((name) => name.toUpperCase());

console.log(nothing);
console.log(people.map((name) => name.toUpperCase()));

Выбор метода сводится к одному вопросу: что вы хотите получить на выходе?