[Zoom Clone Coding] Map과 Set

Map

 

key가 있는 데이터를 저장한다는 점에서 객체와 유사하지만 key에 다양한 자료형을 허용한다는 점에서 차이가 있다.

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

 

아래는 Map의 주요 메서드와 property이다.

 

//맵 생성
new Map()

//맵에 key를 이용해 value를 저장
map.set(key, value)

//map에서 key에 해당하는 값을 반환. key가 존재하지 않으면 undefined를 반환
map.get(key)

//map에 key가 존재하면 true, 존재하지 않으면 false를 반환
map.has(key)

//map에서 key에 해당하는 값을 삭제
map.delete(key)

//맵 안의 모든 요소를 제거
map.clear()

//요소의 개수를 반환
map.size

 

 

map은 key로 객체를 허용한다.

let Card = { name: "baki" };

// Card 사용 횟수를 세본다고 가정
let CountMap = new Map();

// Card를 맵의 키로 사용
CountMap.set(baki, 23);

alert( CountMap.get(baki) ); // 23

 

 

map의 요소에 반복 작업하기

//각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환
map.keys()

//각 요소의 값을 모은 이터러블 객체를 반환
map.values()

//요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환
map.entries()

 

 

예시

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

// 키(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 ...
}

 

 

map은 배열과 유사하게 내장 메서드 forEach도 지원

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

 

 

객체를 map으로 바꾸기

 

내장 메서드 Object.entries(obj)를 활용, 이 메서드는 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환

let obj = {
  name: "baki",
  age: 23
};

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

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

 

 

map을 객체로 바꾸기

 

 Object.fromEntries를 사용, 이 메서드는 각 요소가 [키, 값] 쌍인 배열을 객체로 바꿈

 

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

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

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

alert(obj.orange); // 2

 

 

 

---

 

Set

 

 

Set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다.

Set에 key가 없는 값이 저장된다.

 

//set 생성, 이터러블 객체를 전달받으면(ex.배열) 그 안의 값을 복사해 set에 넣음
new Set(iterable)

//값을 추가하고 set 자신을 반환
set.add(value)

//값을 제거, 호출 시점에 set내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환
set.delete(value)

//set 내에 값이 존재하면 true, 아니면 false를 반환
set.has(value)

//set을 비운다.
set.clear()

//set에 몇 개의 값이 있는지 카운트
set.size

 

 

(사용 ex)

방문자 방명록을 만든다고 가정했을 때, 한 방문자가 여러 번 방문해도 방문자를 중복해서 기록하지 않아야 한다. 즉, 한 방문자는 '단 한 번만 기록’되어야 한다.

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

// set에는 중복된 값은 저장되지 않는다.
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); 		// John, Pete, Mary 순으로 출력(입력된 순서)
}

 

 

set의 값에 반복 작업하기

 

 

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

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

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

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

 

위 코드 중 forEach문에서 세 개의 인수를 받는데 첫 번째 값과 두 번째 값이 같은 것을 확인할 수 있다.

그 이유는 map과의 호환성을 위해서이다.

이렇게 구현해 놓으면 후에 map을 set으로, set을 map으로 교체할 때 유용하게 사용할 수 있다.

 

 

 

set에서 사용하는 반복 작업을 위한 메서드

set 내의 모든 값을 포함하는 이터러블 객체를 반환
set.keys()

//set.keys와 동일한 작업 진행, map과의 호환성을 위해 만들어진 메서드
set.values()

//set 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환, map과의 호환성을 위해 만들어짐
set.entries() –