JavaScript에서 키 배열과 값 배열을 Map 객체로 매핑하는 방법

JavaScript에서 두 개의 배열, 즉 키(keys) 배열과 값(values) 배열이 주어졌을 때, 이를 하나의 Map 객체로 결합하여 각 키에 해당하는 값을 매핑해야 하는 경우가 자주 있습니다.

문제 상황

예를 들어 다음과 같은 두 개의 배열이 있다고 가정해 보겠습니다.

const keys = [0, 4, 2, 3, 1];
const values = ["first", "second", "third", "fourth", "fifth"];

여기서 우리는 키 배열과 값 배열을 인자로 받아, 각 값을 대응되는 키에 매핑하는 JavaScript 함수를 작성해야 합니다.

따라서 최종 결과물은 다음과 같은 형태가 됩니다.

Map(5) {
    0 => 'first',
    4 => 'second',
    2 => 'third',
    3 => 'fourth',
    1 => 'fifth'
}

해결 방법

JavaScript의 내장 객체인 Map을 활용하면 이 문제를 간단하게 해결할 수 있습니다. Map의 set() 메서드를 사용하면 키와 값을 순서대로 저장할 수 있으며, 반복문을 통해 두 배열의 요소를 하나씩 짝지어 넣으면 됩니다.

코드 예제

const keys = [0, 4, 2, 3, 1];
const values = ["first", "second", "third", "fourth", "fifth"];

const buildMap = (keys, values) => {
    const map = new Map();
    for(let i = 0; i < keys.length; i++){
        map.set(keys[i], values[i]);
    };
    return map;
};

console.log(buildMap(keys, values));

동작 원리

위 코드는 다음과 같은 순서로 동작합니다.

1. 새로운 빈 Map 객체를 생성합니다.
2. for 반복문으로 키 배열의 길이만큼 순회하면서, 각 인덱스의 키와 값을 set() 메서드로 매핑합니다.
3. 완성된 Map 객체를 반환합니다.

실행 결과

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

Map(5) {
    0 => 'first',
    4 => 'second',
    2 => 'third',
    3 => 'fourth',
    1 => 'fifth'
}

추가 팁

만약 일반 객체(Object) 형태가 필요하다면, 반환된 Map에 Object.fromEntries()를 적용하면 손쉽게 변환할 수 있습니다.

const obj = Object.fromEntries(buildMap(keys, values));
console.log(obj); // { '0': 'first', '1': 'fifth', '2': 'third', '3': 'fourth', '4': 'second' }

또한 ES2019 이상 환경이라면 Object.fromEntries()와 Array.prototype.map()을 조합하여 한 줄로 처리할 수도 있습니다.

const buildMap = (keys, values) => new Map(keys.map((key, i) => [key, values[i]]));

이처럼 JavaScript에서는 Map 객체를 활용하면 키-값 쌍을 효율적이고 직관적으로 관리할 수 있습니다.