JavaScript에서 키 배열과 값 배열로 Map 객체 만드는 방법

JavaScript를 사용하다 보면 키 배열과 값 배열이 따로 존재하는 경우, 이 둘을 하나의 맵(Map)으로 묶어야 할 때가 있습니다. 예를 들어 다음과 같은 두 개의 배열이 있다고 가정해 보겠습니다.

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

우리가 만들고자 하는 것은 keys 배열의 i번째 요소를 키로, values 배열의 i번째 요소를 그에 대응하는 값으로 매핑한 맵입니다. 즉, 원하는 출력 결과는 다음과 같습니다.

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

해결 방법: Map 객체 활용하기

가장 직관적인 방법은 JavaScript 내장 객체인 Map을 생성한 뒤, 반복문으로 keys 배열을 순회하면서 같은 인덱스의 값을 하나씩 설정(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));

코드 설명

new Map(): 새로운 빈 Map 객체를 생성합니다.
map.set(key, value): 지정한 키와 값을 맵에 추가합니다. 동일한 키가 이미 존재하면 기존 값이 새 값으로 대체됩니다.
두 배열의 길이가 같다는 전제 하에 인덱스를 기준으로 키와 값을 짝지어 저장합니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

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

추가 팁: 더 간결한 작성 방법

반복문 대신 Array.prototype.map과 Object.fromEntries, 또는 reduce를 활용하면 더 선언적인 스타일로 동일한 결과를 얻을 수 있습니다.

// map + Map 생성자 활용
const map = new Map(
  keys.map((key, i) => [key, values[i]])
);

// reduce 활용
const map2 = keys.reduce((acc, key, i) => {
  acc.set(key, values[i]);
  return acc;
}, new Map());

두 방식 모두 앞선 예제와 완전히 동일한 Map을 반환합니다. 선언형 코드는 의도가 명확하게 드러난다는 장점이 있지만, 대량의 데이터를 처리할 때는 일반적인 for 루프가 여전히 성능 면에서 유리할 수 있다는 점을 참고하세요.