[TIL]JavaScript_Map, Set

Sohee Yeo·2023년 10월 17일

JavaScript TIL

Map

Map은 키가 있는 값이 저장된 컬렉션이다.

맵과 객체의 차이

객체: 키를 문자형으로 반환
맵: 타입 변환 없이 그대로 유지

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

✔️ map[key] 를 사용할 수 있지만 map을 일반 객체처럼 취급하게 된다. map을 사용할 때는 map의 전용 메서드 set, get 등을 사용하자.

Map의 특징

Map의 key에는 자료형 제약이 없다. map은 객체를 key로 사용할 수 있다.

let john = { name: "John" };

let visitsCountMap = new Map();

visitsCountMap.set(john, 123);

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

맵 체이닝

map.set(key, value) 는 값을 설장할 뿐 아니라 자기 자신(map 객체)를 반환한다. 따라서 map.set을 '체이닝(chaining)'할 수 있다.

const map = new Map();

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

console.log(map);
// Map(3) {'1' => 'str1', 1 => 'num1', true => 'bool1'}

Map의 요소 반복

map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환
map.values() – 각 요소의 값을 모은 이터러블 객체를 반환
map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환

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

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

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

// [key, value] 대상으로 순회
for (let entry of recipeMap) {
  console.log(entry); // cucumber,500 ...
}


//내장 메서드 forEach 지원
recipeMap.forEach( (value, key, map) => {
  console.log(`${key}: ${value}`); // cucumber: 500 ...
});

→ 맵은 값이 삽입된 순서대로 순회가 실시된다.

Object.entries: 객체 → 맵

Object.entries(obj)는 객체를 [key, value] 쌍의 배열로 반환해준다.
new Map([...])은 그 배열을 받아서 Map 객체를 만들어준다.

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

let map = new Map(Object.entries(obj)); // [ ["name","John"], ["age", 30] ]

console.log( map.get('name') ); // John

Object.fromEntries: 맵 → 객체

Object.fromEntries()는 키-값 쌍의 이터러블(iterable)을 받아서 일반 객체로 변환해준다.

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

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

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

→ 주로 API나 다른 코드에서 Map으로 데이터를 관리하다가, 최종적으로 JSON으로 변환하거나 일반 객체로 사용하고 싶을 때 사용한다.

const map = new Map();
map.set('id', 1);
map.set('title', 'Hello');

const obj = Object.fromEntries(map);

// 이 obj는 이제 JSON.stringify(obj)처럼 쉽게 직렬화 가능

Set

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

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

// 중복 x
console.log( set.size ); // 3

for (let user of set) {
  console.log(user.name); // // John, Pete, Mary
}

Set의 주요 메서드

new Set(iterable) – 셋 생성
set.add(value) – 값 추가, 셋 자신 반환
set.delete(value) – 값 제거. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false 반환
set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false 반환
set.clear() – 셋 안의 모든 요소 제거
set.size – 요소의 개수 반환

Set의 값 반복

for...of 문

const mySet = new Set([1, 2, 3]);

for (const value of mySet) {
  console.log(value); // 1, 2, 3
}

forEach() 메서드

set.forEach((value, valueAgain, set) => {
   console.log(`value: ${value}, valueAgain: ${valueAgain}`);
   // value: a, valueAgain: a
   // value: b, valueAgain: b
   // value: c, valueAgain: c
  
  // value, valueAgain은 같음
});

→ Map객체의 forEach()는 (value, key, map) 형태이다. 하지만 Set은 key 없이 value만 존재하기 때문에 Set의 forEach(callbackFn)은 내부적으로 callbackFn(value, value, set) 형태로 호출된다.

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