JavaScript에서 객체 배열을 배열의 배열(2차원 배열)로 변환하는 방법

JavaScript 개발을 하다 보면 객체(object)로 이루어진 배열을 키-값 쌍이 담긴 2차원 배열, 즉 '배열의 배열' 형태로 변환해야 하는 경우가 종종 있습니다. 차트 라이브러리에 데이터를 전달하거나 CSV 형식으로 내보낼 때 특히 유용한 작업입니다.

문제 상황

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

const arr = [
    {"2015":11259750.05},
    {"2016":14129456.9}
];

이 배열을 입력으로 받아, 각 객체의 키와 값을 하나의 배열로 묶어 아래와 같은 결과를 만드는 함수를 작성해야 합니다.

const output = [
    [2015,11259750.05],
    [2016,14129456.9]
];

해결 방법

핵심 아이디어는 Object.keys() 메서드로 각 객체의 첫 번째 키를 추출한 뒤, 해당 키와 값을 새 배열에 담아 결과 배열에 추가하는 것입니다. 전체 코드는 다음과 같습니다.

const arr = [
    {"2015":11259750.05},
    {"2016":14129456.9}
];
const mapToArray = (arr = []) => {
    const res = [];
    arr.forEach(function(obj, index){
        const key = Object.keys(obj)[0];
        const value = parseInt(key, 10);
        res.push([value, obj[key]]);
    });
    return res;
};
console.log(mapToArray(arr));

코드 설명

• Object.keys(obj)[0] — 각 객체의 첫 번째 키('2015', '2016')를 가져옵니다.
• parseInt(key, 10) — 문자열인 키를 10진수 정수로 변환합니다.
• res.push([value, obj[key]]) — 연도와 금액을 하나의 배열로 묶어 결과 배열에 추가합니다.

더 간결한 방법: map() 활용

forEach() 대신 Array.prototype.map()을 사용하면 코드를 더 짧고 선언적으로 작성할 수 있습니다.

const result = arr.map(obj => {
    const key = Object.keys(obj)[0];
    return [parseInt(key, 10), obj[key]];
});
console.log(result);

실행 결과

두 방법 모두 콘솔에 다음과 같은 결과를 출력합니다.

[ [ 2015, 11259750.05 ], [ 2016, 14129456.9 ] ]