Map & Set

Before Start

Array와 마찬가지로, Map과 Set은 data structure 중 하나이다. 즉 map과 set이 서로 관계를 갖는 데이터 values와, 데이터에 사용되는 함수의 집합임을 의미한다. 

Set

How to create Set? 

• constructor function
  • let set = new Set( iterable )

Set as a data structure

Data 사이의 관계

set은 array와 달리 index가 없기 때문에, 데이터 간의 순서가 없다. 또 데이터의 중복을 허용하지 않는다. 이미 존재하는 데이터를 set에 추가하려고 하면 아무일도 일어나지 않는다. 배열의 중복을 제거해야 할 때에도 set을 자주 사용한다. 

 

Data에 자주 사용되는 functions 

 

let set = new Set('hello'); // string is iterable
// set => {h, e, l, o}  두번째 l은 무시된 것을 알 수 있다.

 

크기 반환하기

• set.size | (method가 아니라 property이다) set의 크기를 반환한다. // 4

 

item을 추가하거나 삭제하기

• set.add(12) | UPDATE, set의 마지막 value로 12를  추가한다.  // {h, e, l, o, 12}
• set.delete( 'h' ) | UPDATE, 전달한 value(h)가 set에 포함되어 있다면, 이를 삭제한다. // {e, l, o} 
• set.clear() | UPDATE, set에 포함되어 있는 모든 element를 삭제한다. 

 

해당 item을 요소로 가지고 있는지 확인하기

• set.has(h) | set에 h가 있는지 없는지를 확인하고 boolean을 반환한다. // true

 

각 item에 함수 실행하기

• set.forEach( (item)=> console.log(item) ) | set은 iterable이기 때문에, 배열과 마찬가지로 각 요소에 함수를 실행시키는 forEach를 method로 가지고 있다. 

 

keys, values, entries 

• set.keys() | set은 key와 index가 없다. 때문에 keys를 호출하면 에러가 발생할 것 같지만, Map과의 동일성을 유지하기 위해 keys를 호출해도 에러가 발생하지는 않고, 대신 values 함수를 호출한 것과 같은 결과를 갖는다.  
• set.values() | CREATE, set에 포함되어 있는 모든 element를 포함하는 새로운 iterator를 반환한다. 
• set.entries() | CREATE, set에 포함되어 있는 각 element에 대하여 [value, value]를 반환한다. 

Map

How to create Map? 

• constructor function
  • let map = new Map( iterable )

Map as a data structure

Data 사이의 관계

 Map은 index가 없어 data의 순서가 없다는 점에서 Set과 같다. data가 key와 value로 이루어져 있고, key의 중복이 가능하다는 점에서는 Object와 유사하다. Map과 Object의 결정적인 차이점은 iterable(map)이냐, 아니냐(obj)이다.

 

Data에 자주 사용되는 functions 

 

let map = new Map([ ['key1', '🍎'], ['key2', '🍊'] ]); // array is iterable
//map => Map(2) {'key1' => '🍎', 'key2' => '🍊'} // :이 아니라 =>

 

set에서 사용되는 모든 method 이용 가능

 

item의 key를 이용해 value에 접근하기

• map.get('key1') | key1에 해당하는 value에 접근할 수 있다. // 🍎
  • object에서 key를 이용해 value에 접근할 때 사용하는 obj[key] 표기법은 사용할 수 없다. 

 

item의 key를 이용해 value 수정하기 

• map.set('key3', '🍋') | UPDATE, 해당하는 key의 value를 수정할 수 있다.