1. Map

맵(Map)은 key가 있는 data를 저장한다는 점에서 "객체"와 유사하다. "map"은 key에 다양한 자료형을 허용한다는 점에서 차이가 있다.

map에는 다음과 같은 주요 메소드와 프로퍼티가 있다.

• 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 – 요소의 개수를 반환

아래의 예시를 보자

let map = new Map();

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

// 객체는 키를 문자형으로 변환한다.
// 맵은 키의 타입을 변환시키지 않고 그대로 유지한다. 따라서 아래의 코드는 출력되는 값이 다르다.
console.log( map.get(1)   ); // 'num1'
console.log( map.get('1') ); // 'str1'

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

map은 객체와 달리 key를 문자형으로 변환하지 않으며 key에는 자료형 제약이 없다!

★map은 key로 객체를 사용할 수 있다.

let john = { name: "John" };

// 고객의 가게 방문 횟수를 세본다고 가정해보자
let visitsCountMap = new Map();

// john을 맵의 키로 사용해보자
visitsCountMap.set(john, 123);

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

객체는 문자열 key를 사용할 수 있지만 객체 key는 사용할 수 없다.

let john = { name: "John" };

let visitsCountObj = {}; // 객체를 생성

visitsCountObj[john] = 123; // 객체(john)를 키로 해서 객체에 값(123)을 저장

// 원하는 값(123)을 얻으려면 아래와 같이 키가 들어갈 자리에 `object Object`를 써줘야한다.
console.log( visitsCountObj["[object Object]"] ); // 123

visitsCountObj는 객체이기 때문에 모든 키를 문자형으로 변환시킨다. 이 과정에서 john은 문자형으로 변환되어 "[object Object]"가 된다다.

1-1. Map의 요소에 반복 작업하기

다음 세 가지 메소드를 사용하여 map의 각 요소에 반복 작업을 할 수 있다.

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

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

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

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

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

map은 배열과 유사하게 내장메소드 forEach도 지원한다.

// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
  console.log(`${key}: ${value}`); // cucumber: 500 ...
});

1-2. Object.entries: 객체를 맵으로 바꾸기

위의 내용에서 Object.entries(obj)를 사용해 평범한 객체를 맵으로 바꾸는 방법에 대해 알아보았다.

이제 반대로 map을 객체로 바꾸는 방법에 대해 알아보자.

Object.fromEntries를 사용하면 가능하며, 이 메소드는 각 요소가 [key, value] 쌍인 배열을 객체로 바꿔준다.

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// prices = { banana: 1, orange: 2, meat: 4 }

console.log(prices.orange); // 2

Object.fromEntries를 사용해 맵을 객체로 바꿔보자.

자료가 맵에 저장되어있는데, 서드파티 코드에서 자료를 객체형태로 넘겨받길 원할 때 이 방법을 사용할 수 있다.

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

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 
// let obj = Object.fromEntries(map); // .entries()를 생략함

// 맵이 객체가 되었다
// obj = { banana: 1, orange: 2, meat: 4 }

console.log(obj.orange); // 2

map.entries()를 호출하면 맵의 [key, value]을 요소로 가지는 iterable을 반환한다. Object.fromEntries를 사용하기 위해 딱 맞는 형태다.

map에서의 일반적인 반복은 map.entries()를 사용했을 때와 같은 key-value 쌍을 반환한다. 따라서 map과 동일한 key-value을 가진 일반 객체를 얻게 된다.

2. Set

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

주요 메소드는 다음과 같다.

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

set 내에 동일한 value가 있다면 set.add(value)을 아무리 많이 호출하더라도 아무런 반응이 없을 것이다. 셋 내의 값에 중복이 없는 이유가 바로 이 때문이다.

방문자 방명록을 만든다고 가정 해보자. 한 방문자가 여러 번 방문해도 방문자를 중복해서 기록하지 않겠다고 결정 내린 상황이라면, 한 방문자는 '단 한 번만 기록’되어야 한다.

이때 적합한 자료구조가 바로 셋이다.

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있다
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장됨
console.log( set.size ); // 3

for (let user of set) {
  console.log(user.name); // // John, Pete, Mary 순으로 출력
}

set 대신 배열을 사용하여 방문자 정보를 저장한 후, 중복 값 여부는 배열 메서드인 arr.find를 이용해 확인할 수도 있다. 하지만 arr.find는 배열 내 요소 전체를 뒤져 중복 값을 찾기 때문에, 셋보다 성능 면에서 떨어진다. 반면, set 값의 유일무이함을 확인하는데 최적화되어있다.

2-1. Set의 값에 반복 작업하기

for..of나 forEach를 사용하면 반복 작업을 수행할 수 있다.

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

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

// forEach를 사용해도 동일하게 동작합니다.
set.forEach((value, valueAgain, set) => {
  console.log(value);
});

forEach에 쓰인 콜백 함수는 세 개의 인수를 받는데, 첫 번째는 값, 두 번째도 같은 값인 valueAgain을 받고 있다. 세 번째는 목표하는 객체(set)이며 동일한 값이 인수에 두 번 등장하고 있다.

이렇게 구현된 이유는 map과의 호환성 때문이다. 맵의 forEach에 쓰인 콜백이 세 개의 인수를 받을 때를 위해서이다. 이상해 보이겠지만 이렇게 구현해 놓았기 때문에 map을 set으로 혹은 set을 map으로 교체하기가 쉽다.

set에도 map과 마찬가지로 반복 작업을 위한 메소드가 있다.

• set.keys() – set 내의 모든 값을 포함하는 iterable 객체를 반환
• set.values() – set.keys와 동일한 작업을 한다. map과의 호환성을 위해 만들어진 메소드
• set.entries() – set 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 iterable 객체를 반환한다. map과의 호환성을 위해 만들어졌다.