Skip to main content

How to Get the Sum of All Values in a Map in JavaScript

The Map object in JavaScript is a powerful way to store key-value pairs, and a common operation is to calculate the sum of all its numerical values. This is useful for tasks like totaling a shopping cart, aggregating scores, or summarizing data.

This guide will teach you the most effective and readable methods for summing the values in a Map. We will cover the modern and recommended functional approach using reduce(), as well as the classic for...of loop.

The Core Task: Summing Numerical Values​

The goal is to iterate through a Map and add up all of its values, assuming they are numbers.

// Problem: How to calculate the sum of the values (10 + 25 + 15)?
const productQuantities = new Map([
  ['apples', 10],
  ['oranges', 25],
  ['bananas', 15],
]);

The Array.prototype.reduce() method is the most concise and declarative way to solve this problem. It is designed to "reduce" an array down to a single value, which in our case is the total sum.

The logic:

  1. Use map.values() to get an iterable of just the values from the Map.
  2. Convert this iterable into an array so we can use array methods. The spread syntax (...) is a clean way to do this.
  3. Call .reduce() on the array of values to compute the sum.

This clean, one-line solution is the best practice.

const productQuantities = new Map([
  ['apples', 10],
  ['oranges', 25],
  ['bananas', 15],
]);

// Get an iterable of the values and spread it into an array
const values = [...productQuantities.values()]; // -> [10, 25, 15]

// Use reduce to sum the array of values
const sum = values.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // `0` is the initial value of the accumulator

console.log(sum); // Output: 50

The Manual Looping Method: for...of​

The classic imperative approach is to create a counter variable and manually add to it within a loop. The for...of loop is the modern and readable way to iterate over the values of a Map.

The logic:

  1. Initialize a sum variable to 0.
  2. Use map.values() to get an iterable of the Map's values.
  3. Use a for...of loop to iterate through each value.
  4. On each iteration, add the value to the sum.

Solution:

const productQuantities = new Map([
  ['apples', 10],
  ['oranges', 25],
  ['bananas', 15],
]);

let sum = 0;

for (const value of productQuantities.values()) {
  sum += value;
}

console.log(sum); // Output: 50

Why reduce() is the Best Practice​

While both methods work perfectly, the reduce() approach is generally preferred in modern JavaScript for several reasons:

  • Declarative Style: reduce() clearly states your intent—to reduce the array to a single value. A for...of loop is more imperative, describing the step-by-step process of mutation.
  • Immutability: The reduce() method avoids the need to declare a mutable let variable outside the loop's scope. This aligns with functional programming principles and can lead to more predictable code.
  • Conciseness: It often accomplishes the goal in a more compact and fluent manner.

For a simple sum, the for...of loop is perfectly readable, but reduce() is a more powerful and scalable pattern for more complex aggregations.

Conclusion​

For summing the numerical values in a Map, modern JavaScript provides clean and effective solutions.

  • The reduce() method is the recommended best practice. It is the most concise, declarative, and functional approach. Remember to get the values first with [...myMap.values()].
  • The for...of loop is a perfectly valid and highly readable imperative alternative.

By using these modern iteration methods, you can reliably and efficiently perform calculations on the data stored in your Map objects.

Table of Contents