JavaScript Arrays: map, filter, reduce, and Modern Methods

map, filter, reduce — the core three

These three methods cover most data transformation needs. They do not mutate the original array.

const nums = [1, 2, 3, 4, 5];

// map — transform each element
const doubled = nums.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter — keep elements matching a condition
const evens = nums.filter(n => n % 2 === 0);
// [2, 4]

// reduce — accumulate to a single value
const sum = nums.reduce((acc, n) => acc + n, 0);
// 15

forEach vs map

forEach executes a function for each element and returns undefined. Use it for side effects, not transformations.

const nums = [1, 2, 3];

// forEach — for side effects, returns undefined
nums.forEach(n => console.log(n));

// BUG: forEach doesn't return anything
const result = nums.forEach(n => n * 2);
console.log(result);  // undefined

// CORRECT: use map for transformations
const doubled = nums.map(n => n * 2);

find, findIndex, some, every

Short-circuit methods that stop iterating as soon as they have an answer.

const users = [
    { id: 1, name: "Alice", age: 25 },
    { id: 2, name: "Bob",   age: 17 },
    { id: 3, name: "Carol", age: 30 },
];

users.find(u => u.age < 18);       // { id: 2, name: "Bob", age: 17 }
users.findIndex(u => u.id === 2);  // 1
users.some(u => u.age < 18);       // true (any match)
users.every(u => u.age >= 18);     // false (not all match)

Spread, rest, and destructuring

Spread copies array elements. Rest collects remaining elements. Destructuring extracts elements into variables.

// Spread
const a = [1, 2, 3];
const b = [...a, 4, 5];   // [1, 2, 3, 4, 5]
const c = [...a, ...b];   // [1, 2, 3, 1, 2, 3, 4, 5]

// Destructuring
const [first, second, ...rest] = [10, 20, 30, 40];
// first=10, second=20, rest=[30, 40]

// Swap two variables
let x = 1, y = 2;
[x, y] = [y, x];  // x=2, y=1

flat and flatMap

flat() flattens nested arrays. flatMap() maps then flattens one level.

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

nested.flat();     // [1, 2, 3, 4, [5, 6]] — one level
nested.flat(2);    // [1, 2, 3, 4, 5, 6]   — two levels
nested.flat(Infinity);  // fully flattened

// flatMap = map + flat(1)
const sentences = ["hello world", "foo bar"];
sentences.flatMap(s => s.split(" "));
// ["hello", "world", "foo", "bar"]

Exam tip

The most common array interview question involves reduce. Know that the second argument to reduce is the initial accumulator value — without it, reduce uses the first element as the accumulator and starts from the second element.