JavaScript로 배열 안에서 동일한 키를 가진 객체 하나로 병합하기

데이터를 다루다 보면 여러 개로 흩어져 있는 객체를 하나로 합쳐야 하는 경우가 자주 발생합니다. 이번 글에서는 동일한 id 값을 가진 객체들을 하나의 객체로 묶는 방법을 JavaScript의 reduce() 메서드를 활용해 알아보겠습니다.

문제 상황

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

const arr = [
    {id: 1, h1: 'Daily tests'},
    {id: 2, h1: 'Details'},
    {id: 1, h2: 'Daily classes'},
    {id: 3, h2: 'Results'},
    {id: 2, h3: 'Admissions'},
    {id: 1, h4: 'Students'},
    {id: 2, h5: 'Alumni'},
    {id: 3, h3: 'Appreciations'},
    {id: 1, h5: 'Tiny Tots'},
    {id: 1, h6: 'Extras'},
];

여기서 우리가 만들어야 할 함수는 이 배열을 변환하여, 같은 id를 가진 모든 제목 속성(h1, h2, h3 …)이 하나의 객체 안에 모이도록 처리하는 것입니다.

해결 코드

reduce()와 findIndex()를 조합하면 간단하게 해결할 수 있습니다. 로직은 다음과 같습니다.

• 배열을 순회하면서 현재 객체의 id가 결과 배열에 이미 존재하는지 확인합니다.
• 존재한다면 해당 위치의 객체에 새로운 키-값 쌍을 추가하고,
• 존재하지 않는다면 새 객체를 결과 배열에 push합니다.

const arr = [
    {id: 1, h1: 'Daily tests'},
    {id: 2, h1: 'Details'},
    {id: 1, h2: 'Daily classes'},
    {id: 3, h2: 'Results'},
    {id: 2, h3: 'Admissions'},
    {id: 1, h4: 'Students'},
    {id: 2, h5: 'Alumni'},
    {id: 3, h3: 'Appreciations'},
    {id: 1, h5: 'Tiny Tots'},
    {id: 1, h6: 'Extras'},
];
const clubArray = (arr) => {
    return arr.reduce((acc, val, ind) => {
        const index = acc.findIndex(el => el.id === val.id);
        if(index !== -1){
            const key = Object.keys(val)[1];
            acc[index][key] = val[key];
        } else {
            acc.push(val);
        };
        return acc;
    }, []);
};
console.log(clubArray(arr));

실행 결과

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

[
    {
        id: 1,
        h1: 'Daily tests',
        h2: 'Daily classes',
        h4: 'Students',
        h5: 'Tiny Tots',
        h6: 'Extras'
    },
    { id: 2, h1: 'Details', h3: 'Admissions', h5: 'Alumni' },
    { id: 3, h2: 'Results', h3: 'Appreciations' }
]

코드 설명

reduce()는 초기값으로 빈 배열 []을 받아 순차적으로 누적하며 작업을 수행합니다. 각 단계에서 findIndex()를 사용해 누적 배열(acc) 안에 같은 id를 가진 객체가 있는지 탐색합니다.

만약 이미 존재하는 객체라면 Object.keys(val)[1]로 두 번째 키(예: h1, h2 등)를 추출한 뒤, 기존 객체에 그 키와 값을 덮어씌워 추가합니다. 반대로 존재하지 않는다면 해당 객체를 그대로 누적 배열에 넣습니다.

이처럼 reduce()를 활용하면 중복된 키를 기준으로 데이터를 깔끔하게 그룹화할 수 있으며, API 응답 데이터 정리나 중첩 데이터 구조 평탄화 작업에도 유용하게 응용할 수 있습니다.