Чим map, filter, reduce і forEach відрізняються одне від одного?

Усі обходять масив і викликають функцію для кожного елемента:

• map - новий масив тієї ж довжини з перетвореними елементами.
• filter - новий масив лише з тими елементами, для яких функція повернула істинне значення.
• reduce - згортає масив в одне значення: суму, об'єкт, інший масив.
• forEach - нічого не повертає (undefined), лише виконує дію для кожного елемента.

const orders = [{ total: 100, paid: true }, { total: 250, paid: false }, { total: 40, paid: true }];

orders.map((o) => o.total);                       // [100, 250, 40]
orders.filter((o) => o.paid);                     // два оплачені
orders.reduce((sum, o) => sum + o.total, 0);      // 390
orders.forEach((o) => console.log(o.total));      // лише побічна дія

Типові помилки:

• map заради побічної дії, без використання результату. Для цього є forEach чи for...of.
• reduce без початкового значення на порожньому масиві кидає TypeError.
• Перервати forEach неможливо (break не працює). Якщо треба зупинитися, - for...of, some() чи find().

Усі чотири не змінюють початковий масив (хіба що сам колбек зробить це навмисно), тож їх зручно з'єднувати в ланцюжок: orders.filter(...).map(...).

Докладніше в документації: Array.prototype.map