new Map

KHW·2021년 6월 19일
0

Javascript 지식쌓기

목록 보기
45/95

Map

객체와 배열만이 아닌 키에 다양한 자료형을 허용하는 자료형태


메서드

1) new Map() – 맵을 만듭니다.
2) map.set(key, value) – key를 이용해 value를 저장합니다.
3) map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
4) map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
5) map.delete(key) – key에 해당하는 값을 삭제합니다.
6) map.clear() – 맵 안의 모든 요소를 제거합니다.
7) map.size – 요소의 개수를 반환합니다.


예시

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키
map.get('1')		//"str1"
map.get(1)		//"num1"
map.get(true)		//"bool1"

Object vs Map

  1. Object의 키는 Strings이며, Map의 키는 모든 값을 가질 수 있다.
  2. Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.
  3. Map은 삽입된 순서대로 반복된다.
let object = {true : 100,'true':1000,'1':100,1:101}	//문자열로 2개삭제
object		//{1: 101, true: 100}

let map = new Map()			//모든값 적용
map.set(true,100)
map.set('true',1000)
map.set('1',100)
map.set(1,101)
map		//Map(4) {true => 100, "true" => 1000, "1" => 100, 1 => 101}

Object.keys(object).length		//2
map.size				//4

Map을 사용하는 순간

객체의 프로퍼티를 자주 변경해야할 때
메소드 이름들이 예측 가능하여 동작이 명확하고, 기존 객체와 달리 순회도 쉽게 이루어져 데이터를 조작하기 적합


Map 순회하기

let map = new Map()			//모든값 적용
map.set(true,100)
map.set('true',1000)
map.set('1',100)
map.set(1,101)

map.forEach((element) => {console.log(element)});		//1
[...map.entries()].forEach(([_ , val])=>{console.log(val)});	//2
  • 결과
100
1000
100
101			//1) 결과
100
1000
100
101			//2) 결과
  • 둘다 같은 결과이다.

출처

MDN
javascript Info
map을 사용하는 이유

profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자

0개의 댓글