반응형
ES6에서 새롭게 도입된 자료구조로, iterable한 객체입니다.
Map
- 특징
- Map()은 Javascript의 key-value pair로 이루어진 컬렉션
- Key를 이용해서 value를 get, set 가능
- key는 중복될 수 없음
- key에는 어떤 값이든 사용할 수 있음
// Map을 만들어서 key, value 엔트리를 추가하는 방법
const person = new Map()
person.set('name', 'Jay')
person.set('age', 30)
console.log(person.get('age')) // 30
// has(): 주어진 key 가 존재하는지 확인
console.log(person.has('name')); // true
// size: map 에 담겨진 엔트리의 개수를 조회
console.log(person.size); // 2
// delete(): 엔트리를 삭제
person.delete('age');
console.log(person.has('age')); // false
// clear(): 모든 엔트리를 삭제
person.clear();
console.log(person.size); // 0그러면 이런 경우에 대체 Map과 기존 Object의 차이가 뭔지 궁금할 수 있을 것 같습니다.Object의 key는 string과 symbol만 사용할 수 있지만, Map은 어떤 값이든 사용이 가능하다는 점이 주된 차이일 것 같아요.
또한 Object는 크기를 직관적으로 알기 어렵지만, Map은 size()를 이용해 손쉽게 얻을 수 있다는 장점이 있겠습니다.
Iterable
Map이 Iterable하다고 말씀드렸듯이, 이것은 ...Rest 문법을 사용할 수 있습니다.
/**
* map.keys() : key들만 뽑아낸다
* map.values() : value들만 뽑아낸다
*/
const person = new Map().set('a', 1).set('b', 2)
console.log([...person.keys()]) // ['a', 'b']
console.log([...person.values()]) // [1, 2]/**
* map.entries() : [key, value] pair를 Map에 등록된 순서대로 포함한 새로운 객체를 반환한다
* map.next() : entries로 반환된 객체의 다음 값을 조회한다. 이는 상태를 갖는다.
*/
const person = new Map().set('a', 1).set('b', 2)
const iterable = person.entries()
console.log(iterable.next()) // {value: ['a', 1], done: false}
console.log(iterable.next()) // {value: ['b', 2], done: false}
console.log(iterable.next()) // {value: undefined, done: true}Set
- 특징
- Set은 value로 이루어진 집합
- 같은 value를 중복 불가
const alpha = new Set()
alpha.add('a')
alpha.add('b')
// or
const alpha = new Set().add('a').add('b')
// size
console.log(alpha.size) // 2
// has() : Map과 동일함. 기존 배열에서 사용하던 indexOf보다 빠르나 index는 없다
/**
* 따라서 index로 value에 접근하는 것이 불가능하다
*/
console.log(alpha.has('a')) // true
// delete()
alpha.delete('b')
console.log(alpha.has('b')) // false
// clear()
alpha.clear()
console.log(alpha.size) // 0Iterable
Set에도 Map과 동일하게 entries()나 next()가 존재하며 사용 방법은 동일합니다.
여기서 주목할 것은 keys()와 values()인데요, 둘 중 어느 것을 사용해도 같은 값을 뱉어냅니다.
const cities = new Set();
cities.add('seoul')
cities.add('newyork')
cities.add('seoul')
console.log([...cities.keys()]) // ['seoul','newyork']
console.log([...cities.values()]) // ['seoul','newyork']반응형
