Javascript: Map

 

Javascript에서 제공하는 Collection에는 크게

Index로 수집되는 Indexed Collection / Key로 수집되는 Keyed Collection이 있다. 

Indexed Collection 종류: Array, Typed Array
Keyed Collection 종류: Object, Map, Weak Map, Set, Weak Set

 

[ Map 이란? ]

다양한 자료형의 Key를 허용하고, Key-value 형태의 자료형을 저장할 수 있는 Collection이다.

Map은 Object보다 더 다양한 Key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 필요하다.

생성자: new Map()
개수 확인: Map.size
요소 추가: Map.set(key, value)  //return map 
요소 접근: Map.get(key)
요소 삭제: Map.delete(key)
전체 삭제: Map.clear()
요소 존재 여부 확인: Map.has(key)
                               Map.hasOwnProperty(key)
그 외: Map.keys() 
          Map.values()
          Map.entires()

 

처음 map을 생성하면 빈 Object가 생성된다. 

map에는 string 외에 boolean, number, object 등 다양한 key가 존재할 수 있다. 

map.set()은 return value가 map이기 때문에, method chaining을 해줄 수 있다.

map.set("name", "john").set(false, "bool_type");  //이런식으로 사용 가능! 

 

[ Map 반복문 ]

map은 iterator(배열이나 유사한 자료 구조의 내부의 요소를 순회(traversing)하는 객체) 속성을 이용하여 

[ for...of ] 구문을 통해 반복문 수행이 가능하다. 

 

Map.keys() 
Map.values()
Map.entires()
를 이용해 원하는 결과만 출력할 수 있다! 

entries()를 명시하지 않고 그냥 map을 호출해도,

javascript내에서 자동으로 entries()를 호출해주므로 둘의 결과값은 같다. 

 

[ Map과 Object 간의 변환 ]

Map을 Obejct로 변환할 때 Object.fromEntries() 함수를 이용해 쉽게 변환할 수 있다. 

 

반대로 Obejct를 Map으로 변환하려면 약간의 과정이 추가되어야 한다. 

1) Object.entries(); // JavaScript 에서 iterable protocol 을 구현하지 않은 Object 는 iterable 이 아니기 때문에,

                                 이를  iterable한 Object로 변환시켜주는 과정이 필요하다.  

2) new Map(변환한 entries); 

 

 

(*2022.03.05 Note: iterator와 Iterable의 개념에 대해서 좀 더 공부가 필요하다.

https://helloworldjavascript.net/pages/260-iteration.htm 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/is_not_iterable )

 

​

 

 

Obejct와 Map에 관해 검색하다가 재미있는 글을 발견하여 링크를 첨부한다.

간혹 알고리즘을 풀 때 나도 Object를 Map처럼 사용한 적이 있는데,

이 글을 보니 Map을 더 잘 써먹어야겠다는 생각이 들었다.

 

https://shanepark.tistory.com/220

제발 한국인이라면 자바스크립트 Object를 Map 처럼 사용하지 맙시다.