자바스크립트에서 객체 배열을 객체의 객체로 변환하는 방법

객체 배열을 객체의 객체로 변환하기

다음과 같이 여러 객체를 담고 있는 배열이 있다고 가정해 보겠습니다.

const arr = [{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}];

여기서 요구되는 작업은 이러한 배열을 입력으로 받아 객체의 객체(object of objects) 형태로 반환하는 자바스크립트 함수를 작성하는 것입니다. 이때 각 하위 객체의 키(key)는 원래 객체가 가진 id 속성 값이 되어야 합니다.

따라서 최종 출력 결과는 다음과 같은 모습이 됩니다.

const output = {1:{name:"aa"},2:{name:"bb"},3:{name:"cc"}};

주목할 점은 id 속성이 하위 객체를 매핑하는 키로 사용된 이후에는 하위 객체 자체에서는 제거된다는 것입니다.

예제 코드

for 루프를 사용해 구현한 코드는 다음과 같습니다.

const arr = [{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}];
const arrayToObject = arr => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
        const key = arr[i]['id'];
        res[key] = arr[i];
        delete res[key]['id'];
    };
    return res;
};
console.log(arrayToObject(arr));

출력 결과

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

{ '1': { name: 'aa' }, '2': { name: 'bb' }, '3': { name: 'cc' } }

대안: reduce() 메서드 활용

for 루프 대신 ES6의 reduce() 메서드와 전개 연산자(spread operator)를 함께 사용하면 코드를 더욱 간결하게 작성할 수 있습니다.

const arrayToObject = arr =>
  arr.reduce((acc, { id, ...rest }) => {
    acc[id] = rest;
    return acc;
  }, {});
console.log(arrayToObject(arr));

두 방식 모두 동일한 결과를 반환하지만, reduce() 방식은 불변성(immutability)을 유지하며 원본 배열의 객체를 직접 수정하지 않는다는 장점이 있습니다. 반면 for 루프 방식은 delete 연산자로 원본 객체에서 id를 실제로 제거하므로, 원본 데이터를 보존해야 하는 경우에는 주의가 필요합니다.