자바스크립트에서 객체 배열을 병합하고 합산하는 최적의 방법: reduce()와 Object.values() 활용

Object.values()와 reduce()로 객체 배열 병합하기

자바스크립트에서 객체 컬렉션을 병합하고 중복된 데이터를 하나로 통합하는 가장 효과적인 방법은 Object.values()와 reduce()를 함께 활용하는 것입니다. 이 두 메서드를 조합하면 동일한 키(예: 학생 ID)를 가진 객체들을 자동으로 그룹화하고, 숫자 값을 누적하여 깔끔하게 정리할 수 있습니다.

다음과 같은 학생 정보 객체 배열이 있다고 가정해 보겠습니다. 여기에는 studentId가 10인 John 학생의 데이터가 두 번 중복되어 있습니다.

var details = [
   { studentId: 10, marks: 75, studentName: "John" },
   { studentId: 10, marks: 75, studentName: "John" },
   { studentId: 11, marks: 98, studentName: "Bob" }
];

코드 예제

아래 코드는 reduce()를 사용해 각 객체를 studentId 기준으로 누적 처리한 뒤, Object.values()로 결과 객체에서 값 배열만 추출하는 방식입니다. 동일한 studentId가 이미 존재하면 marks 값을 더하고, 존재하지 않으면 새로운 항목으로 추가합니다.

var details = [
   { studentId: 10, marks: 75, studentName: "John" },
   { studentId: 10, marks: 75, studentName: "John" },
   { studentId: 11, marks: 98, studentName: "Bob" }
];
output = Object.values(details.reduce((value, object) => {
   if (value[object.studentId]) {
      ['marks'].forEach(key => value[object.studentId][key] = value[object.studentId][key] + object[key]);
      } else {
         value[object.studentId] = { ...object };
   }
   return value;
}, {}));
console.log(output);

동작 원리

1. reduce(): 배열을 순회하면서 초기값({})에 각 객체를 studentId를 키로 하여 저장합니다.
2. 중복 검사: 해당 studentId가 이미 존재하면 marks 값을 기존 값에 더해 누적합니다.
3. 전개 연산자(...): 새로운 studentId라면 객체 전체를 복사하여 새 항목으로 저장합니다.
4. Object.values(): 최종적으로 키-값 형태의 임시 객체에서 값들만 추출해 배열로 반환합니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다. 파일 이름은 예시로 demo237.js를 사용했습니다.

node fileName.js

실행 결과

실행하면 아래와 같이 studentId가 같은 객체들이 병합되고, marks 값이 합산(75 + 75 = 150)되어 출력됩니다.

PS C:\Users\Amit\javascript-code> node demo237.js
[
   { studentId: 10, marks: 150, studentName: 'John' },
   { studentId: 11, marks: 98, studentName: 'Bob' }
]