ES6) Map & Set + swapping Map with Object

최근에 Set을 활용할 일이 생겨서 Map와 Set을 이번 기회에 알아보기로 했습니다.

 

Set?

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

The Set object lets you store unique values of any type

python에서는 Set을 종종 활용했는데 그것과 같습니다. Set은 '집합'으로 중학교 때 배웠던 집합 개념을 생각해보시면 됩니다. 사용 방법은 비교적 간단하니 생략하겠습니다.

 

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

 

const nums = [1, 3, 5, 3, 2, 2, 3, 2, 1, 2, 3];
const Setnum = new Set(nums);

// values 와 keys 가 같은 결과값을 냄.
console.log(Setnum.values()); // Set Iterator
console.log(Setnum.keys()); // Set Iterator

const setIter = Setnum.values();

// Set Iterator이기 때문에 next 사용 가능
console.log(setIter.next()); // { value: 1, done: false }
console.log(setIter.next().value); // 3
console.log(setIter.next().value); // 5
console.log(setIter.next().value); // 2

 

 

Set을 이용한 중복값 제거가 자주 사용됩니다.

 

값을 일일히 비교하는 것보다 Set을 사용하는 게 더 빠르겠죠.

또, Array.from 보다는 spreader를 쓰는 것을 추천합니다. (더 가독성이 좋음~)

const numbers = [1, 2, 3, 4, 5, 6, 2, 7, 4];

// Array.from 활용
const uniqueNumbers = Array.from(new Set(numbers));
console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7]

// spreader 활용
const uniqueNubmersInSpread = [...new Set(numbers)];
console.log(uniqueNubmersInSpread);

 

 

Map?

Map은 객체인데 key의 값이 모든 값이 들어갈 수 있는 형태라고 보시면 됩니다. 일반적인 객체는 key의 값으로 심볼과 문자열만 가능했지만 map은 다양한 값을 넣을 수 있습니다. 심지어 객체마저도 key로 들어갈 수 있습니다. 

 

조금 불편한 점은 값을 추가하거나 확인할 때 전용 메서드인 set, get을 이용해야한다는 것입니다.

그러나 size를 곧바로 알 수 있다는 장점이 있습니다.

 

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

const obj = {
  name: "darren",
  job: "entrepreneur",
  age: 25,
};

const map = new Map(); // Map 생성

map.set(obj, 123); // obj가 123을 가리킴
map.set(5, "dada"); // 5가 'dada'를 가리킴

console.log(map.get(5));
console.log(map.has(5));

map.clear(); // clear!

 

• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환합니다.
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환합니다.

console.log(map.keys()); // key값을 iterator로 반환
console.log(map.values()); // value값을 iterator로 반환

const mapValueItr = map.values();

console.log(mapValueItr.next().value);
console.log(mapValueItr.next().value);

 

• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다. 그러니까... 다음과 같이 사용할 수 있겠네요

const entry = map.entries();

for (const iterator of entry) {
  console.log(iterator);
}

 

 

Object => Map / Map => Object

 

• Object => Map

 

Object.entries

const obj = {
  name: "darren",
  job: "entrepreneur",
  age: 25,
};

// [key, value]로 묶음
// 즉, [name, darren], [job, entepreneur] ... 식으로
console.log(Object.entries(obj));

// 해당 entry를 이용해 Map 생성
const map = new Map(Object.entries(obj));
console.log(map);

 

• Map => Object

 

Object.fromEntries

문제는, Map의 키가 객체일 경우 [Object object]로 변환된다는 겁니다. 이는 object보다 map이 더 큰 범위를 다루기 때문에 발생하는 일입니다.

const map = new Map();
map.set(3, 123);
map.set({ name: "darren" }, 553);

const obj = Object.fromEntries(map);
console.log(obj);

 

 

 

참고하면 좋은 글)

 

medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

[JS #5] ES6 Map(), Set()

ko.javascript.info/map-set

맵과 셋