JavaScript Sum Array of Objects Value by Key Example

[ad_1]

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.

Ezoic

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 arrayEzoic
  • 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

Ezoic

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:-

Ezoic

<!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

Ezoic

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.

Ezoic

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

Ezoic

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:-

Ezoic

<!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

Conclusion

Choose the method that fits best with your coding style and requirements.

JavaScript Tutorials

Ezoic

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518