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

JavaScript 개발을 하다 보면 배열 안에 여러 개의 하위 배열이 들어 있는 형태의 데이터를 자주 접하게 됩니다. 이런 구조는 각 하위 배열이 하나의 키-값 쌍을 나타내는 경우가 많은데요, 실무에서는 이를 다루기 쉬운 객체(Object) 형태로 변환해야 할 때가 많습니다.

문제 상황

예를 들어, 크리켓 선수의 경기 기록이 아래와 같이 배열의 배열 형태로 저장되어 있다고 가정해 보겠습니다.

const arr = [
    ['Name', 'V Kohli'],
    ['Matches', 13],
    ['Runs', 590],
    ['Highest', 183],
    ['NO', 3],
    ['SR', 131.5]
];

여기서 각 하위 배열은 하나의 키-값 쌍을 의미합니다. 첫 번째 요소가 키(key), 두 번째 요소가 값(value)입니다.

우리가 작성해야 할 함수는 이러한 배열을 인자로 받아, 배열에 담긴 키-값 쌍들을 기반으로 객체를 생성한 뒤 그 객체를 반환하는 역할을 합니다.

따라서 위 배열을 변환하면 최종적으로 아래와 같은 결과가 나와야 합니다.

const output = {
    Name: 'V Kohli',
    Matches: 13,
    Runs: 590,
    Highest: 183,
    NO: 3,
    SR: 131.5
};

구현 방법

가장 직관적인 방법은 반복문을 사용하여 각 하위 배열을 순회하면서, 구조 분해 할당(Destructuring)으로 키와 값을 추출한 후 빈 객체에 차례대로 할당하는 것입니다.

아래는 전체 코드입니다.

const arr = [
    ['Name', 'V Kohli'],
    ['Matches', 13],
    ['Runs', 590],
    ['Highest', 183],
    ['NO', 3],
    ['SR', 131.5]
];

const arrayToObject = (arr = []) => {
    const res = {};
    for (pair of arr) {
        const [key, value] = pair;
        res[key] = value;
    }
    return res;
};

console.log(arrayToObject(arr));

코드 설명

arrayToObject 함수는 매개변수에 기본값으로 빈 배열을 지정하여, 인자가 전달되지 않아도 오류 없이 동작하도록 합니다.
for...of 문으로 배열의 각 하위 배열(쌍)을 순회합니다.
const [key, value] = pair; 구조 분해 할당을 통해 각 쌍의 첫 번째 요소는 키로, 두 번째 요소는 값으로 꺼냅니다.
res[key] = value;로 결과 객체에 속성을 추가하고, 모든 순회가 끝나면 완성된 객체를 반환합니다.

실행 결과

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

{
    Name: 'V Kohli',
    Matches: 13,
    Runs: 590,
    Highest: 183,
    NO: 3,
    SR: 131.5
}

추가 팁: Object.fromEntries 활용하기

ES2019부터는 Object.fromEntries() 메서드를 사용하면 위 로직을 한 줄로 더 간결하게 처리할 수 있습니다.

const output = Object.fromEntries(arr);
console.log(output); // { Name: 'V Kohli', Matches: 13, Runs: 590, ... }

Object.fromEntries()는 키-값 쌍의 목록(배열 또는 Map 등 iterable)을 받아 객체로 변환해 주므로, 최신 JavaScript 환경이라면 이 방법을 우선적으로 고려하는 것이 좋습니다. 다만 구형 브라우저 호환이 필요하다면 앞서 소개한 반복문 방식이 안전한 선택입니다.