References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript array.reduce() method

Method JavaScript All modern browsers Updated
Quick answer

The reduce() method collapses an array into a single value by running a function that carries a running result — the accumulator — from one element to the next. [1, 2, 3, 4].reduce((sum, n) => sum + n, 0) returns 10. It can build a number, a string, an object or another array. Always pass an initial value as the second argument.

Overview

reduce() is the most powerful — and most intimidating — of the array methods, but the idea is simple. It keeps a running total (the accumulator), shows your function each element in turn, and lets you fold that element into the total. After the last element, the final accumulator is the result. Summing numbers is the classic example, but you can reduce to anything: a count, a grouped object, a flattened array.

Your callback receives the accumulator and the current element (plus index and array if you want them), and must return the new accumulator. The second argument to reduce() itself is the starting value — and you should almost always provide it. Pass 0 to sum, '' to build a string, {} to build an object, [] to build an array.

Why insist on the initial value? Without it, reduce() uses the first element as the seed and starts from the second — and on an empty array with no initial value, it throws a TypeError. Passing a seed makes the behavior predictable and the empty case safe. If you only ever sum simple numbers, reduce is great; for grouping and tallying it's unbeatable, though a plain loop is sometimes more readable.

Syntax

const result = array.reduce(callbackFn, initialValue)

array.reduce((accumulator, element, index, array) => {
  return /* the updated accumulator */;
}, initialValue)

Parameters

The array.reduce() method accepts the following parameters.

Parameter Description
callbackFn Run for each element. Receives (accumulator, element, index, array) and must return the next accumulator.
initialValue The starting accumulator. Strongly recommended — without it the first element is used as the seed, and an empty array throws.

Examples

Live example
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const cart = [12.5, 4.0, 8.25];

  // total the cart
  const total = cart.reduce((sum, price) => sum + price, 0);

  document.getElementById('out').textContent =
    'Total: $' + total.toFixed(2); // Total: $24.75
</script>

Example #2

Live example
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const votes = ['yes', 'no', 'yes', 'yes', 'no'];

  // tally votes into an object
  const tally = votes.reduce((counts, vote) => {
    counts[vote] = (counts[vote] || 0) + 1;
    return counts;
  }, {});

  document.getElementById('out').textContent = JSON.stringify(tally); // {"yes":3,"no":2}
</script>

Best practices

  • Always pass an initialValue — it keeps the result predictable and stops empty arrays from throwing a TypeError.
  • Always return the accumulator from the callback, even when you're just mutating an object you're building.
  • Match the initial value to your goal: 0 to sum, "" to concatenate, {} to group, [] to collect.
  • If a reduce() grows hard to read, a simple for...of loop is often clearer — readability beats cleverness.

Frequently asked questions

What does reduce() do in JavaScript?
It reduces an array to a single value by accumulating a result across all elements with a callback. The result can be a number, string, object or array.
Why should I pass an initial value to reduce()?
It sets the starting accumulator and the type of the result, and it prevents the TypeError that reduce throws on an empty array with no initial value.
How do I sum an array with reduce()?
Use arr.reduce((sum, n) => sum + n, 0). The 0 is the initial sum.
When should I use reduce() instead of map() or filter()?
When you're combining elements into one value — a total, a tally, a grouped object. For one-to-one transforms use map(); to select a subset use filter().