자바스크립트 JS Map()자료구조 정리!

 

코딩테스트를 준비하면서 array 관련 메서드들이나

재귀함수,이진탐색 등 알고리즘 위주로 공부를 하다보니

상대적으로 자료구조에 소홀하게 되는 것 같습니다.

 

그래서 그래도 조금이나마 익숙한 Map()부터 보려고요..

 

ES6에 도입된 문법 Map() 

먼저 짚고 넘어가야할 것이

array의 메서드 중 하나인 Array.prototype.map()과

Map()은 이름만 같고 완전히 다르다는것

 

Map은 굳이 비교하자면 Object에 더 가깝다고 할 수 있는데

메서드가 제한적인 Object에 비해 유용한 메서드들이 많이 구현되어 있다는 특징이 있다.

 

그래서 object로 풀 수 있는 문제를 Map으로도 풀 수 있는 경우가 꽤 있었던걸로 기억이 나는듯

 

Map

key - value로 이루어짐

key값을 이용해서 value를 get , set 할 수 있음

key는 중복될 수 없음

key값에 모든 자료형 사용 가능

array.length 역할과 비슷하게 Map은 .size를 가짐

 

 

Map과 Object의 차이점

오브젝트	맵
순회를 할 수 없음	순회 메서드 존재함
size 측정 불가능	size 측정 가능( .size)
key는 반드시 string이거나 symbol이어야함	모든 자료형 사용가능

 

Map 생성자

new Map()

 

Map 내장 메서드

Map.prototype.size	map의 size를 정수형태로 반환해요!
Map.prototype.clear()	Map 개체의 모든 키-밸류 쌍을 제거합니다.
Map.prototype.delete()	map안에 지울요소가 있으면 지우고 true를 반환 / map안에 지울 요소가 없으면 false 반환
Map.prototype.get()	전달된 키에 연결된 값을 반환 / Map안에 찾는 키가 없다면 undefined반환 get()안에 key값을 넣어주고 key값이 있다면 그 key값에 대응하는 value를 반환합니다.
Map.prototype.has()	Map 안에 전달된 key값이 있는지 여부에 따라 true false를 반환합니다.
Map.prototype.set()	key와 value를 같이 사용하여 map안에 항목을 추가할 수 있습니다. map.set("hi" , "bye") 이런식으로 인자를 전달해주면 됨
Map.prototype[@@iterator]	맵의 키-밸류 쌍을 생성하는 반복자를 반환합니다.
Map.prototype.keys()	맵의 키를 모두 추출하는데 이때 순서는 키값이 삽입된 순서대로 반환됩니다. 반환형태 : {"first key" , "second key" , "third key"}
Map.prototype.values()	keys와 유사한데 키를 추출하는게 아니라 value를 추출합니다. 순서는 삽입 순서대로에요! 반환형태 : {"first value" , "second value" , "third value"}
Map.prototype.entries()	key-value 쌍을 같이 추출합니다.  순서는 삽입순서대로이고 for-of 루프를 사용할 수 있어요
Map.prototype.forEach()	삽입순서에 따라 forEach()를 각 키-밸류 쌍에 한번씩 제공된 함수를 실행합니다. callbackFn을 실행하고 value, key , map, thisArg 순서로 선택인자를 받습니다.  키 - 밸류로 인자를 받는게 아니라 밸류 - 키로 인자를 받는걸 주의하세요

 

기본적인 메서드를 사용해봅시다.

let map = new Map();

map.set("i am key", "i am value")
map.set("i am second key","i am second value")

console.log("get 실행결과 key값 접근 : " + map.get("i am key"))
console.log("get 실행결과 value값 접근 : " + map.get("i am value"))
console.log("has 실행결과 key값 접근 : " + map.has("i am key"))
console.log("has 실행결과 value값 접근 : " + map.has("i am value"))

console.log("keys 실행결과 : ")
console.log(map.keys())

console.log("values 실행결과 : ")
console.log(map.values())

console.log("entries 실행결과 : ")
console.log(map.entries())

 

출력 결과

get 실행결과 key값 접근 : i am value
get 실행결과 value값 접근 : undefined
has 실행결과 key값 접근 : true
has 실행결과 value값 접근 : false
keys 실행결과 : 
[Map Iterator] { 'i am key', 'i am second key' }
values 실행결과 : 
[Map Iterator] { 'i am value', 'i am second value' }
entries 실행결과 : 
[Map Entries] {
  [ 'i am key', 'i am value' ],
  [ 'i am second key', 'i am second value' ]
}

set()메서드를 이용해서 key-value 쌍을 map에 넣어주었습니다.

 

get , has는 key값을 기준으로 접근하기 때문에

인자에 value값을 넣어서 접근하려고 해도 false, undefined가 나오는것을 볼 수 있습니다.

 

keys() 실행하면 Map의 모든 key값이 출력되고

values()를 실행하면 Map의 모든 value 값이 출력되는걸 알 수 있네요!

 

get 을 이용하면 key - value를 매칭시켜줘야하는 문제를 해결하는데 도움이 될 것 같네요

 

 

Map.for..of()문 사용 예시

for (const [key, value] of map) {
    console.log(key, value);
}

출력결과

i am key i am value
i am second key i am second value

for..of()문은 Map 내의 key-value쌍의 개수만큼 Map을 순회합니다.

for ( key of map.keys())

for ( amount of map.value()) 와 같이

key 혹은 vlaue를 대상으로 순회하게 할수도있습니다.

 

 

 

Map.forEach 예시

map.forEach((value, key, map) => {
    console.log('key값 : ' + key + 'value값 : ' + value);
  });

Map에다가도 forEach를 사용할 수 있습니다.

forEach의 동작순서는 삽입 순서를 따라간다는 것을 기억하고 봅시다!

출력결과

key값 : i am keyvalue값 : i am value
key값 : i am second keyvalue값 : i am second value

삽입 순서대로 forEach가 동작해서

i am key , i am value가 먼저 console.log()에 찍히고

그 다음 i am second key , i am second vlaue가 console.log()에 찍히는걸 확인할 수 있네요

 

 

 

 

주의할점

map[key] = 2 이런식으로도 map을 사용할 수는 있지만 이렇게 사용하면 map을 일반 객체처럼 취급하게됩니다.
따라서 map에 key-value값을 넣어주고 싶을땐 map.set()을 사용하는게 권장됩니다.

 

 

 

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach

Map.prototype.forEach() - JavaScript | MDN

https://medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

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

https://maxkim-j.github.io/posts/js-map/

김맥스 블로그 | 자바스크립트 맵 객체(Map Object)

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%A3%8C%ED%98%95-Map-%F0%9F%9A%A9-%EC%A0%95%EB%A6%AC

[JS] 📚 자바스크립트 자료형 Map 🚩 정리