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);