JavaScript의 Map 객체는 키-값 쌍을 저장하는 순서가 있는 데이터 구조입니다. **Map**은 객체와 유사하지만, 몇 가지 중요한 차이점이 있습니다. 가장 두드러진 차이는 **Map**이 어떤 값(원시 값 또는 객체 참조)도 키로 사용할 수 있다는 점입니다. 또한, **Map**은 요소의 순서를 유지하며, size 속성을 통해 쉽게 크기를 알 수 있습니다.
Map의 기본적인 사용법
let map = new Map();
// 키-값 쌍 추가
map.set('key1', 'value1');
map.set('key2', 'value2');
// 키를 사용하여 값 접근
console.log(map.get('key1')); // "value1"
console.log(map.get('key2')); // "value2"
// 키 존재 여부 확인
console.log(map.has('key1')); // true
console.log(map.has('nonExistingKey')); // false
// Map의 크기
console.log(map.size); // 2
// 키-값 쌍 삭제
map.delete('key1');
// 모든 키-값 쌍 삭제
map.clear();
Map과 일반 객체의 차이점
- 키의 유형: 일반 객체에서 키는 문자열 또는 심볼이어야 하지만, **Map**에서는 어떤 타입의 값도 키로 사용할 수 있습니다.
- 순서 유지: Map 객체는 요소를 삽입한 순서대로 요소를 반복합니다. 일반 객체는 프로퍼티의 순서를 보장하지 않습니다(ES2015 이후, 일반 객체도 프로퍼티의 생성 순서를 유지하지만, 이는 모든 환경에서 일관되지 않을 수 있습니다).
- 크기 쉽게 알기: **Map**은 .size 속성을 통해 직접 크기를 알 수 있지만, 일반 객체의 프로퍼티 개수를 알기 위해서는 별도의 방법을 사용해야 합니다.
Map의 반복
Map 객체는 forEach 메서드와 여러 이터레이터를 제공하여, 키-값 쌍을 반복할 수 있게 해줍니다.
let map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
// forEach를 사용하여 반복
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// for...of를 사용하여 반복 (키-값 쌍)
for (let [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 키만 반복
for (let key of map.keys()) {
console.log(key);
}
// 값만 반복
for (let value of map.values()) {
console.log(value);
}
위 예제의 결과값이 어떻게 나올까요?
forEach를 사용하여 반복
key1: value1
key2: value2
key3: value3
Map.prototype.forEach 메서드는 맵의 모든 키-값 쌍에 대해 주어진 함수를 호출합니다. 이 예제에서는 각 키-값 쌍의 키와 값을 콘솔에 출력합니다.
for...of를 사용하여 키-값 쌍 반복
key1: value1
key2: value2
key3: value3
for...of 루프는 맵의 [key, value] 쌍을 순회합니다. 구조 분해 할당을 사용하여 각 키와 값을 추출하고 콘솔에 출력합니다.
키만 반복
key1
key2
key3
map.keys() 메서드는 맵의 모든 키를 순회하는 새로운 이터레이터를 반환합니다. 이 예제에서는 맵의 모든 키를 콘솔에 출력합니다.
값만 반복
value1
value2
value3
map.values() 메서드는 맵의 모든 값을 순회하는 새로운 이터레이터를 반환합니다. 이 예제에서는 맵의 모든 값을 콘솔에 출력합니다.
Map의 용도
**Map**은 키-값 데이터를 효율적으로 저장하고 관리해야 할 때 유용합니다. 특히, 키가 원시 값이 아닌 객체일 때, 또는 순서와 크기 관리가 중요할 때 **Map**을 사용하는 것이 좋습니다. 데이터베이스 쿼리 결과, 캐싱, 데이터의 메타데이터 저장 등 다양한 시나리오에서 **Map**을 활용할 수 있습니다.