[javascript] Map, Set

mechaniccoder·2020년 11월 8일
0
post-thumbnail

자바스크립트라는 언어를 끝장을 보려합니다. 새로 알게된 자바스크립트 문법 사이트를 알게 됐는데 내용이 매우 알차고 고급 개념에 대해서도 잘 정리되어있는 것 같습니다. 앞으로 이 사이트를 활용해 자바스크립트에 한 걸음 더 다가가려 합니다.

Map

맵은 key가 있는 데이터를 저장합니다. 객체와 매우 유사하죠. 한 가지 차이점이 있다면 바로 key에 객체를 사용할 수 있다는 점이죠.

메서드

  • new Map() : 맵을 생성합니다.
  • map.set(key, value).
  • map.get(key) : 값을 반환합니다. 없으면 undefined
  • map.has(key) : boolean을 반환하겠죠?
  • map.delete(key) : key에 해당 값을 삭제합니다.
  • map.clear() : 맵 안의 모든 요소를 제거합니다.
  • map.size() : 요소의 갯수를 반환합니다.
  • map.keys() : key를 모은 iterable 객체
  • map.values() : value를 모은 iterable 객체
  • map.entries() : [key, value]를 요소로 가지는 iterable 객체

map[key]와 같은 방식을 사용하지 마세요. 일반 객체처럼 취급이 됩니다.

체이닝

map.set을 호출할 때마다 자기 자신을 반환하기 때문에 set 체이닝할 수 있습니다.

map.set(1, 'hello')
	.set(2, 'hi')
	.set(true, 'false');

또한 map.set 메서드는 삽입한 순서를 기억하고 이를 순서대로 순회합니다. 객체와는 다른 부분이죠.

forEach

맵은 forEach도 지원합니다. 마치 배열처럼요.

map.forEach((value, key, map) => {
	console.log(`${key}: ${value}`);
});

맵으로 변환

[key, value]를 요소로 가지는 배열을 맵으로 바꿀수 있습니다.

const map = new Map([
	[1, 'hello'],
	[2, 'hi'],
	[true, 'my name']
]);

객체를 바꿀 때는 Object.entries(obj) 메서드를 활용해 [key, value]를 요소로 가지는 배열로 먼저 바꿔줘야 합니다.

const obj = {
	name: 'seunghwan',
	age: 27
}

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

맵을 객체로!

이때는 Object.fromEntries() 메서드를 활용합니다. 마찬가지로 [key, value]를 요소로 가지는 배열을 활용해야합니다. map.entries() 메서드를 사용해보죠. 반환값으로 [key, value] 요소를 가지는 iterable 객체를 반환합니다.

const map = new Map();
map.set(1, 'hello').set('hi', true).set('value', 'key);

const obj = Object.fromEntries(map.entries());

Set

Set은 중복을 허용하지 않는 자료구조입니다. 중복을 허용하지 않는다는 특징을 살려 다양한 상황에서 활용할 수 있는 자료구조라고 생각합니다.

메서드

  • new Set(iterable) : 보통 이터러블한 객체를 전달받습니다.
  • set.add(value) : value를 추가하고 자기 자신을 반환하기 때문에 체이닝이 가능합니다.
  • set.delete(value) : 값을 제거하고, 제거하면 true 아니면 false를 반환합니다.
  • set.has(value)
  • set.clear()
  • set.size()
  • set.keys()
  • set.values()
  • set.entries()

iterable?

셋을 반복하기 위해서 두 가지 방법을 사용할 수 있습니다.

  1. forEach
  2. for of
set.forEach((value, valueAgain, set) => {});

인수를 보면 value를 반복해서 두 번을 받는데 이는 Map과의 호환성 때문입니다. 맵을 셋으로 셋을 맵으로 쉽게 교체하기 위함이죠.

아래와 같이 entries() 메서드를 활용해 서로 바꿀 수 있습니다.

const set = new Set([1, 2, 3, 4, 5])

const map = new Map(set.entries());

const newSet = new Set(map.entries());
profile
세계 최고 수준을 향해 달려가는 개발자입니다.

0개의 댓글