ES6 Map, Map 컬렉션 in JS 본문

2021 프론트 엔드 로드맵 따라가기/JS

ES6 Map, Map 컬렉션 in JS

알 수 없는 사용자 2021. 6. 16. 11:37

ES6 에서는 Map이라는 새로운 데이터 구조가 추가되었습니다.

 

해당 데이터 구조는 키-값 쌍을 저장하며, 그 저장 순서까지도 기억한다고 하네요.

 

또한 Object Literal과는 다르게 키나 값에 어떠한 타입의(primitive or reference) 데이터가 들어가도 무관하다고 합니다.

 

아래 코드로 살펴보시죠.

 

// Map: 키-값 쌍을 저장. 삽입순서 또한 기억하는 콜렉션
// 일반 객체 리터럴과는 다르게 primitive or reference type 전부 키 또는 값으로 이용가능하다.
const map1 = new Map();

// Set keys
const key1 = "string";
const key2 = {};
const key3 = function () {

};

// set map values by key
map1.set(key1, "Value of key1");
map1.set(key2, "value of key2");
map1.set(key3, "Value of key3");

console.log(map1.get(key1));
console.log(map1.get(key2));
console.log(map1.get(key3));

// Count values
console.log(map1.size);

// Iterating Maps

// Loop using for .. of to get keys and values
for (let [key, value] of map1) {
  console.log(`${key} = ${value}`);
}

// iterate keys only
for (let key of map1.keys()) {
  console.log(key);
}

// iterate values only
for (let value of map1.values()) {
  console.log(value);
}

// also can use foreach
map1.forEach(([value, key]) => {
  console.log(`${key} = ${value}`);
});

// can be array
const keyValArr = Array.from(map1);
console.log(keyValArr); // arrays in array

// can extract only values or keys as an array
const keyArr = Array.from(map1.keys());
console.log(keyArr);
Comments