본문 바로가기
JS

JavaScript 내장 객체 Map

by spare8433 2023. 2. 17.

Map


Map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억합니다. 모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있습니다.


Map 객체는 키-값 쌍인 집합입니다. 한 Map에서의 키는 오직 단 하나만 존재 합니다.


Map 객체는 키-값 쌍으로 반복이 가능하고 반복은 삽입한 순서대로 발생합니다.


Map vs Object


ObjectMap과 유사합니다. 둘 다 값을 가리키는 키를 설정하고, 해당 값을 받아오며, 키를 삭제하며, 키에 무언가가 저장되었는지 여부를 알 수 있습니다.

그러나 경우에 따라서는 아래와 같이 Map이 선호되는 중요한 차이점이 존재한다


1. 보안


Object : 공격자 객체의 프로토타입을 재정의 가능
Map : 사용자가 제공하는 키와 값에 대해서 안전하게 사용할 수 있다 (get, set 메서드 활용)


2. 키 유형


Object : String또는 Symbol
Map : 모든 값 가능


3. 크기


Object : 알기힘듬
Map : size 속성 쓰면 편함


4. 순회


Object : Object.keys 혹은 Object.entries , for - in a등등을 활용해야 반복가능
Map : 직접 반복 할 수 있음 (ex forEach)


5. json


Object : json 이랑 친함
Map : json 이랑 안친해서 몇가지 작업이 필요함 - https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map


생성자


new Map()
new Map(iterable)

  • iterable Optional

    하나의 Array 혹은 키-값 쌍인 요소를 가진 반복 가능 객체. (예를 들어 [[ 1, 'one' ],[ 2, 'two' ]]과 같이 2개의 요소를 가진 배열). 각각의 키-값 쌍은 새로운 Map에 추가됩니다.


관련 속성


// 값들의 수량 리턴
Map.prototype.size

관련 메서드


// val 값을 삭제 하고 삭제성곡 여부를 boolean 으로 리턴함
Map.prototype.delete(val)


// 모든 속성 지움
Map.prototype.clear()


// 주어진 키에 해당하는 요소가 존재 여부를 가리키는 boolean 값을 반환합니다
Map.prototype.has(key)


// `Map` 객체에서 특정 요소를 반환합니다. 
// 만약 주어진 키와 관련된 값이 객체라면 해당 객체에 대한 참조만 가져오고, 해당 객체에 대한 모든 변경은 `Map` 내에서 효율적으로 수정됩니다.
Map.prototype.get(key)


// `Map` 객체에서 주어진 키와 값을 추가하거나 업데이트합니다.
Map.prototype.set(key, value)


// `keys()` 메서드는 객체의 각 요소에 대한 키를 삽입한 순서대로 가지고 있는 새 iterator 객체를 반환합니다. 
// 특별한 경우에 이 iterator 객체도 반복 가능
Map.prototype.keys()


// `values()` 메서드는 `Map`객체에 삽입한 순서대로 요소의 값을 가지는 새로운 iterator 객체를 반환합니다.
Map.prototype.values()


// 반복할 때 사용
Map.prototype.forEach(fn(key, val, map))

기타


// 배열 키 값 형태로 만들어버리기
Array.from(myMap)


// 간단하게
[...myMap];


// 병합 키 값 중복시 마지막 키의 값을 따릅니다.
const merged = new Map([...first, ...second]);


// 배열과도 병합가능
const merged = new Map([...first, ...second, [1, 'eins']]);

'JS' 카테고리의 다른 글

eslint prettier 코드 포맷팅 통합  (0) 2023.06.08
URI 인코딩 및 디코딩 관련 js 메서드  (0) 2023.06.07
JS 내장객체 Array 메서드 정리  (0) 2023.02.16
JavaScript Set  (0) 2023.02.14
유사 배열 객체와 반복 작업  (0) 2022.08.26