자바스크립트에서 객체의 키와 값을 뒤집는 역방향 매핑 방법

자바스크립트 개발을 하다 보면 객체의 키(key)와 값(value)을 서로 뒤바꿔야 하는 경우가 종종 있습니다. 이번 글에서는 기존 객체의 값을 새로운 키로, 기존 키를 새로운 값으로 바꾸는 역방향 매핑(reverse map) 함수를 만드는 방법을 알아보겠습니다.

문제 상황

다음과 같은 객체가 있다고 가정해 보겠습니다.

const obj = {
  'a': 1,
  'b': 2,
  'c': 3,
  'd': 4,
  'e': 5,
  'f': 6
};

이 객체의 키와 값을 뒤집어서, 숫자가 키가 되고 문자가 값이 되도록 만들어야 합니다. 즉, 아래와 같은 결과를 얻는 것이 목표입니다.

const output = {
  '1': 'a',
  '2': 'b',
  '3': 'c',
  '4': 'd',
  '5': 'e',
  '6': 'f'
};

해결 방법: reverseMap 함수 구현

이 문제는 Object.keys() 메서드로 객체의 모든 키를 가져온 뒤, 각 키에 해당하는 값을 새 객체의 키로 사용하면 간단히 해결할 수 있습니다.

예제 코드

const obj = {
  'a': 1,
  'b': 2,
  'c': 3,
  'd': 4,
  'e': 5,
  'f': 6
};

const reverseMap = (obj = {}) => {
  const res = {};
  Object.keys(obj).forEach(key => {
    const val = obj[key];
    res[val] = key;
  });
  return res;
};

console.log(reverseMap(obj));

코드 설명

• Object.keys(obj): 원본 객체의 모든 키('a', 'b', 'c'...)를 배열 형태로 반환합니다.
• forEach(): 반환된 배열을 순회하면서 각 키에 대응하는 값을 꺼냅니다.
• res[val] = key: 원래의 값을 새 객체의 키로, 원래의 키를 값으로 저장하여 역방향 매핑을 완성합니다.

실행 결과

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

{ '1': 'a', '2': 'b', '3': 'c', '4': 'd', '5': 'e', '6': 'f' }

추가 팁: reduce를 활용한 더 간결한 방법

같은 로직은 reduce()와 Object.entries()를 조합하면 더욱 간결하게 표현할 수 있습니다.

const reverseMap = obj =>
  Object.entries(obj).reduce((acc, [key, val]) => {
    acc[val] = key;
    return acc;
  }, {});

Object.entries()는 [키, 값] 쌍의 배열을 반환하므로, 구조 분해 할당(destructuring)과 함께 사용하면 코드가 한층 읽기 쉬워집니다.

주의 사항

자바스크립트에서 객체의 키는 항상 문자열(또는 심볼)로 변환된다는 점에 유의해야 합니다. 따라서 원본 값이 숫자라도 새 객체의 키가 될 때는 '1', '2'처럼 문자열로 변환됩니다. 또한 원본 객체에 중복된 값이 있다면 나중에 등장하는 키가 앞선 키를 덮어쓰게 되므로, 값의 고유성이 보장되지 않는 경우에는 데이터 손실 여부를 반드시 확인해야 합니다.