JavaScript에서 객체 배열을 하나의 일반 객체로 변환하는 방법

JavaScript로 개발하다 보면 여러 개의 객체가 담긴 배열을 하나의 단일 객체로 합쳐야 하는 경우가 종종 발생합니다. 이번 글에서는 객체 배열 내 모든 속성(property)을 하나의 객체로 병합하는 방법을 알아보겠습니다.

문제 상황

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

const arr = [{
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
}, {
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
}];

우리가 작성해야 할 함수는 위와 같은 객체 배열을 인자로 받아, 배열 내 모든 객체에 존재하는 속성들을 하나의 객체에 모두 담아 반환해야 합니다.

따라서 위 배열에 대한 함수의 최종 출력 결과는 다음과 같아야 합니다.

const output = {
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
};

예제 코드

다음은 forEach 메서드와 for...in 루프를 활용해 구현한 코드입니다.

const arr = [{
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
}, {
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
}];
const mergeObjects = (arr = []) => {
    const res = {};
    arr.forEach(obj => {
        for(key in obj){
            res[key] = obj[key];
        };
    });
    return res;
};
console.log(mergeObjects(arr));

출력 결과

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

{
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
}

참고: 더 간결한 대안 방법

ES6 이상 환경에서는 Object.assign() 또는 전개 연산자(spread operator)를 사용하면 훨씬 짧은 코드로 동일한 결과를 얻을 수 있습니다.

// Object.assign 활용
const merged1 = Object.assign({}, ...arr);

// 전개 연산자 활용
const merged2 = { ...arr[0], ...arr[1] };

단, 두 방법 모두 동일한 키가 여러 객체에 존재할 경우 나중에 등장한 객체의 값으로 기존 값이 덮어쓰인다는 점에 유의해야 합니다. 따라서 키 중복이 없는 데이터를 다룰 때 가장 안전하게 활용할 수 있습니다.