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

문제 상황

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

const arr = [
    {"name": "Rahul", "score": 89},
    {"name": "Vivek", "score": 88},
    {"name": "Rakesh", "score": 75},
    {"name": "Sourav", "score": 82},
    {"name": "Gautam", "score": 91},
    {"name": "Sunil", "score": 79},
];

이처럼 여러 개의 객체가 담긴 배열이 있을 때, 각 요소의 name 값을 키(key)로, score 값을 그 키에 대응하는 값(value)으로 갖는 단일 객체를 만들어야 하는 경우가 자주 있습니다.

이번 글에서는 이러한 변환을 수행하는 JavaScript 함수를 두 가지 방법으로 구현해 보겠습니다.

방법 1: 반복문(for) 사용

가장 직관적인 방법은 for 반복문으로 배열을 순회하면서 빈 객체에 속성을 하나씩 추가하는 것입니다. 구조 분해 할당(destructuring)을 활용하면 코드가 더욱 깔끔해집니다.

예제 코드

const arr = [
    {"name": "Rahul", "score": 89},
    {"name": "Vivek", "score": 88},
    {"name": "Rakesh", "score": 75},
    {"name": "Sourav", "score": 82},
    {"name": "Gautam", "score": 91},
    {"name": "Sunil", "score": 79},
];

const buildObject = arr => {
    const obj = {};
    for (let i = 0; i < arr.length; i++) {
        const { name, score } = arr[i];
        obj[name] = score;
    }
    return obj;
};

console.log(buildObject(arr));

출력 결과

콘솔에는 다음과 같은 결과가 출력됩니다.

{ Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

방법 2: reduce() 메서드 사용

Array.prototype.reduce() 메서드를 사용하면 동일한 로직을 더 간결하고 함수형(functional) 스타일로 작성할 수 있습니다. 초기값으로 빈 객체를 전달하고, 순회할 때마다 누적 객체에 속성을 추가하는 방식입니다.

예제 코드

const buildObject = arr =>
    arr.reduce((acc, { name, score }) => {
        acc[name] = score;
        return acc;
    }, {});

console.log(buildObject(arr));

출력 결과

{ Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

정리

객체 배열을 단일 객체로 변환할 때는 for 반복문이나 reduce() 메서드 모두 사용할 수 있으며, 결과는 완전히 동일합니다. 코드의 가독성과 팀의 코딩 스타일에 맞는 방식을 선택하면 됩니다. 참고로 ES2019부터 도입된 Object.fromEntries()와 map()을 조합하면 한 줄로도 처리할 수 있습니다.