Javascript 기초 - 맵과 셋

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion', 50]
]);

//key(vegetable)를 대상으로 순회
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); //cucumber, tomatoes, onion
}

//값(amount)을 대상으로 순회
for( let amount of recipeMap.values()){
  alert(amount); //500,350,50
}

//[키, 값] 쌍을 대상으로 순회
for(let entry of recipeMap){ //recipeMap.entries()와 동일
  alert(entry); //cucumber,500 ...
}

✔️ 객체를 맵으로 바꾸기

각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화 용도로 맵에 전달해 새로운 맵을 만들 수 있다.

평범한 객체로 맵을 만들려면 내장 메서드인 Object.entries(obj)를 활용해야 한다.

let obj = {
name : "john",
age : 30
};

let map = new Map(Object.entries(obj));

alert(map.get('name'));

✔️ 맵을 객체로 바꾸기

반대로 맵을 객체로 바꾸려면, Object.fromEntries를 사용하면 된다. 이 메서드는 각 요소가 [키, 값] 쌍인 배열을 객체로 바꾸어 준다.

let map = new Map();

map.set('banana' , 1);
map.set('orange' , 2);
map.set('apple' , 3);

let obj = Object.fromEntries(map.entires());

// -> map이 객체가 됨
// obj = { banana: 1, orange : 2, apple : 3 }

alert(obj.oragne); //2

✔️ 셋

셋은 중복을 허용하지 않는 값을 모아 놓은 특별한 컬렉션이다. 셋에는 키가 없는 값이 저장된다.

new Set(iterable) - 셋을 만든다. 대개 배열과 같은 이터러블 객체를 전달받아 그 안의 값을 복사에 셋에 넣어준다.
set.add(value) - 값을 추가하고 셋 자신을 반환
set.delete(value) - 값을 제거하고, 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환
set.has(value) - 셋 내에 값이 존재하면 true, 아니면 false를 반환
set.clear() - 셋을 비움
set.size - 셋에 몇 개의 값이 있는지 셈

👉🏻 셋 내에 동일한 값(value)이 있다면 set.add(value)를 더 호출해도 의미 없다.
👉🏻 방명록과 같이 한 방문자는 한 번만 기록되어야 하는 상황에서 적합한 자료구조.

✔️ 셋의 값에 반복작업

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert(value);

//forEach에 쓰인 콜백함수는 인자가 세 개이다. 왜일까?
set.forEach(value, valueAgain, set) => {
  alert(value);
});

forEach에 쓰인 콜백 함수는 세 개의 인수를 받는데, 첫 번째는 값, 두 번째도 같은 값인 valueAgain을 받고 있다. 세 번째가 목표하는 객체(셋)이다. 이렇게 동일한 값이 인수에 두번 등장하는 이유는, 맵과의 호환성 때문이다. 맵의 forEach에 쓰인 콜백이 세 개의 인수를 받을 때를 위해서이다.

이를 통해 맵을 셋으로, 셋을 맵으로 교체하기가 쉽다.

set.keys() - 셋 내의 모든 값을 포함하는 이터러블 객체 반환
set.values() - set.keys와 동일한 작업
set.entries() - 셋 내 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체 반환

✔️ Map 예시

데이터를 캐시나 로컬스토리지에 저장한 후 활용하고자 할 때, 맵을 활용해 데이터들을 저장하고 불러온다.

class CachedStorage {
    constructor() {
        this.storage = new Map();
    }

    getCachedData(key) {
        return this.storage.get(key);
    }

    setCachedData(key, value) {
        return this.storage.set(key, value);
    }
}

export default new CachedStorage;