Javascript - Map, Set

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) // 0

Iterable

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']