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

인도 크리켓 선수들의 평점 정보를 담고 있는 다음과 같은 객체의 객체(object of objects)가 있다고 가정해 보겠습니다. 이 데이터를 각 요소가 name과 rating이라는 두 개의 속성을 가지는 객체 배열 형태로 변환해야 합니다. 여기서 name은 선수 이름을, rating은 해당 선수의 평점 객체를 저장합니다.

샘플 객체

const playerRating = {
    'V Kohli': {
        batting: 99,
        fielding: 99
    },
    'R Sharma': {
        batting: 98,
        fielding: 95
    },
    'S Dhawan': {
        batting: 92,
        fielding: 90
    }
}

해결 방법: Object.keys() 활용

해결 방법은 생각보다 간단합니다. Object.keys() 메서드를 사용하면 객체의 모든 키를 배열로 얻을 수 있고, 이를 순회하면서 새로운 객체 배열을 만들면 됩니다.

먼저 Object.keys(playerRating)를 호출하면 ['V Kohli', 'R Sharma', 'S Dhawan']이라는 키 배열이 반환됩니다. 그다음 forEach()로 각 키를 순회하면서 name에는 키(선수 이름)를, rating에는 해당 키에 연결된 평점 객체를 담아 빈 배열에 push하면 원하는 구조의 배열이 완성됩니다.

전체 코드 및 실행 결과

const playerRating = {
    'V Kohli': {
        batting: 99,
        fielding: 99
    },
    'R Sharma': {
        batting: 98,
        fielding: 95
    },
    'S Dhawan': {
        batting: 92,
        fielding: 90
    }
}

const objArray = [];
Object.keys(playerRating).forEach(key => objArray.push({
    name: key,
    rating: playerRating[key]
}));

console.log(objArray);

출력

[
    { name: 'V Kohli', rating: { batting: 99, fielding: 99 } },
    { name: 'R Sharma', rating: { batting: 98, fielding: 95 } },
    { name: 'S Dhawan', rating: { batting: 92, fielding: 90 } }
]

대안: Object.entries()와 map() 조합

ES2017부터 사용 가능한 Object.entries() 메서드를 활용하면 코드를 더욱 간결하게 작성할 수 있습니다. 이 메서드는 객체의 [키, 값] 쌍으로 이루어진 배열을 반환하므로, map()과 결합하면 단 한 줄로 변환이 가능합니다.

const objArray = Object.entries(playerRating)
    .map(([name, rating]) => ({ name, rating }));

console.log(objArray);

두 방법 모두 동일한 결과를 반환하지만, map()을 사용하는 방식은 불변성(immutability)을 유지하면서 새로운 배열을 생성하기 때문에 함수형 프로그래밍 스타일에 더 적합합니다. 상황에 맞게 선택하여 사용하시면 됩니다.