[JS Study] Map , Set, Object

객체라고 한다면 Object만을 떠올리기 쉽다. 하지만 Object는 key값으로 문자열 또는 심볼만 가능하고(Set과 Map은 숫자 1과 문자열 "1"도 구분된다.) 객체의 size를 구할 수도 없다. 또한 forEach나 spread syntax로 접근이 불가능하다. 따라서 ES6부터 도입된 Map, Set 객체를 이해하면 자바스크립트 코드를 짤 때 더 넓은 범위의 선택지를 맞이할 수 있게 된다.

Set 객체

Set은 중복을 허용하지 않는 데이터의 집합이다. 또한 Set을 사용하면 더 빠르게 데이터에 접근을 할 수 있다.

const mySet = new Set(); // {}
mySet.add(1); // {1}
mySet.add(2); // {1, 2}
mySet.add(1); // {1, 2}
mySet.size; // 2
mySet.has(2); // True

let arr = [...mySet]; // 스프레드 연산자를 통해 배열로 만들 수 있다.

Map 객체

Map 객체는 키-값을 저장한다.

const myMap = new Map(); // [}
myMap.set(1, "Inha"); // {1 => "Inha"}
myMap.set('1', "Univ"); // {1 => "Inha", '1' => "Univ"}
myMap.get(1); // "Inha"
myMap.size; // 2
myMap.has(1); // True

Map 메소드

map.keys()

각 요소의 key를 모은 반복 가능한(iterable) 객체를 반환한다.

map.values()

각 요소의 value를 모은 반복 가능한(iterable) 객체를 반환한다.

map.entries()

[키, 값]을 한쌍으로 하는 반복 가능한(iterable) 객체를 반환한다. 이 이터러블 객체는 for...of반복문의 기초로 쓰인다.

let menu = new Map([
  ['tomato', 30],
  ['carrot', 20],
  ['kiwi', 30]
]);

for(let amount of menu.values()){
  console.log(amount); // 30, 20, 30
}

Map 과 Object의 차이점

Object의 key는 string, integer, symbol밖에 안되지만 Map은 어떤 것이든 다 가능하다. 배열도 가능하다. 또한 Map은 get이라는 메소드를 통해 value에 접근이 가능하지만 Object는 obj.key나 obj[key]를 통해 접근이 가능하다.
마지막으로 Object는 for...in으로만 접근이 가능하나 Map은 그렇지 않다.