What you'll be able to do

By the end of this page you should be able to read a reduce call as “start with a value, visit each item, return the next value,” use an initial value on purpose, and write small sums or counts without treating reduce like magic.

Previous post: some, every, includes.

Who this is for

  • People who skip every reduce example because it looks dense
  • Beginners who forget the initial value and get a weird first step
  • Anyone who rewrites sum loops by hand and wants the array-method version

You can skip this if you already reduce with a clear initial value and can explain the accumulator out loud. Come back when a missing initial value turns your first item into the “total.”

The plain idea

reduce walks the array and keeps one running result (the accumulator). Your callback receives that running result plus the current item, and must return the next running result.

const nums = [2, 3, 5];
const total = nums.reduce(function (acc, n) {
  return acc + n;
}, 0);
console.log(total); // 10

Scenario A — cart total. Start at 0, add each price.

Scenario B — count how many tags you have. Start at 0, add 1 each visit (or just use .length — reduce is for teaching the pattern).

Read it left to right: start 0 → after 2 is 2 → after 3 is 5 → after 5 is 10.

Always pass an initial value (as a beginner)

Without an initial value, the first array item becomes the starting accumulator, and the walk begins at the second item. That is legal, but easy to misuse on empty arrays or mixed types.

[].reduce((acc, n) => acc + n); // throws
[].reduce((acc, n) => acc + n, 0); // 0 — safe

Scenario A — empty list of scores. Initial 0 keeps the page alive.

Scenario B — summing optional extras. Same habit: reduce(..., 0).

Rule for this series: give reduce a starting value until you have a clear reason not to.

Another shape: build one object

const votes = ["yes", "no", "yes"];
const tally = votes.reduce(function (acc, vote) {
  acc[vote] = (acc[vote] || 0) + 1;
  return acc;
}, {});
console.log(tally); // { yes: 2, no: 1 }

Scenario A — count tags on Learn posts. Same pattern with string keys.

Scenario B — you only needed a sum. Prefer the number accumulator; do not force an object.

Mutating acc in place (like above) is common and fine when acc is the object you created as the initial value. Do not mutate the original array items unless you mean to.

When not to reach for reduce

If map, filter, or a simple for...of is clearer, use that. reduce shines when you are folding many items into one result (number, string, object, Map).

Scenario A — double every price. That is map, not reduce.

Scenario B — keep scores above 7. That is filter.

A tiny practice file

Save as reduce.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>reduce</title>
  </head>
  <body>
    <button id="sum">Sum [4, 8, 3]</button>
    <button id="tally">Tally votes</button>
    <pre id="out"></pre>
    <script>
      const out = document.getElementById("out");
      document.getElementById("sum").addEventListener("click", function () {
        const total = [4, 8, 3].reduce(function (acc, n) {
          return acc + n;
        }, 0);
        out.textContent = "sum = " + total;
      });
      document.getElementById("tally").addEventListener("click", function () {
        const votes = ["yes", "no", "yes"];
        const tally = votes.reduce(function (acc, vote) {
          acc[vote] = (acc[vote] || 0) + 1;
          return acc;
        }, {});
        out.textContent = JSON.stringify(tally);
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. Forgetting return acc. Next step gets undefined.

2. Skipping the initial value. Empty arrays throw; first item becomes the total seed.

3. Using reduce for a simple map. Harder to read for no gain.

4. Ignoring the callback order. It is (acc, item), not (item, acc).

5. Starting a sum at "" by accident. String concat instead of math.

6. Treating reduce as the only “pro” tool. Clear code beats clever folds.

What to try before the next post

  1. Sum [1,2,3,4] with initial 0.
  2. Count how many times "js" appears in a string array.
  3. Call reduce on [] with and without an initial value (in the console).
  4. Build the tiny HTML file.

Next in this series: slice, splice, and concat — copy vs cut vs join, and the splice mutation surprise.

Try this next outside the series

Arrays get easier when you see them render UI lists and move through real transforms.

javascripttutorialsdevelopers