[javascript] Map

개발/FE

안자매 2022. 6. 21. 16:41

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

ES6에서 값들을 매핑하기 위한 새로 등장한 자료구조이다.

Map 객체의 장점

① key 값의 다양성

객체에서는 문자열(String) 혹은 심볼(Symbol)만 프로퍼티의 키로 사용할 수 있었는데, 맵 객체에서는 함수나 객체를 포함한 모든 자료형이 프로퍼티의 키로 쓰일 수 있다.

※ Object와 Map 비교

Object를 사용하는 경우

- 데이터를 저장하기 위한 간단한 구조이며, Key가 String이거나 Integer인 경우 → Map을 생성하는 것보다 적은 시간이 걸림

- 각각의 property 또는 element가 별도의 로직이 적용되어야 하는 경우

- JSON으로 또는 JSON에서 변환해야 하는 경우

Map을 사용하는 경우

- 키의 추가/삭제가 빈번한 경우 → Map은 순수한 Hash이기 때문에 속도가 더 뛰어남

- 키의 순서가 보장되어야 하는 경우

- 데이터의 크기가 큰 경우

- 런타임 시점까지 key가 정해지지 않은 경우

- key와 value가 각각 같은 타입일 경우

② 메소드 사용의 명확성

Map 객체를 다룰때는 메소드만으로 Map 객체 안에 들어있는 프로퍼티들을 수정하거나 조회할 수 있다. 메소드명(set, get, delete 등)이 직관적이기 때문에 동작과 의도를 정확하게 파악할 수 있다.

③ 깔끔한 순회

맵 객체는 for...of 문을 통해 순회가 가능하다. 이 때 순회는 Map Iterator의 형태로 이루어진다.

💙 반복문에 대해 알고싶다면 더보기를 클릭해주세요

[javascript] 반복문 (for, for in, for of)

개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 프로그래밍을 배우면 가장 먼저 하는 반복문 ! (for 또는 while 사용해서

ahnsisters.tistory.com

- Map 객체 생성

let map = new Map();

- key, value 추가

map.set('aaa',1);
map.set('bbb',2);
map.set('ccc',3);

- map 객체 크기 조회

map.size;
console.log(map.size);

- has(): key 존재 여부 확인

map.has('bbb');
console.log(map.has('bbb'));

- delete(): element 삭제

map.delete('bbb');
console.log(map.has('bbb'));

- clear(): 모든 element 삭제

map.clear();
console.log(map.size);

실행결과