JS Sum Array of Objects

In this article, we will see how to sum an array of objects in JS.

Why sum the array of objects?

• If we have an array of objects with numeric properties such as a “price” or “quantity,” we need to sum these objects ​​to find the total value of the objects.
• If you have an array of sales data with a “category” property, you can sum the sales for each category to see which categories are the most popular.
• The objects in the array have a boolean property, summing these values can give you a count of how many objects are complete.

3 Ways to sum array of Objects

These are the most common ways to find the sum of all the property values in the array of objects.

1. Using ‘for’ loop

In this method, we use only ‘for’ loop to find the sum of array objects and it is a traditional way of iterating over arrays in JS. Here’s an example of how you can sum:

const student = [
  { name: 'John', mark:80 },
  { name: 'Bob',  mark:89 },
  { name: 'Rose', mark:70 },
  { name: 'Steve',mark:92 }
];

let sum = 0;
for (let i = 0; i < student.length; i++) {
  sum += student[i].mark;
}
console.log(sum);

Output:

Sum the ‘mark’ property of each object in the ‘student’ array using ‘for’ loop : 331

In this code:

• We have created the array ‘student‘ and inside it, we initialized the array using objects. Each object represents a student with two properties: “name” and “mark“.
• If we sum the property ‘mark’, we need to create a ‘for’ loop. It is used to iterate over each object in the ‘student’ array.
• We initialized the variable ‘sum’ to 0 and the ‘mark’ property of each object in the array is added to it.
• Finally, the ‘sum‘ variable holds the sum of all ‘mark’ properties in the array. So, we logged that, we got the sum of property ‘value’ in output.

2. Using the reduce() method

In this method, we’re going to use reduce() method and it is used to reduce an array of values to a single value. The reduce() method takes a callback function, so we need to pass the initial value as the first argument and the accumulator as the second argument.

const student = [
  { name: 'John', mark:81 },
  { name: 'Bob',  mark:69 },
  { name: 'Rose', mark:76 },
  { name: 'Steve',mark:99 }
];

const sum = student.reduce((accumulator, currentValue) => accumulator + currentValue.mark, 0);
console.log( sum)

Output:
Sum the ‘mark’ property of each object in the ‘student’ array using reduce(): 325

In this code:

• As we did in method1, here too we created an array called ‘Student’ and changed only the values of ‘mark’.
• Then in the callback function passed to reduce(), the accumulator parameter starts at 0 and accumulates the sum of all ‘mark’ properties in each object of the array.
• The ‘currentValue’ parameter represents the current object being processed. The reduce() method iterates over each object in the ‘student’ array and adds the value of the ‘mark’ property to the accumulator.
• Finally, the sum of all ‘mark’ property values is returned as ‘sum’. So, we got the output ‘325’.

3. Using forEach()

The ‘forEach()’ method is used to iterate over arrays and it is one of the built-in methods in JavaScript. Here’s an example to find the sum of each object in an array using the ‘forEach’ method:

const student = [
  { name: 'John', mark:37 },
  { name: 'Bob',  mark:79 },
  { name: 'Rose', mark:47 },
  { name: 'Steve',mark:100}
];

let sum = 0;
student.forEach((obj) => {
  sum  += obj.mark;
});

console.log(sum);

Output:
Sum the ‘mark’ property of each object in the ‘student’ array using ‘forEach()’ method: 263

In this code:

• We Use the forEach() method to iterate over each object in the ‘student’ array.
• Then we passed the parameter ‘obj’ to forEach() method. The ‘obj’ parameter represents the current object being processed.
• The ‘mark’ property of each object in the array is added to the ‘sum’ variable.
• Finally, the ‘sum’ variable holds the sum of all ‘mark’ properties in the array.

Conclusion

All three approaches achieve the same result: summing the mark property of each object in the ‘student’ array. They just use different JavaScript methods to do it.