In JavaScript, you can easily sum the values of an array of objects using the reduce() method.
The reduce() method allows you to apply a function to each element of an array and accumulate the result.
How to sum array of objects in JavaScript?
In this tutorial, we will explore how to use reduce() to sum the values of an array of objects.
Sum the values of an array of objects in JavaScript using reduce() method
To sum the values of an array of objects, we first need to extract the values from the objects and create a new array with just the values we want to sum.
We can then use the reduce() method on this new array to accumulate the sum.
Here’s a JavaScript example:
const data = [
{ name: 'John', age: 30, salary: 4000 },
{ name: 'Mary', age: 25, salary: 5000 },
{ name: 'David', age: 35, salary: 6000 }
];
const totalSalary = data.reduce((acc, obj) => acc + obj.salary, 0);
console.log(totalSalary); // 15000
In this example, we have an array of objects data, where each object represents a person with their name, age, and salary. We want to sum the salaries of all the people in the array.
We first create a new array with just the salaries using the map() method:
const salaries = data.map(obj => obj.salary);
This gives us an array of numbers [4000, 5000, 6000], which we can then pass to the reduce() method.
We pass an initial value of 0 as the second argument to reduce() to start the accumulation.
The reduce() method takes a callback function with two arguments: the accumulator acc and the current object obj in the array. We add the salary of the current object to the accumulator acc and return the result.
The final result is the total sum of all the salaries in the array.
More ways in Javascript to sum numbers in array of objects
There are other ways to sum the values of an array of objects in JavaScript besides using reduce().
One alternative is to use a for...of loop to iterate through the array and accumulate the sum using a variable.
Using for ..of loop
Here’s a JavaScript example:
const data = [
{ name: 'John', age: 30, salary: 4000 },
{ name: 'Mary', age: 25, salary: 5000 },
{ name: 'David', age: 35, salary: 6000 }
];
let totalSalary = 0;
for (const obj of data) {
totalSalary += obj.salary;
}
console.log(totalSalary); // 15000
In this example, we initialize a variable totalSalary to 0 and use a for...of loop to iterate through the array data.
For each object obj in the array, we add its salary property to the totalSalary variable.
After the loop, totalSalary contains the sum of all the salaries in the array.
Using forEach loop
Another alternative is to use the forEach() method instead of a for...of loop.
Here’s a JavaScript example:
const data = [
{ name: 'John', age: 30, salary: 4000 },
{ name: 'Mary', age: 25, salary: 5000 },
{ name: 'David', age: 35, salary: 6000 }
];
let totalSalary = 0;
data.forEach(obj => {
totalSalary += obj.salary;
});
console.log(totalSalary); // 15000
In this example, we use the forEach() method on the array data to iterate through each object obj in the array and add its salary property to the totalSalary variable.
The forEach() method takes a callback function with one argument: the current object in the array.
After the loop, totalSalary contains the sum of all the salaries in the array.
Conclusion
In addition to using the reduce() method, we explored two alternative ways to sum the values of an array of objects in JavaScript: using a for...of loop and using the forEach() method.
All three methods accomplish the same task of summing the values of an array of objects, but each has its own advantages and disadvantages.
By understanding these different approaches, you can choose the method that best suits your needs and the requirements of your project.
