시스매

자바스크립트 맵 완벽 활용 가이드 복잡한 데이터 관리의 새로운 해답

19 min read

2025-09-20 15:19

자바스크립트 맵 완벽 활용 가이드: 복잡한 데이터 관리의 새로운 해답

자바스크립트의 **맵]**은 키-값 쌍을 저장하는 컬렉션으로, 흔히 사용하는 **객체(Object)**와 비슷해 보이지만 몇 가지 중요한 차이점으로 인해 특정 상황에서 매우 강력한 성능을 발휘합니다. 이번 핸드북에서는 맵의 기본 개념부터 실용적인 활용법, 그리고 객체와 비교했을 때의 명확한 장점까지, 맵을 100% 활용하는 방법을 심층적으로 다룬다.

1. 맵은 왜 만들어졌을까?

자바스크립트 초창기부터 키-값 쌍을 저장하는 데는 객체가 주로 사용되었다. 객체는 간단하고 직관적인 문법으로 인해 널리 사랑받았지만, 몇 가지 근본적인 한계에 부딪혔다.

  • 키의 제한: 객체의 키는 내부적으로 항상 문자열이나 Symbol로 변환되었다. 이는 숫자, 객체, 배열 등 다른 데이터 타입을 키로 사용하고자 할 때 문제가 발생했다. 예를 들어, { 1: 'a', 2: 'b' }와 같은 객체를 생성하면 키 1과 2는 내부적으로 '1'과 '2'라는 문자열로 변환된다. 이로 인해 키의 원본 데이터 타입 정보를 잃게 되고, 특히 객체를 키로 사용했을 때는 예상치 못한 동작을 야기할 수 있었다.

  • 순서 보장 문제: ES2015 이전까지 객체는 키의 순서를 보장하지 않았다. 개발자가 특정 순서로 키를 추가하더라도, for...in 루프를 사용해 순회할 때 그 순서가 유지되지 않을 수 있었다. 이는 순서가 중요한 데이터를 다룰 때 큰 제약이 되었다.

  • 요소 수 확인의 비효율성: 객체에 몇 개의 키-값 쌍이 있는지 확인하려면 Object.keys(myObject).length와 같은 코드를 사용해야 했다. 이는 매번 배열을 새로 생성하는 추가적인 연산을 필요로 하므로, 대량의 데이터를 다룰 때는 비효율적이다.

이러한 객체의 한계를 극복하고, 더욱 유연하고 강력한 키-값 데이터 구조를 제공하기 위해 **ES2015(ES6)**에서 **맵(Map)**이 도입되었다. 맵은 객체의 단점을 보완하며, 개발자가 복잡한 데이터를 보다 효율적으로 다룰 수 있도록 돕는다.

2. 맵의 핵심 구조와 특징

맵은 new Map() 생성자를 통해 생성되며, 다음과 같은 핵심 특징을 가진다.

  1. 자유로운 키 타입: 맵은 문자열뿐만 아니라 객체, 배열, 숫자, 불리언, 심볼 등 모든 데이터 타입을 키로 사용할 수 있다. 이 점은 객체와 가장 큰 차이점이며, 맵을 활용하는 독특한 시나리오를 만들어낸다.

  2. 입력 순서 보장: 맵은 요소가 추가된 순서를 그대로 기억한다. for...of 루프를 사용해 맵을 순회하면, 요소를 삽입한 순서대로 값을 얻을 수 있다. 이는 객체가 일반적으로 순서를 보장하지 않는 것과 대비된다.

  3. 빠른 요소 수 확인: 맵은 size라는 내장 속성을 제공한다. myMap.size를 호출하면 맵에 들어있는 요소의 개수를 즉시 반환한다. 이는 객체처럼 별도의 연산을 거칠 필요가 없으므로 매우 효율적이다.

  4. 전용 메서드: 맵은 set(), get(), has(), delete(), clear() 등 키-값 쌍을 다루는 데 최적화된 다양한 메서드를 제공한다. 이들 메서드는 직관적이고 사용하기 쉽다.

2.1 맵과 객체 비교

특징맵 (Map)객체 (Object)
키 타입모든 데이터 타입 (객체, 함수, 배열, 숫자, 문자열 등)문자열, Symbol (숫자는 문자열로 변환)
순서 보장O (입력 순서를 보장)X (ES2015 이후 숫자 키는 순서 보장, 나머지는 비보장)
요소 수map.size 속성을 통해 즉시 확인Object.keys(obj).length를 통한 별도 연산 필요
성능삽입, 삭제, 순회에 최적화된 성능일반적으로 키-값 접근이 빠르나, 대량 데이터 처리 시 성능 저하 가능
순회for...of, forEach()로 순서대로 순회 가능for...in은 순서를 보장하지 않음, Object.keys() 등 별도 배열 반환 필요
기본 구조new Map()으로 생성, 메서드 사용{}로 생성, 점(.) 또는 대괄호([]) 표기법 사용

3. 맵의 기본 사용법과 메서드

맵은 객체와 달리 전용 메서드를 사용해 요소를 다룬다.

3.1 맵 생성 및 초기화

new Map() 생성자를 사용해 빈 맵을 만들거나, 배열을 사용하여 초기값을 설정할 수 있다.

// 빈 맵 생성
const myMap = new Map();

// 초기값과 함께 맵 생성 (2차원 배열 형태)
const initialMap = new Map([
  ['name', '환사훈'],
  [1, '숫자'],
  [true, '불리언']
]);

3.2 주요 메서드

  • map.set(key, value): 맵에 새로운 키-값 쌍을 추가하거나 기존 값을 갱신한다.

  • map.get(key): 주어진 키에 해당하는 값을 반환한다. 키가 존재하지 않으면 undefined를 반환한다.

  • map.has(key): 주어진 키가 맵에 존재하는지 여부를 불리언 값으로 반환한다.

  • map.delete(key): 주어진 키와 그에 해당하는 값을 삭제한다. 성공적으로 삭제되면 true, 아니면 false를 반환한다.

  • map.clear(): 맵의 모든 요소를 제거한다.

  • map.size: 맵의 현재 요소 수를 반환한다.

3.3 맵 순회하기

맵은 다양한 방법으로 순회가 가능하다. 특히 for...of 루프를 사용하면 삽입된 순서대로 키-값 쌍을 얻을 수 있다.

const userMap = new Map([
  ['name', '홍길동'],
  ['age', 30],
  ['city', '서울']
]);

// 1. for...of 루프를 이용한 순회
for (const [key, value] of userMap) {
  console.log(`${key}: ${value}`);
}
// 출력:
// name: 홍길동
// age: 30
// city: 서울

// 2. forEach() 메서드를 이용한 순회
userMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 출력:
// name: 홍길동
// age: 30
// city: 서울

4. 맵의 실무 활용 시나리오

맵은 단순히 객체의 대체재가 아니라, 특정 문제 해결에 최적화된 솔루션으로 활용될 수 있다.

4.1. 유저 정보 캐싱

웹 서비스에서 자주 접근하는 데이터를 메모리에 임시 저장(캐싱)하여 성능을 개선하는 것은 흔한 기법이다. 특히 ID와 같은 고유 식별자를 키로 사용할 때 맵의 효율성은 극대화된다.

// 유저 정보를 캐싱할 맵
const userCache = new Map();

function getUserData(userId) {
  // 캐시에 데이터가 있는지 먼저 확인
  if (userCache.has(userId)) {
    console.log(`캐시에서 유저 ID ${userId} 반환`);
    return userCache.get(userId);
  }

  // 캐시에 없으면 API 호출 등 데이터 페칭 로직 수행
  console.log(`API에서 유저 ID ${userId} 정보 페칭`);
  const userData = fetchFromDatabase(userId); // 가상 함수
  
  // 페칭한 데이터를 캐시에 저장
  userCache.set(userId, userData);
  return userData;
}

// 가상 데이터베이스 함수
function fetchFromDatabase(userId) {
    return {
        id: userId,
        name: `User-${userId}`,
        profile: '...'
    };
}

이 예제에서 userCache.has(userId)와 userCache.get(userId)는 모두 매우 빠른 연산이다. 객체를 사용했을 때와 유사하게 보이지만, 만약 유저 ID가 숫자(12345)일 경우, 맵은 이를 원본 숫자 타입으로 유지하면서 키를 관리하므로 더 정확하고 효율적이다.

4.2. 복잡한 키를 사용하는 데이터 관리

맵의 가장 강력한 장점은 문자열이 아닌 복잡한 데이터 타입을 키로 사용할 수 있다는 점이다. 이는 객체에서는 불가능했던 독특한 데이터 구조를 만들 수 있게 한다.

예시 1: 객체를 키로 사용하기

지도 상의 좌표처럼 객체로 표현되는 특정 위치에 데이터를 매핑해야 할 때 유용하다. 동일한 객체 인스턴스만이 동일한 키로 간주되므로 데이터의 무결성을 보장하는 데 도움이 된다.

// 특정 위치를 나타내는 객체
const locationA = { x: 10, y: 20 };
const locationB = { x: 30, y: 40 };

// 위치 정보를 저장하는 맵
const locationInfo = new Map();

// locationA라는 객체 자체를 키로 사용하여 A 빌딩 정보를 저장
locationInfo.set(locationA, { name: 'A 빌딩', description: '메인 오피스' });
locationInfo.set(locationB, { name: 'B 빌딩', description: '부속 건물' });

// 키로 사용된 객체로 정보를 가져온다.
console.log(locationInfo.get(locationA)); // { name: 'A 빌딩', description: '메인 오피스' }

// 동일한 x, y 값을 가진 다른 객체는 다른 키로 인식된다.
const locationA2 = { x: 10, y: 20 };
console.log(locationInfo.get(locationA2)); // undefined (locationA와 다른 메모리 주소)

위의 예시에서 locationA 객체를 키로 사용함으로써, 해당 객체와 정확히 동일한 참조를 가진 다른 객체만이 정보를 가져올 수 있다. 이는 객체에서는 문자열로 변환되는 키의 특성 때문에 불가능한 기능이다.

예시 2: 배열을 키로 사용하기

게임 개발에서 특정 좌표를 나타내는 배열을 키로 사용하여 해당 위치의 아이템 정보를 저장할 수 있다.

const itemMap = new Map();

// [x, y] 배열을 키로 사용하여 아이템 정보를 저장
itemMap.set([1, 1], '황금 보물 상자');
itemMap.set([3, 5], '마법의 검');

// 배열로 값을 가져오기
const key = [1, 1];
console.log(itemMap.get(key)); // undefined (key 변수가 참조하는 배열과 맵에 저장된 배열은 다른 인스턴스)

이 예제는 객체를 키로 사용한 경우와 동일한 원리로 동작한다. 배열 [1, 1]은 객체처럼 참조 값으로 다뤄지므로, 동일한 내용을 가진 다른 배열 인스턴스는 다른 키로 취급된다. 따라서 배열을 키로 사용할 때는 주의가 필요하다.

4.3. 중복 데이터 관리

맵의 키는 고유하므로, 특정 키가 이미 존재할 경우 새로운 값으로 덮어씌워진다. 이 특성을 활용하여 중복 데이터를 방지하거나 최신 상태를 유지할 수 있다. 예를 들어, 웹소켓을 통해 실시간으로 들어오는 유저 접속 정보를 관리할 때, 새로운 접속 정보가 들어올 때마다 맵에 유저 ID를 키로 저장하면 항상 최신 접속 정보만 유지된다.

5. 맵의 성능과 최적화

맵은 특정 상황에서 객체보다 훨씬 좋은 성능을 보인다.

  • 삽입 및 삭제: 맵은 객체보다 삽입 및 삭제 연산이 빠르다. 이는 내부적으로 해시 테이블과 유사한 구조로 구현되어 있기 때문이다.

  • 순회: 맵은 for...of 루프를 사용해 삽입 순서대로 효율적으로 순회할 수 있다. 객체의 경우 Object.keys()와 같은 메서드를 사용하면 새로운 배열을 생성해야 하므로, 대량의 데이터를 순회할 때 맵이 더 빠르다.

  • 사이즈 확인: map.size는 상수 시간(O(1))에 동작하므로, 맵의 크기가 아무리 커져도 항상 동일한 속도로 요소 수를 반환한다. 객체는 키를 배열로 변환하는 선형 시간(O(N))이 소요된다.

이러한 성능적 이점은 맵이 단순히 유연한 데이터 구조를 제공하는 것을 넘어, 대용량 데이터 처리나 성능이 중요한 애플리케이션에서 중요한 역할을 할 수 있게 한다.

6. WeakMap과 Set, WeakSet

맵과 함께 알아두면 좋은 관련 데이터 구조들이 있다.

WeakMap

**WeakMap**은 맵과 유사하지만 몇 가지 중요한 차이점을 가진다.

  • 키의 제한: 오직 객체만 키로 사용할 수 있다. 문자열, 숫자, Symbol 등 원시 타입은 키로 사용할 수 없다.

  • 약한 참조: WeakMap의 키는 “약한 참조(Weak Reference)“로 유지된다. 이는 키로 사용된 객체가 다른 곳에서 참조되지 않으면 가비지 컬렉터(Garbage Collector)에 의해 메모리에서 해제될 수 있다는 의미다.

  • size 속성 부재: WeakMap은 요소의 개수를 알 수 있는 size 속성이나 모든 요소를 순회할 수 있는 메서드를 제공하지 않는다.

WeakMap은 주로 객체에 추가 데이터를 은밀하게 저장하거나, 메모리 누수를 방지해야 할 때 사용된다. 예를 들어, DOM 요소에 특정 데이터를 연결할 때 WeakMap을 사용하면, 해당 DOM 요소가 메모리에서 사라질 때 WeakMap에 저장된 데이터도 함께 정리된다.

Set과 WeakSet

  • Set: **Set**은 키만 저장하는 컬렉션으로, 중복되지 않는 유일한 값들의 집합을 저장한다. add(), delete(), has() 등의 메서드를 제공하며, 순회도 가능하다.

  • WeakSet: WeakSet은 WeakMap과 유사하게 객체만 저장할 수 있으며, 약한 참조를 사용한다. WeakSet은 add(), delete(), has() 메서드만 제공하고, 순회할 수 없다.

결론: 맵, 언제 사용해야 할까?

대부분의 일반적인 상황에서는 여전히 객체가 훌륭한 선택이다. 하지만 다음과 같은 경우에는 맵을 사용하는 것이 훨씬 유리하거나 필수적일 수 있다.

  1. 키로 문자열 외의 데이터 타입(특히 객체)을 사용해야 할 때.

  2. 데이터의 삽입 순서가 중요할 때.

  3. 요소의 개수를 자주 확인해야 할 때.

  4. 삽입, 삭제, 순회 성능이 중요한 대규모 데이터를 다룰 때.

맵은 자바스크립트 개발자가 더 복잡하고 유연한 데이터 구조를 효율적으로 관리할 수 있도록 해주는 강력한 도구다. 맵의 특징과 장점을 이해하고 적재적소에 활용한다면, 더욱 견고하고 성능 좋은 애플리케이션을 만들 수 있다.

레퍼런스(References)

맵

그래프 뷰

백링크