The reduce() Method Deep Dive

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It is one of the most powerful and flexible array methods, often used for summing, grouping, flattening, and building complex accumulations.

Syntax

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

• accumulator – accumulates the callback’s return values; it is the previously returned value or the initialValue.
• currentValue – the current element being processed.
• index – the index of the current element (optional).
• array – the array reduce was called upon (optional).
• initialValue – value to use as the first accumulator; if omitted, the first element is used as accumulator and iteration starts from the second element.

Key Points

• If initialValue is not provided and the array is empty, reduce() throws a TypeError.
• The reducer function must return a value that becomes the new accumulator.
• reduce() does not modify the original array.
• Can be used to implement many other array methods (map, filter, etc.).

Code Example

// Summing numbers
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

// Without initialValue
const sum2 = numbers.reduce((acc, curr) => acc + curr);
console.log(sum2); // 15

// Building an object (grouping)
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

// Flattening array of arrays
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, curr) => acc.concat(curr), []);
console.log(flat); // [1, 2, 3, 4, 5]

// Chaining operations
const pipeline = [1, 2, 3, 4, 5].reduce((acc, val) => {
  if (val % 2 === 0) acc.push(val * 2);
  return acc;
}, []);
console.log(pipeline); // [4, 8] (filter even then double)