The three workhorses of functional JavaScript: transform every item, keep some items, fold everything into one value — without mutating the original.

map — transform each element

JavaScript

const prices = [10, 20, 30];
const withTax = prices.map((p) => p * 1.1);
console.log(withTax.map((p) => p.toFixed(2)));
const users = [{ name: "Asha", age: 28 }, { name: "Ravi", age: 17 }];
console.log(users.map(({ name }) => name));
console.log(users.map((u, i) => `${i + 1}. ${u.name}`));

Output

[ '11.00', '22.00', '33.00' ]
[ 'Asha', 'Ravi' ]
[ '1. Asha', '2. Ravi' ]

filter — keep what passes the test

JavaScript

const nums = [5, 12, 8, 130, 44];
console.log(nums.filter((n) => n > 10));
const mixed = [0, "a", null, "", 7, undefined, false];
console.log(mixed.filter(Boolean));          // remove falsy values
const unique = [1, 2, 2, 3, 1].filter((x, i, arr) => arr.indexOf(x) === i);
console.log(unique);

Output

[ 12, 130, 44 ]
[ 'a', 7 ]
[ 1, 2, 3 ]

reduce — fold into a single value

array.reduce((accumulator, current, index, array) => newAccumulator, initialValue)

JavaScript

const nums = [1, 2, 3, 4];
console.log(nums.reduce((sum, n) => sum + n, 0));
console.log(nums.reduce((max, n) => (n > max ? n : max), -Infinity));

const words = ["apple", "avocado", "banana", "cherry", "blueberry"];
const byLetter = words.reduce((groups, w) => {
  (groups[w[0]] ??= []).push(w);
  return groups;
}, {});
console.log(byLetter);

const pairs = [["a", 1], ["b", 2]];
console.log(pairs.reduce((obj, [k, v]) => ({ ...obj, [k]: v }), {}));

Output

10
4
{
  a: [ 'apple', 'avocado' ],
  b: [ 'banana', 'blueberry' ],
  c: [ 'cherry' ]
}
{ a: 1, b: 2 }

JavaScript

try {
  [].reduce((a, b) => a + b);
} catch (e) {
  console.log(e.message);
}
console.log([].reduce((a, b) => a + b, 0));

Output

Reduce of empty array with no initial value
0

Chaining

JavaScript

const orders = [
  { item: "book", qty: 2, price: 12, paid: true },
  { item: "pen", qty: 10, price: 1.5, paid: false },
  { item: "lamp", qty: 1, price: 40, paid: true },
];
const revenue = orders
  .filter((o) => o.paid)
  .map((o) => o.qty * o.price)
  .reduce((sum, v) => sum + v, 0);
console.log(revenue);

Output

forEach and flatMap

JavaScript

const out = [];
const r = ["x", "y"].forEach((v, i) => out.push(v + i));
console.log(out, r);          // forEach always returns undefined
const sentences = ["hello world", "hi there"];
console.log(sentences.flatMap((s) => s.split(" ")));
console.log([1, 2, 3].flatMap((n) => (n % 2 ? [n, n * 10] : [])));

Output

[ 'x0', 'y1' ] undefined
[ 'hello', 'world', 'hi', 'there' ]
[ 1, 10, 3, 30 ]

Method	Returns	Use when
`map`	New array, same length	Transforming each item
`filter`	New array, ≤ length	Selecting items
`reduce`	Any single value	Sums, grouping, building objects
`forEach`	`undefined`	Side effects only (logging, DOM)
`flatMap`	New array, flattened one level	Map where each item yields 0..n items

What is the difference between map and forEach?

Implement map using reduce.