JavaScript 객체를 [키, 값] 쌍의 2차원 배열로 변환하는 방법

문제 상황

다음과 같이 도시의 날씨 정보를 담고 있는 객체가 있다고 가정해 보겠습니다.

const obj = {
    city: "New Delhi",
    maxTemp: 32,
    minTemp: 21,
    humidity: 78,
    aqi: 456,
    day: 'Tuesday',
};

이 객체를 입력으로 받아, 각 하위 배열이 정확히 두 개의 요소로 구성된 2차원 배열을 만드는 JavaScript 함수를 작성해야 합니다. 각 하위 배열에는 다음 두 가지가 들어가야 합니다.

• 객체의 키(key)

• 해당 키에 대응하는 값(value)

따라서 위 객체에 대한 최종 출력은 다음과 같은 형태가 됩니다.

const output = [
    [ 'city', 'New Delhi' ],
    [ 'maxTemp', 32 ],
    [ 'minTemp', 21 ],
    [ 'humidity', 78 ],
    [ 'aqi', 456 ],
    [ 'day', 'Tuesday' ]
];

구현 예제

다음은 Object.keys()와 반복문을 활용한 구현 코드입니다.

const obj = {
    city: "New Delhi",
    maxTemp: 32,
    minTemp: 21,
    humidity: 78,
    aqi: 456,
    day: 'Tuesday',
};
const objectToArray = (obj = {}) => {
    const res = [];
    const keys = Object.keys(obj);
    for (key of keys) {
        res.push([
            key, obj[key]
        ]);
    };
    return res;
};
console.log(objectToArray(obj));

실행 결과

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

[
    [ 'city', 'New Delhi' ],
    [ 'maxTemp', 32 ],
    [ 'minTemp', 21 ],
    [ 'humidity', 78 ],
    [ 'aqi', 456 ],
    [ 'day', 'Tuesday' ]
];

더 간결한 방법: Object.entries()

사실 ES2017(ES8)부터 도입된 Object.entries() 메서드를 사용하면 위 작업을 단 한 줄로 처리할 수 있습니다. 이 메서드는 객체 자체의 열거 가능한 속성들을 [키, 값] 쌍의 배열 형태로 그대로 반환하기 때문입니다.

const output = Object.entries(obj);
console.log(output);

별도의 변환 로직이 필요 없다면 Object.entries()를 사용하는 것이 코드가 훨씬 간결하고 가독성도 높아 권장됩니다. 반면, 각 값을 변환하거나 특정 조건에 따라 필터링하는 등의 추가 처리가 필요하다면 직접 함수를 작성하는 첫 번째 방식이 더 유연하게 대응할 수 있습니다.