Skip to main content

How to Sum the Values of an Object in JavaScript

A common task in data manipulation is to calculate the sum of all numeric values within a JavaScript object. This is useful for summarizing financial data, aggregating report numbers, or counting inventory. The most modern and idiomatic way to achieve this is by combining Object.values() with the powerful Array.prototype.reduce() method.

This guide will teach you how to use this functional approach to sum an object's values in a single, concise line of code. We will also cover the more traditional method using a for...in loop for comparison.

This is the most efficient and readable modern approach. It's a simple two-step process that can be chained into a single line:

  1. Object.values(obj): This method returns an array containing all of the object's own enumerable property values.
  2. .reduce((acc, value) => acc + value, 0): This method iterates over the array of values and "reduces" it down to a single value—the sum.

For example, you have an object with numeric values and need to calculate their total.

// Problem: How to sum the values 10, 20, and 30?
let data = {
  apples: 10,
  bananas: 20,
  cherries: 30,
};

Solution:

let data = {
  apples: 10,
  bananas: 20,
  cherries: 30,
};

// 1. Get an array of the object's values.
let values = Object.values(data);
console.log(values);    // Output: [10, 20, 30]

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

console.log(sum);       // Output: 60
note

This can be written more concisely as a single, chained statement:

let sum = Object.values(data).reduce((acc, val) => acc + val, 0);

How the reduce() Method Works​

The reduce() method is a powerful tool for processing arrays. It executes a "reducer" function on each element of the array, resulting in a single output value. array.reduce(callback, initialValue)

  • callback(accumulator, currentValue): A function that is called for each element.
    • accumulator: The value returned from the previous iteration. It "accumulates" the result.
    • currentValue: The current element being processed in the array.
  • initialValue: An optional starting value for the accumulator. For a sum, this should always be 0.

In our example, the process looks like this:

  1. Iteration 1: accumulator is 0, currentValue is 10. Returns 0 + 10 = 10.
  2. Iteration 2: accumulator is now 10, currentValue is 20. Returns 10 + 20 = 30.
  3. Iteration 3: accumulator is now 30, currentValue is 30. Returns 30 + 30 = 60.
  4. The loop finishes, and reduce() returns the final accumulator value, 60.

An Alternative Method: The for...in Loop​

The traditional way to solve this problem is to use a for...in loop to iterate over the object's keys and add each corresponding value to a running total.

let data = {
  apples: 10,
  bananas: 20,
  cherries: 30,
};

let sum = 0;
for (let key in data) {
  // Check to ensure the property belongs to the object itself (not its prototype)
  if (Object.hasOwn(data, key)) {
    sum += data[key];
  }
}

console.log(sum); // Output: 60
note

While this works perfectly, the reduce() method is generally preferred in modern JavaScript for its conciseness and functional style, as it avoids the need to declare an intermediate sum variable.

Handling Non-Numeric Values​

Both methods shown above will produce incorrect results if the object contains non-numeric values.

Problem

// Problem: The 'owner' property is not a number.
let data = {
  apples: 10,
  bananas: 20,
  owner: 'Alice',
};

let sum = Object.values(data).reduce((acc, val) => acc + val, 0);
console.log(sum); // Output: '30Alice' (This is string concatenation, not addition!)

Solution You must filter out or ignore non-numeric values. The reduce() method makes this easy.

let data = {
  apples: 10,
  bananas: 20,
  owner: 'Alice',
};

let sum = Object.values(data).reduce((acc, val) => {
  // Only add the value if it is a number
  if (typeof val === 'number') {
    return acc + val;
  }
  return acc;
}, 0);

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

Conclusion​

Summing the values of an object is a common task with a clear and modern solution in JavaScript.

  • The Object.values(obj).reduce((acc, val) => acc + val, 0) pattern is the recommended best practice. It is concise, highly readable, and leverages functional programming principles.
  • The traditional for...in loop is a perfectly valid alternative, but it is more verbose.
  • Always remember to handle non-numeric values by adding a type check inside your reducer function or loop to avoid bugs.

Table of Contents