map과 객체

자바스크립트를 쓰면서 가장 장점이 리터럴 객체라고 생각했다.

다른언어처럼 map을 만들어서 하나하나씩 set하는 과정이없이 key, value 객체를 만들어낼 수 있는 점때문이다.

그런데 자바스크립트에서는 map 자료구조가 존재하는데 차이점은 key값으로 문자열만을 받는 객체의 반면에 모든 데이터타입을 key로 가질수있다. 심지어 객체조차 가질수 있다.

아래코드는 놀랍게도 동작한다.

let john = { name: "John" };

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

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

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

 

반면에 객체에 키값으로 객체를 넣으면 자동으로 문자열로 바뀌면서 아래와같이사용해야한다.

let john = { name: "John" };

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

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

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

 

map의 키 비교방식은 SameValueZero라는 알고리즘을 통해 등가여부를 확인한다고 한다.

===과 거의 유사하지만, NaN 과 NaN을 같다고 취급하는것에서 일치연산자와의 다름을 알수있다.

(NaN은 === 연산자로 어떤 피연산자와 비교해도 false이다)

 

또 맵은 체이닝이 가능하다.

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

 

반복문

map 과 객체 모두 아래 메서드를 제공하고, 이를 for...of 와 연계하여 반복문을 활용한다.

map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환합니다.
map.values() – 각 요소의 값을 모은 이터러블 객체를 반환합니다.
map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다.

 

여기서 map 은 forEach 메서드도 지원한다.

 

삽입순서를 기억한다

객체는 삽입순서를 기억하지 못하는반면, map은 삽입 순서를 기억한다.

 

객체를 map으로 간단히

entries를 사용해서 간단히 map으로 변경할 수 있다.

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

 

반대로 map에서 객체로 바꿀 수 도 있다.

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)

let obj = Object.fromEntries(map); // .entries()를 생략함

 

그냥 단순히 map 이 key값으로 모든 자료형을 받는다고 알고있었는데, 그게 객체일 수도 있을 줄은 몰랐다.

그리고 객체를 map으로는 알고있었는데, map을 객체로 변환할 수 있는건 처음알았다