JavaScript | Set & Map

Set란?

중복되지 않는 유일한 값들의 집합으로 요소 순서에 의미가 없기 때문에 인덱스로 요소에 접근할 수 없다.

Set 객체의 생성

Set생성자 함수는 이터러블을 인수로 전달받아 Set객체를 생성한다.
이터러블의 중복된 값은 Set객체에 요소로 저장하지 않는다.

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

size 요소 개수 확인

size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티이다.
따라서 요소의 개수를 변경할 수 없다.

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

add 요소 추가

add 메서드는 새로운 요소가 추가된 Set객체를 반환한다.
따라서 add 메서드를 연속적으로 호출할 수 있다.
중복된 요소의 추가는 허용되지 않는다.(에러 발생하지 않고 무시)
Set객체는 NaN과 NaN을 같고, -0과 0도 같다고 판단하여 중복 추가하지 않는다.
객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장할 수 있다.

const set= new Set();

set.add(1).add(2).add(2)
console.log(set) // Set(2) {1,2}

has 요소 존재 여부 확인

요소 값 존재 여부를 불리언 값으로(true, false) 반환한다.

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

delete 요소 삭제

delete 메서드에는 인덱스가 아니라 삭제하려는 요소값을 인수로 전달해야한다.
왜냐하면 Set 객체는 순서에 의미가 없기 때문에 배열과 같은 인덱스가 존재하지 않기 때문이다.
불리언 값으르 반환하기 때문에 연속적인 호출이 불가능하다.

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

clear 요소 일괄 삭제

clear 메서드는 언제나 undefined 반환한다.

const set= new Set([1,2,3]);
set.clear(); //undefined

forEach 요소 순회

첫 번째 인수는 현재 요소 값, 두 번째 인수도 현재 요소 값, 세 번째 인수는 순회하고 있는 Set 객체 자체를 넣어야 한다.
( Array.prototype.forEach 메서드와 통일하기 위해서 첫 번째 인수값과 두 번째 인수 값을 같게 넣을 뿐 의미는 없다 )

const set = new Set([1,2,3]);
set.forEach((v,v2,set)=>console.log(v,v2,set));
/*
1 1 Set(3) {1,2,3}
2 2 Set(3) {1,2,3}
3 3 Set(3) {1,2,3}
*/

그 밖의 요소 순회 방법

for ... of 문

for(const value of set){
	console.log(value); //1 2 3
}

스프레드 문법

console.log([...set]) //[1,2,3]

디스트럭처링 할당 대상

const [a,...rest] =set
console.log(a,rest) // 1, [2,3]

집합 연산 - 교집합

집합 연산 - 합집합

집합 연산 - 차집합

집합 연산 - 부분 집합과 상위 집합

Map란?

Map 객체는 키와 값이 쌍으로 이루어진 컬렉션이다.
일반 객체와의 차이는 키 값으로 문자열&심벌 뿐만 아니라 객체를 포함한 모든 값을 가질 수 있다는 것이다.
이터러블하고 요소 개수 확인할 때 length 대신 size를 사용한다.

Map 객체 생성

Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다.
이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야한다.
중복된 키를 갖는 요소가 존재하면 값이 덮어써진다.

const map1= new Map([[1,2]])

size 요소 개수 확인

size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티이다.
따라서 요소의 개수를 변경할 수 없다.

const map= new Map([[1,2]]);
console.log(map.size) //1

set 요소 추가

set 메서드는 새로운 요소가 추가된 Map 객체를 반환하기 때문에 연속적으로 호출할 수 있다.
중복된 요소의 추가는 허용되지 않고 에러 발생하지 않고 값이 덮어 써진다.
Map 객체는 NaN과 NaN을 같고, -0과 0도 같다고 판단하여 중복 추가하지 않는다.
객체나 배열과 같이 자바스크립트의 모든 값을 키로 저장할 수 있다.

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

has 요소 존재 여부 확인

const jeon ={name:'Jeon'};
const kim ={name:'Kim'};

const map= new Map([[jeon,'frontend'],[kim,'backend']]);

console.log(map.has(jeon)) //true
console.log(map.has('key')) //false

delete 요소 삭제

delete 메서드는 불리언 값으르 반환하기 때문에 연속적인 호출이 불가능하다.
존재하지 않는 키로 삭제 시도해도 에러 없이 무시한다.

map.delete(kim);
console.log(map) //Map(1) {{name:'Jeon'}=>'frontend'}

clear 요소 일괄 삭제

clear 메서드는 언제나 undefined 반환한다.

forEach 요소 순회

첫 번째 인수는 현재 요소 값, 두 번째 인수는 현재 요소 키, 세 번째 인수는 순회하고 있는 Map 객체 자체를 넣어야 한다.

map.forEach((v,k,map)=>console.log(v,k,map));
/*
frontend {name:'Jeon'} Map(2){
{name :'Jeon'}=>'frontend',
{name:'Kim'}=>'backend'
}
backend {name:'Kim'} Map(2){
{name :'Jeon'}=>'frontend',
{name:'Kim'}=>'backend'
}
*/

그 밖의 요소 순회 방법

for ... of 문

for(const entry of map){
	console.log(entry); // [{name:'Jeon'},'frontend][{name:'Kim'},'backend']
}

스프레드 문법

console.log([...map]); // [{name:'Jeon'},'frontend][{name:'Kim'},'backend']

디스트럭처링 할당 대상

const [a,b]=map;
console.log(a,b); // [{name:'Jeon'},'frontend] [{name:'Kim'},'backend']

이터레이터 객체

Map 객체는 이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드를 제공한다.
Map.prototype.keys

for(const key of map.keys()){
	console.log(key); // {name:'Jeon'} {name:'Kim'}
}

Map.prototype.values

for(const value of map.values()){
	console.log(value); // frontend backend
}

Map.prototype.entries

for(const entry of map.entries()){
	console.log(entry); // [{name:'Jeon'},'frontend] [{name:'Kim'},'backend']
}