Sum a Property in an Array of Objects in TypeScript

Sum a Property in an Array of Objects in TypeScript #

To sum a property in an array of objects in TypeScript:

1. Call the reduce() method to iterate over the array.
2. On each iteration, increment the sum with the specific value.
3. The result will contain the sum of the values for the specific property.

Copied!
const arr = [
  { id: 1, salary: 25 },
  { id: 2, salary: 25 },
  { id: 3, salary: 50 },
];

const result = arr.reduce((accumulator, obj) => {
  return accumulator + obj.salary;
}, 0);

console.log(result); // 👉️ 100

The function we passed to the Array.reduce method gets invoked with each element (object) in the array.

For each object in the array, we increment the accumulator by the salary value in the object.

The reduce method returns the sum of the salary values of all objects in the array.

You might also see examples that explicitly set the accumulator and return type of the reduce() method.

Copied!
const arr = [
  { id: 1, salary: 25 },
  { id: 2, salary: 25 },
  { id: 3, salary: 50 },
];

// 👇️ using <number> generic to set return type
const result = arr.reduce<number>((accumulator, obj) => {
  return accumulator + obj.salary;
}, 0);

console.log(result); // 👉️ 100

The example above uses a generic to explicitly set the type for the accumulator variable and the return type of the reduce() method.

An alternative and perhaps simpler approach is to use the forEach method.

To sum a property in an array of objects:

1. Initialize a sum variable, using the let keyword and set it to 0.
2. Call the forEach() method to iterate over the array.
3. On each iteration, increment the sum variable with the value of the object.

Copied!
const arr = [
  { id: 1, salary: 25 },
  { id: 2, salary: 25 },
  { id: 3, salary: 50 },
];

let sum = 0;

arr.forEach((obj) => {
  sum += obj.salary;
});

console.log(sum); // 👉️ 100

The function we pass to the Array.forEach method gets called with each element in the array.

On each iteration of the loop, we increment the value stored in the sum variable to get the total amount.

This approach is more readable and intuitive, especially if you're not used to how the reduce method works.