[Group Study, 모던 자바스크립트 Deep Dive] - 37 Map

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

37.2 Map

Map 객체는키와 값의 쌍으로 이루어진 컬렉션이다. 객체와 유사하지만 다음과 같은 차이가 있다.

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

37.2.1 Map 객체 생성

Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터럽ㄹ은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

[예제 37-01]

const map = new Map(['k1', 'v1'], ['k2', 'v2'])

const ma2 = new Map(['k1', 'v1'], ['k1', 'v1']) // Map(1) {"k1" => "v1"}

37.2.2 요소 개수 확인

[예제 37-02]

const map = new Map(['k1', 'v1'], ['k2', 'v2'])

map.size

37.2.3 요소 추가

[예제 37-02]

 

 

const map = new Map()

const daniel = {name: 'daniel'}

//chaining도 가능, 중복 추가 불가
map
.set('k1', 'v1')
.set('k2', 'v2')

// 키로 저장도 가능
.set(daniel, 'developer')

 

37.2.4 요소 취득

[예제 37-03]

const map = new Map([["k1", "v1"]])
map.get("k1")

37.2.6 요소 삭제

[예제 37-04]

const map = new Map([["k1", "v1"]])

map.has("k1")

37.2.6 요소 삭제

[예제 37-05]

const map = new Map([["k1", "v1"]])
map.delete("k1")

// 없는 키이므로 무시
map.delete("k2")

37.2.7 요소 일괄 삭제

[예제 37-06]

const map = new Map([["k1", "v1"]])
map.clear()