JavaScript Array reduce() Method

What You’ll Learn

The reduce() method folds an array into a single value by running a callback on each element and carrying an accumulator forward. This tutorial covers syntax, initialValue, five examples (sum, max, flatten, object build, average), and comparisons with forEach and reduceRight.

Introduction

Sometimes you do not want a new array—you want one number, one object, or one string built from many pieces. Summing prices, finding the maximum score, or merging nested lists are all reduce() jobs.

Think of the accumulator as a running total or bucket. Each step updates it; the final return is your answer. The source array is not modified.

Understanding the reduce() Method

array.reduce(callback, initialValue?) calls callback(accumulator, currentValue, index, array) for each element, left to right. Whatever you return becomes the accumulator for the next step.

If initialValue is provided, the first call uses it as the accumulator and starts at index 0. If omitted, the first element becomes the initial accumulator and iteration starts at index 1.

📝 Syntax

General form of Array.prototype.reduce:

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

Parameters

• callback — returns the next accumulator value.
• initialValue — optional starting accumulator (recommended for clarity).

Callback arguments

• accumulator — running result so far.
• currentValue — current element.
• index — current position.
• array — the array being reduced.

Return value

• Final accumulator after the last element (any type).
• Original array unchanged.

Common patterns

• arr.reduce((a, n) => a + n, 0) — sum.
• arr.reduce((max, n) => n > max ? n : max) — max (no init on non-empty).
• arr.reduce((acc, x) => acc.concat(x), []) — flatten one level.
• arr.reduce((obj, item) => ({ ...obj, [item]: true }), {}) — lookup object.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

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

const sum = numbers.reduce((acc, num) => {
  return acc + num;
}, 0);

console.log(sum);
// 15

15

const scores = [88, 92, 76, 95, 84];

const max = scores.reduce((acc, score) => {
  return score > acc ? score : acc;
});

console.log(max);
// 95

95

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

const flat = nested.reduce((acc, chunk) => {
  return acc.concat(chunk);
}, []);

console.log(flat);
// [1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5, 6]

const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];

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

console.log(counts);
// { apple: 3, banana: 2, cherry: 1 }

{ apple: 3, banana: 2, cherry: 1 }

const numbers = [10, 20, 30, 40];

const sum = numbers.reduce((acc, n) => acc + n, 0);
const average = sum / numbers.length;

console.log(average);
// 25

25

🚀 Common Use Cases

• Totals and stats — sum, product, min, max, average.
• Grouping — build objects or Maps from arrays.
• Flattening — merge nested arrays one level.
• Pipeline composition — fold functions or values.
• Single-pass transforms — filter + map in one loop (advanced).
• Cart totals — sum price * qty across items.

📝 Notes

• Does not mutate the source array.
• Always return the accumulator from your callback.
• Empty array without initialValue throws TypeError.
• Result type can be anything: number, string, object, array.
• Order matters—use reduceRight for right-to-left.
• Prefer readable loops when reduce hurts clarity.
• ES5—excellent support including IE9+.

💡 Best Practices