자바스크립트(JS) 배열을 객체로 변환하는 3가지 방법

자바스크립트 개발을 하다 보면 객체 배열을 하나의 객체로 변환해야 하는 경우가 자주 발생합니다. 이 글에서는 id 속성을 키(key)로, name 값을 값(value)으로 사용하여 배열을 객체로 변환하는 여러 가지 방법을 예제와 함께 살펴봅니다.

문제 상황

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

const arr = [
    {id: 1, name: "Mohan"},
    {id: 2, name: "Sohan"},
    {id: 3, name: "Rohan"}
];

이 배열을 인자로 받아 각 요소의 id를 키로, name을 값으로 갖는 객체를 생성하는 함수를 작성해야 합니다. 즉, 위 배열에 대한 기대 출력 결과는 다음과 같습니다.

const output = {1:{name:"Mohan"}, 2:{name:"Sohan"}, 3:{name:"Rohan"}};

방법 1: for 반복문 사용

가장 기본적인 방식은 반복문을 돌면서 빈 객체에 키-값 쌍을 하나씩 추가하는 것입니다.

const arr = [
    {id: 1, name: "Mohan"},
    {id: 2, name: "Sohan"},
    {id: 3, name: "Rohan"}
];

const arrayToObject = arr => {
    const res = {};
    for (let ind = 0; ind < arr.length; ind++) {
        res[arr[ind].id] = {
            "name": arr[ind].name
        };
    }
    return res;
};

console.log(arrayToObject(arr));

출력 결과

콘솔에는 다음과 같이 출력됩니다. 객체의 숫자형 키는 내부적으로 문자열로 변환되기 때문에 따옴표가 붙어 있는 점에 유의하세요.

{
    '1': { name: 'Mohan' },
    '2': { name: 'Sohan' },
    '3': { name: 'Rohan' }
}

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

reduce()를 활용하면 더 간결하고 함수형 스타일로 작성할 수 있습니다. 누적 객체에 각 요소를 차례대로 추가하는 방식입니다.

const arrayToObject = arr =>
    arr.reduce((acc, item) => {
        acc[item.id] = { name: item.name };
        return acc;
    }, {});

console.log(arrayToObject(arr));

방법 3: Object.fromEntries() 사용 (ES2019+)

ES2019부터 지원되는 Object.fromEntries()를 사용하면 한 줄로도 해결할 수 있습니다. 먼저 map()으로 [키, 값] 형태의 배열을 만든 후 객체로 변환하는 방식입니다.

const arrayToObject = arr =>
    Object.fromEntries(arr.map(item => [item.id, { name: item.name }]));

console.log(arrayToObject(arr));

정리

• 직관적인 흐름이 필요하거나 학습 목적이라면 for 반복문 방식이 적합합니다.
• 함수형 프로그래밍 스타일을 선호한다면 reduce()가 좋은 선택입니다.
• 모던 자바스크립트 환경에서는 Object.fromEntries()가 가장 간결합니다.

세 방법 모두 동일한 결과를 반환하므로, 프로젝트의 코드 스타일과 브라우저 호환성 요구 사항에 맞는 방법을 선택하면 됩니다.