[ES6]Map

[JS #5] ES6 Map(), Set()

얼마 전부터 회사 업무를 진행할 때 본격적으로, 그리고 의식적으로 ES6 에 도입된 문법을 적용하고 있는데, 그중에서 가장 자주 활용하는 자료구조, Map 과 Set 에 대해 이야기해보려고 합니다. 이 글의 모티브는 상당부분 Mozilla 웹기술블로그에 기반합니다. 사내세미나에서 발표한 내용을 글로 정리했습니다.

Map

• Map() 은 자바스크립트의 key-value 페어(pair) 로 이루어진 컬렉션
• key 를 사용해서 value 를 get, set 할 수 있음
• key 들은 중복될 수 없음: 하나의 key 에는 하나의 value 만
• key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function >> number 는 사용할 수 없음에 주의!

1. Properties
   1. Map.prototype
   2. Map.prototype.size [Translate]
   3. Map.prototype[@@toStringTag][Translate]
   4. get Map[@@species] [Translate]
2. Methods
   1. Map.prototype.clear() [Translate]
   2. Map.prototype.delete() [Translate]
   3. Map.prototype.entries() [Translate]
   4. Map.prototype.forEach() [Translate]
   5. Map.prototype.get() [Translate]
   6. Map.prototype.has() [Translate]
   7. Map.prototype.keys() [Translate]
   8. Map.prototype.set() [Translate]
   9. Map.prototype.values() [Translate]
   10. Map.prototype[@@iterator]()[Translate]
       (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)

// 새로운 map 을 만들고 map 에 key, value 엔트리를 추가
let me = new Map();
me.set('name', 'kevin');
me.set('age', 28);
console.log(me.get('age'); // 28

// 대괄호를 사용해서 map 을 선언하는 방법
const roomTypeMap = new Map(
  [
    ["01", "원룸(오픈형)"],
    ["02", "원룸(분리형)"],
    ["03", "원룸(복층형)"],
    ["04", "투룸"],
    ["05", "쓰리룸"]
  ]
);

// 새로운 map 을 만들고 그 데이터를 기존의 [key, value] 페어컬렉션으로 채움
let you = new Map().set('name', 'paul').set('age', 34);
console.log(you.get('name')); // 'paul'

// has(): 주어진 key 가 존재하는지 확인
console.log(me.has('name')); // true

// size: map 에 담겨진 엔트리의 개수를 조회
console.log(you.size); // 2

// delete(): 엔트리를 삭제
me.delete('age');
console.log(me.has('age')); // false

// clear(): 모든 엔트리를 삭제
you.clear();
console.log(you.size); // 0

<참고 1> Map 과 Object 비교

• Object 의 key 는 string 과 symbol(ES6) 만 가능하지만, map 은 어떤 값도 가능
• Object 에서는 크기를 추적해서 알 수 있지만, map 은 손쉽게 얻을 수 있음(size)

---

Map 의 iterable object

• map.keys(), map.values()
• map 안의 key 혹은 value 들을 순회할 수 있는 iterable object 를 반환

let me = new Map().set('a', 1).set('b', 2);
console.log([...me.keys()]); // ['a', 'b']
console.log([...me.values()]); // [1, 2]

• map.entries(), map.next()
• map 안의 모든 엔트리들을 순회할 수 있는 iterable object 를 반환

let you = new Map().set('Seoul', 28).set('Tokyo', 26);
let iterObj = you.entries();
console.log(iterObj.next()); // {value: ['Seoul', 28], done: false}
console.log(iterObj.next()); // {value: ['Tokyo', 26], done: false}
console.log(iterObj.next()); // {value: undefined, done: true}

• for-of, map.forEach();
• forEach 의 경우, 인자 순서가 이상한데(key, value 순서가 반대) Array.prototype.forEach() 구문과 통일성을 유지하기 위함(value, index, array 순서인 것)

let we = new Map().set('car', 30).set('bus', 45);

// for-of 로 map 순회하기
for (let [key, value] of we) {
  console.log(key + '^' + value);
}
// 차례대로 'car^30', 'bus^45' 출력

// forEach 로 map 순회하기
we.forEach((value, key, map) => {
  console.log(key + '$' + value);
});
// 차례대로 'car$30', 'bus$45' 출력

• 자바스크립트 배열 메서드에 존재하는 map, filter 메서드는 Map 에 존재하지 않는다. 하지만 아래와 같은 방식으로 우회해서 사용이 가능하다.

let me = new Map().set('a', 1).set('b', 2);

// value 가 1 이상인 엔트리만 filtering 하기
let map1 = new Map(
    [...me]
    .filter(([k, v]) => v > 1)
);
console.log([...map1.entries()]) // [['b', 2]]

// key 뒤에 'super' 문자열을 붙이고, value 에 1을 더하기
let map2 = new Map(
    [...me]
    .map(([k, v]) => [k + "super", v + 1])
);
console.log([...map2.entries()]) // [['asuper, 2], [bsuper, 3]]