모던 자바스크립트 (자료구조와 자료형) 3-5. 맵(map)과 셋(set)

자바스크립트의 복잡한 자료구조

- 객체

: 키가 있는 컬렉션을 저장함

 

- 배열

: 순서가 있는 컬렉션을 저장함

 

 

 

 

맵 (Map)

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

: 맵은 객체와 달리 키를 문자형으로 변환하지 않음

: 맵을 사용할 때는 map[key]가 아닌 map.get / map.set을 활용하는 것이 옳음

 

- 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'); // 불린형 키

// 객체는 키를 문자형으로 변환한다는 걸 기억하고 계신가요?
// 맵은 키의 타입을 변환시키지 않고 그대로 유지합니다. 따라서 아래의 코드는 출력되는 값이 다릅니다.
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

 

: 맵은 키로써 객체를 허용

let john = { name: "John" };

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

// john을 맵의 키로 사용하겠습니다.
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123



let visitsCountObj = {}; // 객체를 하나 만듭니다.

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

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

 

- 맵이 키를 비교하는 형식

: SameValueZero라고 불리는 알고리즘을 통해 등가 여부를 확인

: ===과 비슷하지만 NaN과 NaN이 같다고 하는 것에서 다름

: NaN을 키로 사용할 수 있음

 

 

 

 

체이닝

: 맵은 map.set을 할 때마다 자기 자신이 호출하기 때문에 체이닝을 할 수 있음

map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

 

 

 

 

맵의 요소에 반복작업 하기

: 맵은 삽입 순서를 기억하기 때문에 삽입된 순서대로 순회를 실시함 

 

- map.keys()

: 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환합니다.

 

- map.values()

: 각 요소의 값을 모은 이터러블 객체를 반환합니다.

 

- map.entries()

: 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다.

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 ...
}

 

- forEach

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

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

 

 

 

 

Object.entries()

: 객체를 맵으로 변경하는 메서드

: 객체의 [키, 값]을 요소로 가지는 배열 반환

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

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

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

 

 

 

Object.fromEntries()

: 맵을 객체로 변경하는 메서드

: [키, 값] 쌍인 맵을 객체로 변환

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

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

alert(prices.orange); // 2

 

 

 

map.entries()

: [키, 값]을 요소로 가지는 이터러블을 반환

: Object.formEntries를 사용하기 좋은 형태

let obj = Object.fromEntries(map); // .entries()를 생략함

 

 

 

셋 (Set)

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

: 키가 없는 값이 저장됨

: 셋 내의 동일한 값이 있을 경우 중복 저장이 안됨

 

- new Set(iterable)

: 셋을 생성. 이터러블 객체를 전달받으면 그 안의 값을 복사해 셋에 넣어줌

 

- set.add(value)

: 값을 추가하고 셋 자신을 반환

 

- set.delete(value)

: 셋의 값을 제거. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환

 

- set.has(value)

: 셋 내에 값이 존재하면 true, 아니면 false를 반환

 

- set.clear()

: 셋을 비움

- set.size

: 셋에 몇 개의 값이 있는지 카운팅

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

// 셋에는 유일무이한 값만 저장됩니다.
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // // John, Pete, Mary 순으로 출력됩니다.
}

 

 

 

 

셋의 값에 반복작업 수행하기

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

 

 

 

 

셋의 반복 작업을 위한 메서드

- set.keys()

: 셋 내의 모든 값을 포함하는 이터러블 객체를 반환

 

- set.values()

: set.keys와 동일한 작업 수행. 맵과의 호환성을 위해 만들어진 메서드

 

- set.entries()

: 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환

: 맵과의 호환성을 위해 만들어진 메서드

 

 

 

 

 

Refference

https://ko.javascript.info/map-set