공부공부/JS 딥다이브

[js 딥다이브] 37장 Set과 Map

고생쨩 2024. 2. 18. 09:59
728x90

Set과 Map

Set

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

구분 배열 Set
중복가능 O X
순서에 의미 O X
인덱스로 접근 O X

생성(중복무시)

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

배열 중복제거

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

요소 개수 확인

const set = new Set([1, 2, 3]);
console.log(Object.getOwnPropertyDescriptor(Set.prototype, 'size'));
// {set: undefined, enumerable: false, configurable: true, get: ƒ}
set.size = 10; // size는 getter만 있어서 무시된다.
console.log(set.size); // 3

요소추가

set.add(1);
set.add(1).add(2); //연속호출 가능
set.add(1).add(2).add(2); //중복은 에러없이 무시

===는 NaN과 NaN을 다르다고 평가, Set은 같다고 평가

요소 존재여부 확인

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false

요소삭제

set.delete(2); //만약 존재 안하면 에러없이 무시
//반환값이 불리언이므로 연속호출 불가

요소 일괄 삭제

set.clear();

요소 순회
forEach 혹은 for of 사용

집합 연산
ORM등에서 App join을 구현하기 위해 많이 쓰임.

교집합 : 중복 없는 모든 요소로 구성

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]);
// setA와 setB의 교집합
console.log(setA.intersection(setB)); // Set(2) {2, 4}
// setB와 setA의 교집합
console.log(setB.intersection(setA)); // Set(2) {2, 4}

합집합 : 중복 없는 모든 요소로 구성

Set.prototype.union = function (set) {
 return new Set([...this, ...set]);
};
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);
// setA와 setB의 합집합
console.log(setA.union(setB)); // Set(4) {1, 2, 3, 4}
// setB와 setA의 합집합
console.log(setB.union(setA)); // Set(4) {2, 4, 1, 3}

차집합: 집합 A에는 존재하지만 집합 B에는 존재하지 않는 요소로 구성

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]);
// setA에 대한 setB의 차집합
console.log(setA.difference(setB)); // Set(2) {1, 3}
// setB에 대한 setA의 차집합
console.log(setB.difference(setA)); // Set(0) {}

부분집합과 상위 집합 : 집합 A가 집합 B에 포함되는 경우(A⊆B) 집합 A는 집합 B의 부분 집합이며, 집합 B는 집합 A의 상위 집합이다.

// this가 subset의 상위 집합인지 확인한다.
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]);
// setA가 setB의 상위 집합인지 확인한다.
console.log(setA.isSuperset(setB)); // true
// setB가 setA의 상위 집합인지 확인한다.
console.log(setB.isSuperset(setA)); // false

Map

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

구분 객체 Map
문자열 또는 심벌 객체를 포함한 모든값
이터러블 X O
요소 개수 확인 Object.keys(obj).length map.size

생성

//키와 값으로 이루어진 요소만 가능
//중복은 덮어씀
const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1);

요소 개수 확인

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

요소 추가

map.set('key1', 'value1');
//새 요소가 추가된 map요소를 반환하므로 연속호출가능
//중복은 에러없이 덮어씌움
//set과 마찬가지로 NaN을 서로 같다고 봄
//객체를 key로 사용한 예제
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" 

요소 취득, 존재유무, 삭제, 일괄삭제

map.get(key); //취득
map.has(key); //존재유무
map.delete(key); //삭제
map.clear(); //일괄삭제

요소 순회
forEach나 for of 사용
요소의 순서에 의미는 없지만 다른 이터러블과 호환성을 유지하기 위해 추가된 순서를 따른다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.