JavaScript에서 map 또는 reduce를 사용하여 2D 배열을 객체로 변환하는 방법

사람들의 나이 정보를 담고 있는 2차원 배열이 있다고 가정해 보겠습니다.

예제 데이터

const data = [
    ['Rahul',23],
    ['Vikky',27],
    ['Sanjay',29],
    ['Jay',19],
    ['Dinesh',21],
    ['Sandeep',45],
    ['Umesh',32],
    ['Rohit',28],
];

요구 사항

이 2차원 배열을 입력받아, 각 하위 배열의 첫 번째 요소(문자열)를 키(key)로, 두 번째 요소를 값(value)으로 하는 하나의 객체를 반환하는 함수를 작성해야 합니다.

reduce()를 활용한 해결 방법

Array.prototype.reduce() 메서드를 사용하면 배열을 순회하면서 누적 객체를 손쉽게 만들 수 있습니다. 작성된 코드는 다음과 같습니다.

const data = [
    ['Rahul',23],
    ['Vikky',27],
    ['Sanjay',29],
    ['Jay',19],
    ['Dinesh',21],
    ['Sandeep',45],
    ['Umesh',32],
    ['Rohit',28],
];
const constructObject = arr => {
    return arr.reduce((acc, val) => {
        const [key, value] = val;
        acc[key] = value;
        return acc;
    }, {});
};
console.log(constructObject(data));

코드 동작 원리

1. 초기값 설정: reduce()의 두 번째 인자로 빈 객체 {}를 전달하여 누적값(acc)의 시작점을 지정합니다.
2. 구조 분해 할당: 각 순회에서 const [key, value] = val;를 통해 하위 배열의 두 요소를 각각 추출합니다.
3. 객체에 추가: acc[key] = value;로 누적 객체에 새로운 키-값 쌍을 저장한 뒤, 해당 객체를 반환하여 다음 순회로 넘깁니다.

출력 결과

콘솔에는 아래와 같은 객체가 출력됩니다.

{
    Rahul: 23,
    Vikky: 27,
    Sanjay: 29,
    Jay: 19,
    Dinesh: 21,
    Sandeep: 45,
    Umesh: 32,
    Rohit: 28
}

참고: Object.fromEntries() 활용

ES2019 이상 환경이라면 Object.fromEntries() 메서드를 사용해 한 줄로 더 간결하게 처리할 수도 있습니다.

const result = Object.fromEntries(data);
console.log(result); // 위 reduce 예제와 동일한 결과 출력

두 방법 모두 결과는 같지만, reduce()는 변환 과정에 추가 로직(필터링, 값 변경 등)을 넣기에 유연하고, Object.fromEntries()는 단순 변환 시 가독성이 뛰어나다는 장점이 있습니다.