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
Conclusion
Choose the method that fits best with your coding style and requirements.
