JavaScript Arrays

JavaScript Array reduce

Written by Swapnil RajaPublished 24 Aug 2026

JavaScript reduce boils 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.

What is reduce?

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.

Adding Up

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.

The Starting Value Matters

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.

Finding the Largest

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.

Building a String

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.

Counting Occurrences

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>

Try It Yourself

Run the above example in the Try It Editor.

Try counting instead:

Change the callback to sum + 1 to count the items.

Important Points

reduce turns an array into one value.
The callback receives the accumulator and the current element.
The second argument is the starting value.
Always return the accumulator from the callback.
The accumulator can be a number, string, object, or array.

Conclusion

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.

PreviousJavaScript Array filter NextJavaScript Array find