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

JavaScript를 다루다 보면 객체로 이루어진 배열을 각 객체의 값만 담고 있는 배열의 배열 형태로 변환해야 하는 경우가 종종 있습니다. 예를 들어 차트 라이브러리에 데이터를 전달하거나 CSV 형식으로 내보낼 때 이러한 변환이 유용하게 사용됩니다.

문제 상황

다음과 같이 객체들을 요소로 가지는 배열이 있다고 가정해 보겠습니다.

const arr = [
    {"Date":"2014","Amount1":90,"Amount2":800},
    {"Date":"2015","Amount1":110,"Amount2":300},
    {"Date":"2016","Amount1":3000,"Amount2":500}
];

우리가 작성해야 할 함수는 이러한 배열을 입력으로 받아, 객체 대신 배열을 요소로 가지는 새로운 배열로 변환하는 것입니다.

즉, 최종 결과물은 다음과 같은 형태가 되어야 합니다.

const output = [
    ['2014', 90, 800],
    ['2015', 110, 300],
    ['2016', 3000, 500]
];

해결 방법: Object.values() 활용하기

이 문제는 Object.values() 메서드를 사용하면 간단하게 해결할 수 있습니다. Object.values()는 객체가 가진 모든 열거 가능한 속성 값을 배열 형태로 반환해 주기 때문에, 각 객체를 순회하면서 해당 메서드의 결과를 새로운 배열에 담아주면 됩니다.

const arr = [
    {"Date":"2014","Amount1":90,"Amount2":800},
    {"Date":"2015","Amount1":110,"Amount2":300},
    {"Date":"2016","Amount1":3000,"Amount2":500}
];
const arrify = (arr = []) => {
    const res = [];
    const { length: l } = arr;
    for(let i = 0; i < l; i++){
        const obj = arr[i];
        const subArr = Object.values(obj);
        res.push(subArr);
    };
    return res;
};
console.log(arrify(arr));

코드 설명

arrify 함수: 변환할 배열을 매개변수로 받으며, 인자가 전달되지 않을 경우를 대비해 기본값으로 빈 배열([])을 설정합니다.
구조 분해 할당: const { length: l } = arr;를 통해 배열의 길이를 미리 변수에 저장하여 반복문마다 length 속성에 접근하는 비용을 줄입니다.
Object.values(obj): 각 객체의 키-값 쌍 중 값들만 추출하여 ['2014', 90, 800]과 같은 하위 배열을 만듭니다.
res.push(subArr): 생성된 하위 배열을 결과 배열에 순서대로 추가합니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

[ [ '2014', 90, 800 ], [ '2015', 110, 300 ], [ '2016', 3000, 500 ] ]

추가 팁: map()으로 더 간결하게 작성하기

같은 로직은 map() 메서드를 사용하면 한 줄로 더욱 간결하게 표현할 수도 있습니다.

const arrify = (arr = []) => arr.map(obj => Object.values(obj));
console.log(arrify(arr));
// [ [ '2014', 90, 800 ], [ '2015', 110, 300 ], [ '2016', 3000, 500 ] ]

map()은 원본 배열을 변경하지 않으면서 각 요소를 변환한 새로운 배열을 반환하므로, 이러한 데이터 변환 작업에 특히 적합합니다. 참고로 Object.values()가 반환하는 값들의 순서는 객체에 속성이 추가된 순서를 따르므로, 원본 객체의 속성 순서가 중요한 경우 이 점을 유의해야 합니다.