Array.prototype.reduce()

reduce(callbackFn, initialValue)

The reduce() method executes a callback function for each element in an array, accumulating all values into a single result. The callback receives four parameters: the accumulator (result from previous iteration), the current element, its index, and the array itself. If an initial value is provided, reduce starts with that as the accumulator and iterates from index 0. Without an initial value, it uses the first element as the accumulator and starts from index 1.

Syntax

reduce(callbackFn)
reduce(callbackFn, initialValue)

Parameters

Parameter	Type	Default	Description
callbackFn	Function	—	Function to execute for each element. Receives accumulator, currentValue, currentIndex, and array.
accumulator	any	—	Value accumulated across iterations. First call uses initialValue if provided, otherwise array[0].
currentValue	any	—	Value of current element. First call uses array[0] with initialValue, otherwise array[1].
currentIndex	number	—	Index of current element. Starts at 0 (with initialValue) or 1 (without).
array	Array	—	The array being reduced.
initialValue	any	undefined	Starting value for accumulator. If omitted, uses first element.

Examples

Summing an array with initial value

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

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 15

Counting occurrences

const names = ['Alice', 'Bob', 'Alice', 'Charlie', 'Bob', 'Alice'];

const counts = names.reduce((acc, name) => {
  acc[name] = (acc[name] || 0) + 1;
  return acc;
}, {});

console.log(counts); // { Alice: 3, Bob: 2, Charlie: 1 }

Common Patterns

Function piping: Chain functions where each output feeds into the next.

const pipe = (...fns) => (initial) => fns.reduce((acc, fn) => fn(acc), initial);

const double = x => x * 2;
const addFive = x => x + 5;

const compute = pipe(double, addFive);
console.log(compute(10)); // 25

Promise sequencing: Run async operations in order.

const runPromises = (...fns) => (initial) =>
  fns.reduce((promise, fn) => promise.then(fn), Promise.resolve(initial));

const p1 = x => Promise.resolve(x * 2);
const p2 = x => Promise.resolve(x + 3);

runPromises(p1, p2)(5).then(console.log); // 13

Without initialValue gotcha: When omitted, the first element becomes the accumulator.

// Works fine
[1, 2, 3].reduce((a, b) => a + b); // 6

// Throws TypeError on empty array
[Global_Objects::eval].reduce((a, b) => a + b); // TypeError

// Safe with initialValue
[Global_Objects::eval].reduce((a, b) => a + b, 0); // 0

When to Avoid reduce

While reduce is powerful, certain tasks have better alternatives. For flattening arrays, use flat() instead. For grouping objects, Object.groupBy() is cleaner and more readable. These methods express intent more clearly and often perform better.

See Also

• array::map — Transform each element
• array::filter — Select elements by condition
• array::flat — Flatten arrays (often replaces reduce for this)

Next Steps

Now that you understand reduce(), practice with these challenges:

1. Build a shopping cart total calculator using reduce
2. Implement your own pipe function to chain array methods
3. Try rewriting a for loop as reduce to see the difference

Pair reduce with other array methods like map() and filter() in a single chain for powerful data transformations.