JavaScript로 객체 배열의 키별 값 합계 구하기

JavaScript를 다루다 보면 객체 배열에서 동일한 키를 가진 값들을 모두 더해 하나의 객체로 정리해야 하는 경우가 종종 있습니다. 이번 글에서는 그러한 상황을 해결하는 방법을 단계별로 살펴보겠습니다.

문제 상황

다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [{a: 2, b: 5, c: 6}, {a: 3, b: 4, d: 1}, {a: 1, d: 2}];

각 객체 내부에서 키는 고유하지만(유효한 객체가 되기 위한 조건), 서로 다른 객체들끼리는 같은 키를 가질 수 있습니다.

우리가 작성해야 할 함수는 이런 배열을 입력받아, 배열 전체에 존재하는 모든 고유 키를 추출하고, 각 키에 해당하는 값들을 모두 합산한 결과 객체를 반환하는 것입니다.

따라서 최종 결과물은 다음과 같은 형태가 됩니다.

const output = { a: 6, b: 9, c: 6, d: 3 };

해결 방법

핵심 아이디어는 간단합니다. 배열을 순회하면서 각 객체의 키를 확인하고, 결과 객체에 해당 키가 이미 존재하면 기존 값에 더하고, 없으면 새로 추가하는 방식입니다.

코드로 구현하면 다음과 같습니다.

const arr = [{a: 2, b: 5, c: 6}, {a: 3, b: 4, d: 1}, {a: 1, d: 2}];

const sumArray = arr => {
  const res = {};
  for (let i = 0; i < arr.length; i++) {
    Object.keys(arr[i]).forEach(key => {
      res[key] = (res[key] || 0) + arr[i][key];
    });
  }
  return res;
};

console.log(sumArray(arr));

코드 설명

위 코드의 동작 원리를 자세히 살펴보겠습니다.

• res[key] = (res[key] || 0) + arr[i][key] 부분이 핵심 로직입니다. res[key]에 값이 이미 있다면 그 값을 사용하고, 없다면(undefined) 기본값인 0을 사용합니다.
• Object.keys() 메서드는 각 객체가 가진 모든 키를 배열 형태로 반환하므로, forEach로 손쉽게 순회할 수 있습니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

{ a: 6, b: 9, c: 6, d: 3 }

키 a의 경우 2 + 3 + 1 = 6, 키 b는 5 + 4 = 9, 키 c는 6, 키 d는 1 + 2 = 3으로 정확히 합산된 것을 확인할 수 있습니다.

추가 팁: reduce 활용하기

같은 로직을 reduce 메서드를 사용해 더 함수형 스타일로 작성할 수도 있습니다.

const sumArray = arr =>
  arr.reduce((acc, obj) => {
    Object.keys(obj).forEach(key => {
      acc[key] = (acc[key] || 0) + obj[key];
    });
    return acc;
  }, {});

이 방식은 별도의 외부 변수 없이 초기값으로 빈 객체를 넘겨 처리하기 때문에 코드가 더 간결해집니다. 상황에 맞게 두 가지 방법 중 편한 방식을 선택하시면 됩니다.