JavaScript에서 배열 객체의 중복 키 값을 합산하는 방법

JavaScript를 다루다 보면 아래와 같이 동일한 키가 여러 번 반복되는 객체 배열을 만나게 됩니다.

const arr = [ {'TR-01':1}, {'TR-02':3}, {'TR-01':3}, {'TR-02':5}];

이때 필요한 것은 이러한 배열을 입력받아 동일한 키를 가진 값들을 모두 더해 하나의 객체로 정리하는 함수입니다.

즉, 최종 결과 배열은 다음과 같은 형태가 되어야 합니다.

const output = [ {'TR-01':4}, {'TR-02':8}];

구현 예제

아래 코드는 반복문과 임시 맵(map) 객체를 활용해 중복 키의 값을 누적하고, 중복된 요소는 배열에서 제거하는 방식으로 문제를 해결합니다.

const arr = [ {'TR-01':1}, {'TR-02':3}, {'TR-01':3}, {'TR-02':5}];
const sumDuplicate = arr => {
    const map = {};
    for(let i = 0; i < arr.length; ){
        const key = Object.keys(arr[i])[0];
        if(!map.hasOwnProperty(key)){
            map[key] = i++;
            continue;
        };
        arr[map[key]][key] += arr[i][key];
        arr.splice(i, 1);
    };
};
sumDuplicate(arr);
console.log(arr);

코드 설명

이 코드의 동작 원리를 단계별로 살펴보면 다음과 같습니다.

1. 맵 초기화: 각 키가 처음 등장했을 때 해당 키와 그 인덱스를 map 객체에 저장합니다.

2. 중복 처리: 이미 존재하는 키를 다시 만나면, 처음 저장된 위치의 객체에 현재 값을 더합니다.

3. 중복 제거: 값이 합쳐진 후에는 splice() 메서드로 현재 요소를 배열에서 삭제하여 결과를 깔끔하게 유지합니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

[ { 'TR-01': 4 }, { 'TR-02': 8 } ]

'TR-01'의 경우 1 + 3 = 4, 'TR-02'의 경우 3 + 5 = 8로 정확히 합산된 것을 확인할 수 있습니다.

참고: reduce를 활용한 대안

배열의 reduce() 메서드를 사용하면 원본 배열을 변경하지 않고도 같은 결과를 얻을 수 있습니다.

const result = Object.values(
  arr.reduce((acc, obj) => {
    const key = Object.keys(obj)[0];
    acc[key] = acc[key] || { [key]: 0 };
    acc[key][key] += obj[key];
    return acc;
  }, {})
);
console.log(result); // [ { 'TR-01': 4 }, { 'TR-02': 8 } ]

원본 데이터를 유지해야 하는 상황이라면 reduce 방식이 더 안전한 선택입니다.