본문 바로가기

Web/JavaScript

JavaScript, Map 자료구조

복잡한 자료구조 중 하나인 Map과 이와 유사한 Object(객체)가 어떻게 다른지 알아보고

 

Map 자료구조의 내장 메소드와 프로퍼티를 사용해봅시다.

 

1. Key 값

Object Map은 둘 다 Key가 있는 콜렉션입니다.

 

여기서 명확한 차이가 드러납니다.

 

Object 즉 객체는 Key값으로 문자열만 가능한 데 반해

 

Map은 문자열, 숫자형, 객체 다양한 형태로 가능합니다.

 

2. Method & Property

메소드 & 프로퍼티 역할 반환 값
new Map() 생성자 Map 자료구조
target.set(key, value) key를 이용해 value를 저장 Map 자료구조
*따라서 체이닝 가능
target.get(key) 해당하는 key의 value값을 반환합니다 해당하는 key value값이 없을 경우
undefined 반환
있을 경우, value 반환
target.has(key) 해당하는 key가 있는지 확인합니다 boolean
target.delete(key) 해당하는 key value값을 삭제합니다 boolean (삭제 성공시 true, else false)
target.clear() 해당하는 target Map()의 모든 요소들을
제거합니다
X, undefined
target.size 해당하는 target Map의
요소의 개수를 반환합니다
숫자형
target.keys() 모든 각 요소의 key를
Iterable 객체로 반환합니다.
Iterable 객체
target.values() 모든 각 요소의 value를
Iterable 객체로 반환합니다.
Iterable 객체
target.entries() 모든 각 요소의 (key, value)를
Iterable 객체로 반환합니다.
Iterable 객체
target.forEach((value, key, map) => {}) 각 (key, value) 대상으로 함수를 실행  

 

3. 순회 순서

위에서 본 Map 내장 메소드들 중 순회하는 순서에 대해 의문이 들 것입니다.

 

Map 자료구조는 삽입한 Key의 순서대로 Map 자료구조를 순회합니다.

 

4. 결론

- Map은 Key를 객체, 원시형 등 다양한 형태를 사용할 수 있다 -> Object는 문자열만 가능하다

- Map의 순회 순서는 삽입한 순서이다. 

 

 

Ref.

 

맵과 셋

 

ko.javascript.info

 

'Web > JavaScript' 카테고리의 다른 글

JavaScript, Prototype 상속과 .__proto__  (0) 2024.03.22
JavaScript, Set 자료구조  (0) 2024.03.12
JavaScript, 내장 메소드 정리  (0) 2024.03.11
JavaScript, Undefined & null & Nan  (0) 2024.03.04
JavaScript, let, var의 차이  (0) 2024.03.04