0622: Map, Set

커뮤니티에서 발견한 어떤 코드를 공부하다가 맵, 셋에 대한 지식이 부족함을 느껴서 다시 정리하려고 한다.

const arr = [
  { apple: 10 },
  { banana: 25 },
  { banana: 10 },
  { melon: 20 },
  { apple: 10 },
  { melon: 20 },
];

function accumulate(arr) {
  const map = new Map();

  arr.forEach((v) => {
    const [[key, value]] = Object.entries(v);
    if (map.has(key)) {
      map.set(key, map.get(key) + value);
    } else {
      map.set(key, value);
    }
  });
  
  return console.log(map);
}

accumulate(arr);
// {"apple" => 20, "banana" => 35, "melon" => 40}

 

객체: key가 있는 컬렉션을 저장
배열: 순서가 있는 컬렉션을 저장

그런데 이 2가지 자료구조만으로 부족함이 있어서 Map과 Set이 등장함

 

맵 Map 

객체처럼 key가 있는 데이터를 저장하지만, 객체와 달리 key에 다양한 자료형을 허용한다.
또한, 객체와 달리 프로퍼티 순서를 기억한다.

맵의 주요 메서드와 프로퍼티

• new Map() – 맵을 만듭니다.
• map.set(key, value) – key를 이용해 value를 저장합니다.
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
• map.delete(key) – key에 해당하는 값을 삭제합니다.
• map.clear() – 맵 안의 모든 요소를 제거합니다.
• map.size – 요소의 개수를 반환합니다.
•  

맵의 요소에 반복 작업하기. 순회!

• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환합니다.
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환합니다.
• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다.

 

+) keys(), values(), entries()를 사용할 수 있는 자료구조는 다음과 같습니다.

• Map
• Set
• Array

 

일반 객체에서 위 메서드를 사용하면 다음과 같은 결과를 반환한다.

• Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
• Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
• Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.

Object.메서드(obj) = 배열

예시)

let user = {
  name: "John",
  age: 30
};

• Object.keys(user) = ["name", "age"]
• Object.values(user) = ["John", 30]
• Object.entries(user) = [ ["name","John"], ["age",30] ]

+) Object.fromEntries(obj) 를 사용하면 배열을 객체로 변환

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

 

 

셋 Set

중복을 허용하지 않는 값들을 모아놓은 특별한 컬렉션
배열과 비슷하지만 차이점은 중복을 허용하지 않는다는 것이다.

셋의 주요메서드

• new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다.
• set.add(value) – 값을 추가하고 셋 자신을 반환합니다.
• set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다.
• set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환합니다.
• set.clear() – 셋을 비웁니다.
• set.size – 셋에 몇 개의 값이 있는지 세줍니다.

* 중복을 허용하지 않기 때문에
셋 내에 동일한 값(value)이 있다면 set.add(value)을 아무리 많이 호출하더라도 아무런 반응이 없다.

 

 

출처: https://ko.javascript.info/map-set, https://ko.javascript.info/keys-values-entries