Функциональное программирование в JS: map, filter, reduce

map() — преобразование каждого элемента

Используется, когда нужно получить новый массив той же длины, но с изменёнными значениями.

const prices = [100, 200, 300];
const withTax = prices.map(price => price * 1.2);

console.log(withTax); // [120, 240, 360]

Когда применять:

• форматирование данных
• извлечение нужного поля из объектов
• преобразование значений перед выводом

Пример:

const users = [{name: 'Анна'}, {name: 'Игорь'}];
const names = users.map(user => user.name);

console.log(names); // ['Анна', 'Игорь']

filter() — отбор элементов по условию

Возвращает новый массив только с теми элементами, которые прошли проверку.

const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter(n => n % 2 === 0);

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

Когда применять:

• фильтрация активных пользователей
• поиск товаров по критериям
• очистка массива от `null`, `undefined`, пустых значений

Пример:

const products = [
  { title: 'Ноутбук', inStock: true },
  { title: 'Монитор', inStock: false }
];

const available = products.filter(item => item.inStock);

reduce() — сведение массива к одному результату

Самый мощный и самый “опасный” для новичков метод. Он проходит по массиву и собирает одно итоговое значение: число, объект, массив, строку.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);

console.log(sum); // 10

Когда применять:

• сумма, среднее, максимум
• группировка объектов
• построение словарей и счётчиков

Пример подсчёта:

const fruits = ['apple', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(count); // { apple: 2, banana: 1 }

Почему это удобно 🚀

`map`, `filter`, `reduce`:

• не изменяют исходный массив, если вы сами этого не делаете
• делают код декларативным
• хорошо читаются в цепочках

Пример цепочки:

const orders = [100, 250, 80, 400];

const result = orders
  .filter(order => order > 100)
  .map(order => order * 0.9)
  .reduce((sum, order) => sum + order, 0);

console.log(result); // 585

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

• забывают `return` в фигурных скобках
• используют `reduce`, когда достаточно `map` или `filter`
• мутируют аккумулятор или исходные данные без необходимости
• не передают начальное значение в `reduce`

Итог:
`map` — меняет каждый элемент
`filter` — оставляет нужные
`reduce` — собирает итог

Это база современного JavaScript, особенно в React, Node.js и работе с API 📦

👉 Загляните в подборку каналов про IT — там ещё больше практики, инструментов и полезных разборов.

🗣 Подборки каналов
🧠 Каталог ботов и приложений
🗺 Навигация