JavaScript로 동적 JSON 배열을 하나의 객체로 합치는 방법

JavaScript를 다루다 보면 여러 개의 키-값 쌍을 가진 객체들이 담긴 배열을 하나의 객체로 병합해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {"name1": "firstString"},
    {"name2": "secondString"},
    {"name3": "thirdString"},
    {"name4": "fourthString"},
    {"name5": "fifthString"},
    {"name6": "sixthString"},
];

이때 우리가 만들어야 할 함수는 이러한 객체 배열을 입력으로 받아, 배열 안의 모든 속성(key-value)을 하나의 객체에 모아 반환하는 함수입니다.

reduce 메서드를 활용한 해결 방법

이 문제는 배열의 reduce() 메서드와 Object.assign()을 조합하면 간단하게 해결할 수 있습니다. reduce()는 배열의 각 요소를 순회하면서 누적값(accumulator)을 만들어가는 메서드이기 때문에, 여러 객체를 하나로 합치는 작업에 매우 적합합니다.

예제 코드

const arr = [
    {"name1": "firstString"},
    {"name2": "secondString"},
    {"name3": "thirdString"},
    {"name4": "fourthString"},
    {"name5": "fifthString"},
    {"name6": "sixthString"},
];

const reduceArray = arr => {
    return arr.reduce((acc, val) => {
        Object.assign(acc, val);
        return acc;
    }, {});
};

console.log(reduceArray(arr));

코드 설명

• 초기값 {}: reduce의 두 번째 인자로 빈 객체를 전달하여 누적 결과가 객체 형태로 시작되도록 합니다.
• Object.assign(acc, val): 배열의 각 객체(val)의 속성들을 누적 객체(acc)에 복사합니다.
• return acc: 업데이트된 누적 객체를 다음 순회에 전달합니다.

실행 결과

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

{
    name1: 'firstString',
    name2: 'secondString',
    name3: 'thirdString',
    name4: 'fourthString',
    name5: 'fifthString',
    name6: 'sixthString'
}

참고: 전개 연산자(Spread Operator)를 사용한 대안

ES2018부터는 객체 전개 연산자를 활용해 더욱 간결하게 작성할 수도 있습니다.

const merged = arr.reduce((acc, val) => ({ ...acc, ...val }), {});

다만 이 방식은 매 순회마다 새로운 객체를 생성하기 때문에, 배열의 크기가 클 경우 앞서 소개한 Object.assign 방식이 성능 면에서 유리할 수 있습니다. 상황에 맞게 선택하여 사용하시면 됩니다.