JavaScript에서 객체 속성 병합 및 그룹화하는 방법

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

const arr = [
    {name: 'lorem', age: 20, color:'red'},
    {name: 'lorem', weight: 1, height:5},
    {name: 'hello', ipsum : 'dolor'}
];

이러한 객체 배열을 입력으로 받아, 'name' 속성의 값이 서로 같은 객체들을 하나로 묶어 나머지 속성들을 모두 병합하는 JavaScript 함수를 작성해야 합니다.

예를 들어, 위 배열에 대한 출력 결과는 다음과 같아야 합니다.

const output = [
    {name: 'lorem', age : 20, color: 'red', weight : 1, height : 5},
    {name: 'hello', ipsum : 'dolor'}
];

구현 예제

이 문제를 해결하는 코드는 다음과 같습니다.

const arr = [
    {name: 'lorem', age: 20, color:'red'},
    {name: 'lorem', weight: 1, height:5},
    {name: 'hello', ipsum : 'dolor'}
];
const mergeList = (arr = []) => {
    const temp = {};
    arr.forEach(elem => {
        let name = elem.name;
        delete elem.name;
        temp[name] = { ...temp[name], ...elem };
    });
    const res = [];
    Object.keys(temp).forEach(key => {
        let object = temp[key];
        object.name = key;
        res.push(object);
    });
    return res;
};
console.log(mergeList(arr));

동작 원리

이 코드의 핵심 로직은 다음과 같이 정리할 수 있습니다.

• 임시 객체 temp를 생성하고, 각 객체의 name 값을 키(key)로 사용합니다.
• 각 요소에서 name 속성을 삭제한 뒤, 스프레드 연산자(...)를 활용해 기존에 저장된 속성들과 새로운 속성들을 자연스럽게 병합합니다.
• 병합이 완료되면 Object.keys()로 임시 객체의 키들을 순회하면서 name 속성을 다시 추가하고, 최종 결과 배열을 완성해 반환합니다.

이 방식은 반복문을 한 번만 순회하므로 효율적이며, 중복된 name을 가진 객체가 몇 개든 안전하게 처리할 수 있다는 장점이 있습니다.

출력 결과

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

[
    { age: 20, color: 'red', weight: 1, height: 5, name: 'lorem' },
    { ipsum: 'dolor', name: 'hello' }
]