[ JavaScript 문법 종합반 2주차 (5)] MAP 사용 방법

Map과, Set

JavaScript에서 객체(object)와 배열(array)을 이용하면 다양하고 복잡한 프로그래밍을 할 수가 있다. 그럼에도 여러 가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족하다. Map과 Set은, 이러한 한계를 극복하기 위해 비교적 최근에 등장한 자료 구조로, 이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광받고 있다. 

 

• MAP
  Map은 키-값 쌍을 저장하는 객체와 비슷하다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다. 

---

 

 

 

[ Map을 사용하면 다음과 같은 작업을수행 할 수 있다. ]

 

키-값 쌍 추가 및 검색(set)

키-값 쌍 삭제(delete)

모든 키-값 쌍 제거(clear)

Map 크기 및 존재 여부 확인(size)

 

---

[Map에는 아래와 같은 주요 메서드와 프로퍼티가 있다]

 

new Map() – 맵을 만듭니다.

map.set(key, value) – key를 이용해 value를 저장합니다.

map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.

map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.

map.delete(key) – key에 해당하는 값을 삭제합니다.

map.clear() – 맵 안의 모든 요소를 제거합니다.

map.size – 요소의 개수를 반환합니다. 

 

 

---

 

• Map의 생성 및 사용 

새로운 Map을 만들려면 Map() 생성자를 사용한다.

const myMap = new Map();

Map에 값을 추가하려면 set() 메소드를 사용한다.

myMap.set('key', 'value');

Map에서 값을 검색하려면 get() 메소드를 사용합니다. ( * set과, map은 항상 페어다! )

console.log(myMap.get('key')); // 'value' 출력

 

 

---

 

• Map의 반복
  Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있다.

  1) for …of 반복문

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 한다. (직접 명시 가능)

(iterator =  반복자) 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어 있는 자료구조로 이해하면 된다. 

 

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

 

예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문이다.

이미지 좌측부터 순서대로  1) keys()  2) values()  3)entries() 메소드 사용

 

---

 

• Map의 크기 및 존재 여부 확인
  

Map의 크기를 확인하려면 size 속성을 사용한다.

console.log(myMap.size); // 3 출력

특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용한다.

console.log(myMap.has('two')); // true 출력

 

왼쪽에서 보이는 예시와 같이,

myMap의 사이즈(길이)는 3줄이므로 3으로 결과값이 출력되며, two는 myMap key에 존재함으로 true결과 값으로 나타난다.