21-1 JS 맵(Map) 1

맵(Map)

 -  Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 다만, Map은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다.

 - 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 – 요소의 개수를 반환합니다.

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

// 객체는 키를 문자형으로 변환한다는 걸 기억하고 계신가요?
// 맵은 키의 타입을 변환시키지 않고 그대로 유지합니다. 따라서 아래의 코드는 출력되는 값이 다릅니다.
map.get(1); // 'num1'
map.get('1'); // 'str1'

map.size // 3

맵은 객체와 달리 키를 문자형으로 변환하지 않습니다. 키엔 자료형 제약이 없습니다.

 

그리고 map[key]는 Map을 쓰는 바른 방법이 아니다. map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 하다. 하지만 이 방법은 map을 일반 객체처럼 취급하게 된다. 따라서 여러 제약이 생기게 된다. map을 사용할 땐 map전용 메서드 set, get 등을 사용해야만 합니다.

 

Map은 키로 객체를 허용한다.

예)

let john = { name: "John" };

// 고객의 가게 방문 횟수를 세본다고 가정해 봅시다.
let visitsCountMap = new Map();

// john을 맵의 키로 사용하겠습니다.
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

 객체와 가장 큰 차이점이다. Map은 키로 객체를 사용할 수 있지만 객체에는 객체 키는 사용할 수 없다.

 

객체형 키를 객체에 써보면

let john = { name: "John" };

let visitsCountObj = {}; // 객체를 하나 만듭니다.

visitsCountObj[john] = 123; // 객체(john)를 키로 해서 객체에 값(123)을 저장해봅시다.

// 원하는 값(123)을 얻으려면 아래와 같이 키가 들어갈 자리에 `object Object`를 써줘야합니다.
visitsCountObj["[object Object]"]; // 123

  visitsCountObj는 객체이기 때문에 모든 키를 문자형으로 변환시킨다. 이 과정에서 john은 문자형으로 변환되어 "[object Object]"가 된다. (하지만 이렇게 하는건 안 되겠죠?)

 

맵이 키를 비교하는 방식

  맵은 SameValueZero라 불리는 알고리즘을 사용해 값의 등가 여부를 확인한다. 이 알고리즘은 일치 연산자 ===와 거의 유사하지만, NaN과 NaN을 같다고 취급하는 것에서 일치 연산자와 차이가 있다. 따라서 맵에선 NaN도 키로 쓸 수 있다.

 

체이닝

 - map.set을 호출할 때마다 맵 자신이 반환됩니다. 이를 이용하면 map.set을 '체이닝(chaining)'할 수 있습니다.

map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

 

---

공부한 곳!! 모던 JavaScript 튜터리얼

바로가기!!