JavaScript Sum Array of Objects Value by Key Example

If you have an array of objects in JavaScript and you want to sum their values based on a specific key, you can use various methods.

Here you will find some examples of the sum of array values using for loop, sum of array object values using reduce() method, reduce() array of objects by key, and javascript reduce array values using javascript map() method.

How to Get a Sum Array of Objects value By Key in JavaScript

Here are a few examples using different approaches:

Approach 1: javascript sum numbers in an array
Approach 2: Sum array values using reduce() method
Approach 3: Sum array values using Using the forEach
Approach 4: Sum an array of objects Using a loop
Approach 5: Sum an array of objects Using the reduce

Approach 1: javascript sum numbers in an array

If you have a simple array which has only numeric values. Then you can use for loop, sum their values easy.

As you can see this example.

var numArr = [10, 20, 30, 40] // sums to value = 100
var sum = 0;
for (var i = 0; i < numArr.length; i++) {
  sum += numArr[i]
}
document.write( "javascript- Sum of the array value is :- " + sum );

Ex:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript sum array values</title>
</head>
<body>
  <script type = "text/javascript">
    var numArr = [10, 20, 30, 40] // sums to value = 100
    var sum = 0;
    for (var i = 0; i < numArr.length; i++) {
      sum += numArr[i]
    }
    document.write( "javascript- Sum of the array value is :- " + sum ); 
  </script>  
</body>
</html>

Result of the above code is :- 100

Approach 2: Sum array values using reduce() method

If you don’t use a loop. If you want to iterate the reduce method over simple arrays you can do that too.

As you can see in this example.

    var numArr = [10, 20, 30, 40] // sums to value = 100
    var sum = numArr.reduce(function(a, b){return a+b;})
    document.write( "javascript- Sum of the array value is :- " + sum );

Ex:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript sum array values using reduce() method</title>
</head>
<body>
  <script type = "text/javascript">
    var numArr = [10, 20, 30, 40, 50] // sums to value = 100
    var sum = numArr.reduce(function(a, b){return a+b;})
    document.write( "javascript- Sum of the array value is :- " + sum ); 
  </script>  
</body>
</html>

Result of the above code is: 150

Approach 3: Sum array values using Using the `forEach`

The forEach method provides a clean and readable way to iterate over each element of an array. It is used here to add values based on a specified key, making the code more expressive and less verbose than a traditional loop.

Here is an example of the sum array of objects by key using forEach() method.

// Assuming you have an array of objects like this:
const arrayOfObjects = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 }
];

// Summing values based on the 'value' key
let sum = 0;
arrayOfObjects.forEach(obj => {
  sum += obj.value;
});

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

Approach 4: Sum array of objects Using a loop

From for loop you can iterate over the array and add each array elements according to specific key. This is very easy approach.

Here is an example of the sum array of objects by key using for loop method.

    var numArr = [
        {  name: 'a', num: 50},
        {  name: 'b', num: 50},
        {  name: 'c', num: 75},
        {  name: 'd', num: 35},
        {  name: 'e', num: 25 },
    ];
    var sum = 0;
    for (var i = 0; i < numArr.length; i++) {
      sum += numArr[i].num
    }
    document.write( "javascript- Sum of the array value is :- " + sum );

Ex:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript sum array of objects</title>
</head>
<body>
  <script type = "text/javascript">
    var numArr = [
        {  name: 'a', num: 50},
        {  name: 'b', num: 50},
        {  name: 'c', num: 75},
        {  name: 'd', num: 35},
        {  name: 'e', num: 25 },
    ];
    var sum = 0;
    for (var i = 0; i < numArr.length; i++) {
      sum += numArr[i].num
    }
    document.write( "javascript- Sum of the array value is :- " + sum ); 
  </script>  
</body>
</html>

Result of the above code is:- 235

Approach 5: Sum an array of objects Using the `reduce`

The reduce method is concise way to iterate over an array while storing a single value. In this case, it is used to sum the values of an array of objects based on a specific key.

Here is an example of the sum array of objects by key using reduce method.

    var numArr = [
        {  name: 'a', num: 50},
        {  name: 'b', num: 50},
        {  name: 'c', num: 75},
        {  name: 'd', num: 35},
        {  name: 'e', num: 25 },
        {  name: 'f', num: 40 },
    ];
    var sum = numArr.reduce(function (total, currentValue) {
        return total + currentValue.num;
    }, 0);
    document.write( "javascript- Sum of the array value is :- " + sum );

Ex:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript sum array of objects</title>
</head>
<body>
  <script type = "text/javascript">
    var numArr = [
        {  name: 'a', num: 50},
        {  name: 'b', num: 50},
        {  name: 'c', num: 75},
        {  name: 'd', num: 35},
        {  name: 'e', num: 25 },
        {  name: 'f', num: 40 },
    ];
    var sum = numArr.reduce(function (total, currentValue) {
        return total + currentValue.num;
    }, 0);
    document.write( "javascript- Sum of the array value is :- " + sum ); 
  </script>  
</body>
</html>

Result of the above code is:- 275