JavaScript: 객체 배열에서 속성값이 같은 요소를 비교해 하나로 합치는 방법

JavaScript에서 객체 배열을 다루다 보면 특정 속성값이 중복되는 요소들을 하나로 묶어야 하는 경우가 자주 발생합니다. 예를 들어, 데이터 저장 장치 정보를 담은 다음과 같은 배열이 있다고 가정해 보겠습니다.

const drives = [
  {size:"900GB", count:3},
  {size:"900GB", count:100},
  {size:"1200GB", count:5},
  {size:"900GB", count:1}
];

위 배열을 잘 살펴보면 "900GB"라는 동일한 size 값이 여러 번 등장하는 것을 확인할 수 있습니다.

문제 정의

우리가 작성해야 할 함수는 이런 배열을 입력받아 중복된 size 값을 가진 객체들을 하나로 통합하고, 해당 그룹의 count 값들은 모두 더한 뒤 새로운 배열로 반환하는 역할을 합니다.

예제 코드

reduce()와 Object.keys()를 활용하면 간결하게 해결할 수 있습니다.

const drives = [
  {size:"900GB", count:3},
  {size:"900GB", count:100},
  {size:"1200GB", count:5},
  {size:"900GB", count:1}
];

const groupDrives = (arr = []) => {
  // reduce로 size를 키로 하는 맵을 생성하며 count를 누적
  const map = arr.reduce((map, e) => {
    if (e.size in map) map[e.size].count += e.count;
    else map[e.size] = e;
    return map;
  }, {});

  // 맵을 다시 배열 형태로 변환
  const result = Object.keys(map).map(function (k) {
    return this[k];
  }, map);

  return result;
};

console.log(groupDrives(drives));

코드 동작 원리

1단계 – reduce()로 그룹화: 빈 객체({})를 초기값으로 사용하고, 각 요소를 순회하며 size 값을 키로 삼습니다. 이미 같은 키가 존재하면 기존 객체의 count에 현재 값을 더해 누적하고, 존재하지 않으면 해당 객체를 그대로 저장합니다.

2단계 – 배열로 재변환: Object.keys()로 맵의 모든 키를 추출한 뒤, map()의 두 번째 인자로 맵 자체를 전달해 this[k] 방식으로 각 키에 대응하는 객체를 꺼내 최종 배열을 완성합니다.

실행 결과

콘솔에는 다음과 같이 size별로 병합된 결과가 출력됩니다.

[ { size: '900GB', count: 104 }, { size: '1200GB', count: 5 } ]

"900GB" 세 개의 count(3 + 100 + 1)가 합쳐져 104가 되었고, "1200GB"는 중복이 없으므로 그대로 유지된 것을 확인할 수 있습니다. 이 패턴은 매출 데이터 집계, 로그 분석, 재고 관리 등 실무에서 중복 데이터를 통합해야 하는 다양한 상황에서 유용하게 활용할 수 있습니다.