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 사용
요소의 순서에 의미는 없지만 다른 이터러블과 호환성을 유지하기 위해 추가된 순서를 따른다.
'공부공부 > JS 딥다이브' 카테고리의 다른 글
[js 딥다이브] 39장 DOM (0) | 2024.02.18 |
---|---|
[js 딥다이브] 38장 브라우저의 렌더링 과정 (0) | 2024.02.18 |
[js 딥다이브] 36장 디스트럭처링 할당 (0) | 2024.02.18 |
[js 딥다이브] 35장 스프레드 문법 (0) | 2024.02.15 |
[js 딥다이브] 34장 이터러블 (0) | 2024.02.15 |