JavaScript Arrays
JavaScript
reduceboils an array down to a single value.
That value can be a number, a string, an object, or another array.
reduce has a reputation for being hard, but it is really just a loop with an accumulator.
Example
javascript
const numbers = [1, 2, 3, 4];
console.log(numbers.reduce((sum, n) => sum + n, 0));The output is 10.
reduce keeps a running value, called the accumulator, as it walks the array.
The callback receives the accumulator and the current element, and returns the new accumulator.
The second argument to reduce is the starting value.
Syntax
javascript
array.reduce(function (accumulator, value) {
return newAccumulator;
}, startingValue);Always give a starting value; it avoids surprises on empty arrays.
The most common use is a total.
Example
javascript
const prices = [10, 20, 30];
console.log(prices.reduce((sum, p) => sum + p, 0));The accumulator starts at 0 and grows with each price.
Without it, the first element becomes the starting value.
On an empty array that causes an error.
Example
javascript
const empty = [];
console.log(empty.reduce((sum, n) => sum + n, 0));With a starting value the answer is 0 instead of an error.
The accumulator does not have to be a running total.
Example
javascript
const numbers = [5, 12, 8, 44];
console.log(numbers.reduce((biggest, n) => (n > biggest ? n : biggest), 0));Here the accumulator holds the largest value seen so far.
The accumulator can be any type you like.
Example
javascript
const words = ["a", "b", "c"];
console.log(words.reduce((text, w) => text + w, ""));Starting with an empty string builds up abc.
Using an object as the accumulator is a common pattern.
Example
javascript
const votes = ["yes", "no", "yes"];
const counts = votes.reduce((acc, v) => {
acc[v] = (acc[v] || 0) + 1;
return acc;
}, {});
console.log(counts.yes);Remember to return the accumulator, or the next turn gets undefined.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript reduce</title>
</head>
<body>
<h1>JavaScript reduce</h1>
<p id="result"></p>
<script>
const basket = [12.5, 8, 30, 4.5];
const total = basket.reduce(function (sum, price) {
return sum + price;
}, 0);
document.getElementById("result").innerHTML = "Total: " + total;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try counting instead:
Change the callback to sum + 1 to count the items.
reduce turns an array into one value.reduce is a loop with a running value, written as one expression.
Totals, largest values, string building and grouping all fit the same shape.
Once the accumulator clicks, reduce stops being intimidating.