ES6) Map Object(맵 객체)

hyeon·2024년 10월 10일

ES6에서 Map, Set 추가적인 자료구조가 등장했다.
Map과 Set의 목적은 기존의 객체 또는 배열보다 데이터의 구성, 검색, 사용을 효율적으로 처리하기 위함이다.

(1) Map

Map은 Key 와 Value로 이루어져 있고,
일반 객체와 달리 모든 데이터 유형(문자열, 숫자, 객체 등)을 키로 사용할 수 있다.

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.get("one"));

코드결과)
1

(2) keys, values, entries

1. keys

예시 1

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.keys());

코드결과)
[Map Iterator] { 'one', 'two', 'three' }


예시 2

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

for (const key of myMap.keys()) {
  console.log(key);
}

코드결과)
one
two
three


2. values

예시 1

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.values());

코드결과)
[Map Iterator] { 1, 2, 3 }


예시 2

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

for (const value of myMap.values()) {
  console.log(value);
}

코드결과)
1
2
3


3. entries

예시 1

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.entries());

코드결과)
[Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }


예시 2

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

for (const entry of myMap.entries()) {
  console.log(entry);
}

코드결과)
[ 'one', 1 ]
[ 'two', 2 ]
[ 'three', 3 ]

(3) size와 key 기반 검색

1. size

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.size); //map의 사이즈(길이)

코드결과)
3


2. key 기반 검색

- has: 키 존재 여부만 체크

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.has("two")); // key 기반 검색 => boolean 반환
console.log(myMap.has("four"));

코드결과)
true
false


- get: 특정 키에 대한 값을 검색

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.get("one"));

코드결과)
1

profile
당근🥕

0개의 댓글