The JavaScript array.reduce() method
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
<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
<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 aTypeError. - Always
returnthe accumulator from the callback, even when you're just mutating an object you're building. - Match the initial value to your goal:
0to 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?
Why should I pass an initial value to reduce()?
TypeError that reduce throws on an empty array with no initial value.How do I sum an array with reduce()?
arr.reduce((sum, n) => sum + n, 0). The 0 is the initial sum.