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**을 활용할 수 있습니다.
'javascript > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
textConent와 InnerText (0) | 2024.02.21 |
---|---|
DOM 과 CSSOM (0) | 2024.02.21 |
Set (0) | 2024.02.21 |
구조 분해 할당 (Destructuring assignment) (0) | 2024.02.21 |
스프레드 문법과 Rest 파라미터 (1) | 2024.02.21 |