[JavaScript] Map 과 Set

✅ Map

• 맵은 키에 다양한 자료형 허용
• 메소드, 프로퍼티
  • new Map() : 맵 생성
  • map.set(key, value) : key를 이용해 value를 저장
  • map.get(key) : key에 해당하는 값 반환
  • map.has(key) : key가 존재하면 true, 존재하지 않으면 false 반환
  • map.delete(key) : key에 해당하는 값 삭제
  • map.clear() : 맵 안의 모든 요소 제거
  • map.size : 요소의 개수 반환 (배열의 length 역할)

let map = new Map();

map.set('1', 'str1'); // 문자형 키
map.set(1, 'num1'); // 숫자형 키
map.set(true, 'bool') // 불린형 키

// 객체는 키를 문자형으로 변환하나 
// 맵은 그대로 유지

console.log(map.get(1)); // 'num1'
console.log(map.get('1')); // str1

console.log(map.size); // 3

• 맵은 키로 객체 허용

let john = {name: john};

let cnt = new Map();
cnt.set(john, 123);

console.log(cnt.get(john)); // 123

✅ 맵의 요소에 반복 작업

• 3가지 메서드를 사용 가능
  • map.keys() : 각 요소의 키를 모은 이터러블(반복가능한) 객체 반환
  • map.values() : 각 요소의 값을 모은 이터러블 객체 반환
  • map.entries() : [키, 값] 이터러블 객체 반환 ( for of )

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

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

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

// [키, 값] 대상으로 순회
for (let entry of recipeMap) {
    console.log(entry);
}

// 이렇게 사용 가능
for (let [key, value] of recipeMap.entries()){
    console.log(key);
    console.log(value);
}

• 맵은 배열과 유사하게 forEach 지원

recipeMap.forEach( (value, key, map) => {
    console.log(`${key} : ${value}`); 
    // cucumber : 500 ...
})

✅ 객체를 맵으로 바꾸기

• Object.entries(obj) 활용

const obj = {
    name: 'Hwang',
    age : 29,
}
const arr = Object.entries(obj);
console.log(arr) // type은 Object임
// [['name', 'Hwang'], ['age', 29]]

let obj = {
    name : 'john',
    age : 30,
}

let map = new Map(Object.entries(obj));
console.log(map.get('name')); // john 

✅ 맵을 객체로 바꾸기

• Object.fromEntries() 활용

  const arr = [['banana', 1], ['orange', 2], ['meat', 4]];
  const obj = Object.fromEntries(arr);
  // obj = { 'banana' : 1, ,,}

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환
// map.entries 는 { [], [], } 이런 형태임

✅ Set

• 셋은 중복 허용하지 않음
• 주요 메서드
  • new Set(iterable) : 셋을 만든다. 이터러블 객체를 전달받으면 (대개 배열) 그 안의 값을 복사하여 셋에 넣음
  • set.add(value) : 값을 추가하고 셋 자신을 반환
  • set.delete(value) : 값을 제거. 셋 내에 값이 있어서 제거 성공하면 true, 아니면 false 반환
  • set.has(value) : 셋 내에 값이 존재하면 true, 없으면 false 반환
  • set.clear() : 셋을 비운다.
  • set.size : 셋의 길이

✅ 셋의 값에 반복 작업하기

• for..of 나 forEach 를 사용하여 셋의 값을 대상으로 반복 작업 수행

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

for (let value of set) {
    console.log(value);
}

set.forEach((value, valueAgain, set) => {
    alert(value);
});

• set.keys() : 셋 내의 모든 값을 포함하는 이터러블 객체 반환
• set.values() : set.keys() 와 동일한 작업. 맵 과의 호환성을 위한 메서드
• set.entries() : [ value, value ] 배열을 포함하는 이터러블 객체를 반환. 맵 과의 호환성 위한 메서드