37장: Set과 Map

Set

• 중복되지 않는 유일한값 들의 집합

• 교집합, 합집합, 차집함, 여집합 등을 구현할 수 있다.

• add 메서드를 연속적 체이닝 가능

• 배열과 차이

  • 요소순서에 의미가 없다

  • 인덱스로 접근 불가

기본

const set1 = new Set([1, 2, 3, 3]);
console.log(set1); // Set(3) {1, 2, 3}
console.log(set.size); // 3

const set2 = new Set('hello');
console.log(set2); // Set(4) {"h", "e", "l", "o"}

// 값 추가 할당 
const set = new Set();
set.add(1).add(2);
console.log(set);

// 타입 상관 없이 넣기 가능 
set
  .add(1)
  .add('a')
  .add(true)
  .add(undefined)
  .add(null)
  .add({})
  .add([]);


// 값 확인 
console.log(set.has(1)); // true
set.delete('a');
// 존재하지 않는 요소 0을 삭제하면 에러없이 무시된다.
set.delete(0);

// 비우기 
set.clear();

// Set을 사용한 배열의 중복 요소 제거
const uniq = array => [...new Set(array)];
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]

// 사이즈 프린트
const { size } = new Set([1, 2, 3, 3]);
console.log(size); // 3

순회 방법

• 1, 2번째 인수가 동일한데도 사용하는 이유?

  • Array.Prototype.forEach 메서드와 인터페이스를 통일하기위함이며 다른의미는 없다.

• Set 객체는 이터러블이다

  • for...of문으로 순회할수있으며, 스프레드문법과 배열디스트럭처링의 대상이 될 수 도있다.

// Set 객체는 Set.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다
// v1: 현재 순회중인 요소값
// v2: 현재 순회중인 요소값 
// set: 현재 순회중인 Set 객체 자체
set.forEach((v1, v2, set) => console.log(v1, v2, set));

console.log(Symbol.iterator in set); // true

// 이터러블인 Set 객체는 for...of 문으로 순회할 수 있다.
for (const value of set) {
  console.log(value); // 1 2 3
}

// 이터러블인 Set 객체는 스프레드 문법의 대상이 될 수 있다.
console.log([...set]); // [1, 2, 3]

// 이터러블인 Set 객체는 배열 디스트럭처링 할당의 대상이 될 수 있다.
const [a, ...rest] = [...set];
console.log(a, rest); // 1, [2, 3]

Symbol

• 내장 심볼의 가장 대표적인 예시가 바로 Symbol.iterator이다. JavaScript 엔진은 이 심볼을 키로 갖는 메소드가 정의된 객체를 iterable 객체로 인식한다. iterable 객체로 인식되는 객체들만 for ... of 문법 등을 이용한 반복이 가능하다. Symbol.iterator를 키로 갖는 메소드를 정의해둔 내장 iterable 객체들의 예시로는 다음과 같은 것들이 있다. (원문)

Array.prototype[Symbol.iterator];
String.prototype[Symbol.iterator];
Map.prototype[Symbol.iterator];
Set.prototype[Symbol.iterator];
arguments[Symbol.iterator];
NodeList.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator];

intersection, union, difference

set 객체는 수학적집을 구현하기 위한 자료구조다. 따라서set 객체를통해 교집합, 합집합, 차집합 등을 구현할 수 있다.

// 예제 1 - intersection
Set.prototype.intersection = function (set) {
  const result = new Set();

  for (const value of set) {
    // 2개의 set의 요소가 공통되는 요소이면 교집합의 대상이다.
    if (this.has(value)) result.add(value);
  }

  return result;
};

// 예제 2 - intersection
Set.prototype.intersection = function (set) {
  return new Set([...this].filter(v => set.has(v)));
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

console.log(setA.intersection(setB)); // Set(2) {2, 4}
console.log(setB.intersection(setA)); // Set(2) {2, 4}
// -------------------------------------------------------
// 예제 1 - union
Set.prototype.union = function (set) {
  const result = new Set(this);

  for (const value of set) {
    result.add(value);
  }

  return result;
};

// 예제 2 - union
Set.prototype.union = function (set) {
  return new Set([...this, ...set]);
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

console.log(setA.union(setB)); // Set(4) {1, 2, 3, 4}
console.log(setB.union(setA)); // Set(4) {2, 4, 1, 3}
// -------------------------------------------------------
// 예제 1 - difference
Set.prototype.difference = function (set) {
  // this(Set 객체)를 복사
  const result = new Set(this);

  for (const value of set) {
    // 차집합은 어느 한쪽 집합에는 존재하지만 다른 한쪽 집합에는 존재하지 않는 요소로 구성된 집합이다.
    result.delete(value);
  }

  return result;
};

// 예제 2 - difference
Set.prototype.difference = function (set) {
  return new Set([...this].filter(v => !set.has(v)));
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

console.log(setA.difference(setB)); // Set(2) {1, 3}
console.log(setB.difference(setA)); // Set(0) {}

// -------------------------------------------------------
// 예제 1 - isSuperset (상위 집합인지 확인)
Set.prototype.isSuperset = function (subset) {
  for (const value of subset) {
    // superset의 모든 요소가 subset의 모든 요소를 포함하는지 확인
    if (!this.has(value)) return false;
  }

  return true;
};

// 예제 2 - isSuperset
Set.prototype.isSuperset = function (subset) {
  const supersetArr = [...this];
  return [...subset].every(v => supersetArr.includes(v));
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

console.log(setA.isSuperset(setB)); // true
console.log(setB.isSuperset(setA)); // false

Map

• 키와 값의 쌍으로 이루어진 컬렉션

• 키는 중복되지 않는다

• Map 생성자함수는 이터러블을 인수로 전달받아 Map객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의쌍으로 이루어진 요소로 구성되어야 한다.

• Map객체는 키타입에 제한이 없다. 객체도 가능.

• foreach

  • 인수: 요소값 / 키값 / 맵객체

기본

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"}

const map2 = new Map([1, 2]); // TypeError: Iterator value 1 is not an entry object
// -------------------------------------------------------
const map = new Map();
map
  .set('key1', 'value1')
  .set('key2', 'value2');
// -------------------------------------------------------
const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

// 객체도 키로 사용할 수 있다.
map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map); // Map(2) { {name: "Lee"} => "developer", {name: "Kim"} => "designer" }
console.log(map.has(lee)); // true
console.log(map.get(lee)); // developer
// -------------------------------------------------------
map.forEach((v, k, map) => console.log(v, k, map));
/*
developer {name: "Lee"} Map(2) {
  {name: "Lee"} => "developer",
  {name: "Kim"} => "designer"
}
designer {name: "Kim"} Map(2) {
  {name: "Lee"} => "developer",
  {name: "Kim"} => "designer"
}
*/
// -------------------------------------------------------
map.delete(kim);
// -------------------------------------------------------
// Map 객체는 Map.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in map); // true

// 이터러블인 Map 객체는 for...of 문으로 순회할 수 있고,
// 스프레드 문법의 대상이 될 수 있으며,
// 배열 디스트럭처링 할당의 대상이 될 수 있다.
for (const entry of map) {
  console.log(entry); // [{name: "Lee"}, "developer"]  [{name: "Kim"}, "designer"]
}
console.log([...map]);// [[{name: "Lee"}, "developer"], [{name: "Kim"}, "designer"]]
const [a, b] = map;
console.log(a, b); // [{name: "Lee"}, "developer"]  [{name: "Kim"}, "designer"]

// Map.prototype.keys는 Map 객체에서 요소키를 값으로 갖는 이터레이터를 반환한다.
for (const key of map.keys()) {
  console.log(key); // {name: "Lee"} {name: "Kim"}
}
// -------------------------------------------------------
// Map.prototype.keys는 Map 객체에서 요소키를 값으로 갖는 이터레이터를 반환한다.
for (const key of map.keys()) {
  console.log(key); // {name: "Lee"} {name: "Kim"}
}

// Map.prototype.values는 Map 객체에서 요소값을 값으로 갖는 이터레이터를 반환한다.
for (const value of map.values()) {
  console.log(value); // developer designer
}

// Map.prototype.entries는 Map 객체에서 요소키와 요소값을 값으로 갖는 이터레이터를 반환한다.
for (const entry of map.entries()) {
  console.log(entry); // [{name: "Lee"}, "developer"]  [{name: "Kim"}, "designer"]
}