[Deep Dive] - Set 객체

날짜	내용	이름
2024.02.02	초판 발행	위르겐

 

들어가기 전
코딩테스트를 위한 알고리즘 공부를 하면서 단순 배열을 이용했을 때는 시간초과로 테스트케이스에 통과 못했지만
다른 분들의 코드를 참고하여 set, map 객체를 썼을 때 통과되는 경험을 한 후 딥다이브로 공부한 부분을 요약하려고 한다.

 

 

Set 객체란?

1. Set 객체의 생성
2. 요소 개수 확인
3. 요소 추가
4. 요소 존재 여부 확인
5. 요소 삭제
6. 요소 일괄 삭제
7. 요소 순회

 

Set 객체란?

Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 아래와 같은 차이가 있다.

 

구분	배열	Set 객체
동일한 값을 중복하여 포함할 수 있다.	O	X
요소 순서에 의미가 있다.	O	X
인덱스로 요소에 접근할 수 있다.	O	X

 

 

 

 

1. Set 객체의 생성

 

Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다.

const set = new Set ();
console.log(set)
// output: Set(0) {}

 

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

 

여기서 이터러블이란? 

반복할 수 있는 자료구조를 의미한다.

 

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

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

const uniq = array => [...new Set(array)];
console.log(uniq([2, 1, 2, 3, 4, 3, 4]));
// output: [2, 1, 3, 4]

 

2. Set 객체의 요소 개수 확인

Set 객체의 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용한다.

 

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

 

여기서 주의할 점은 size 프로퍼티에 임의로 숫자를 할당할 수 없다.

 

const set = new Set([1, 2, 3]);
set.size = 10; // 무시된다.

 

3. Set 객체의 요소 추가

add 메서드를 사용한다.

const set = new Set();
console.log(set);
//output: Set(0) {}

set.add(1);
console.log(set); 
//output: Set(1) {1}

 

 

Set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장할 수 있다.

 

const set = new Set();

set
.add(1)
.add('a')
.add(true)
.add(undefined)
.add(null)
.add({})
.add([])
.add(() => {});

console.log(set);
// output: Set(8) {1, "a", true, undefined, null, {}, [], () => {}}

 

4. Set 객체의 요소 존재 여부 확인

has 메서드를 사용한다. has메서드는 불리언 값을 반환한다.

 

const set = new Set([1, 2, 3]);

console.log(set.has(2)); 
// true
console.log(set.has(4));
// false

 

5. Set 객체의 요소 삭제

delete메서드를 사용한다. delete 메서드는 불리언 값을 반환한다.

 

여기서 주의할 점

delete 메서드는 인덱스가 아니라 요소값을 인수로 전달해야 한다. 배열과 같이 인덱스를 갖지 않기 때문이다.

 

const set = new Set([1, 2, 3]);

// 인덱스가 2인 요소를 지우는게 아니라
// 지우고자 하는 요소 자체를 값으로 넘긴다.
set.delete(2);
console.log(set);
// output = Set(2) {1, 3}

 

6. Set 객체의 요소 일괄 삭제 

Set 객체의 모든 요소를 일괄 삭제하려면 clear 메서드를 사용한다.
clear 메서드는 언제나 undefined를 반환한다.

const set = new Set([1, 2, 3]);

set.clear();
console.log(set);
// Set(0) {}

 

7. Set 객체의 요소 순회

Set 객체의 요소를 순회하려면 일반 배열처럼 forEach메서드를 사용할 수 있다.

 

const set = new Set([1, 2, 3]);

set.forEach((v, v2, set) => console.log(v, v2, set);

//ouput:
// 1 1 Set(3) {1, 2, 3}
// 2 2 Set(3) {1, 2, 3}
// 3 3 Set(3) {1, 2, 3}

 

 

하지만 여기서 이상한 점이 눈에 띈다.

 

분명 array를 forEach메서드로 순회할 때는
첫 번째 인자인 v는 해당 index의 value값이고

두 번째 인자인 v2는 해당 index를 나타내야 하는데

set.forEach의 첫 번째 인자와 두 번째 인자가 같은 값을 출력하고 있다.

 

위에서 설명한 것처럼 Set 객체는 index가 없다.

따라서 index를 출력하지 않고 첫 번째 인자인 value값을 그대로 똑같이 출력한다.

다시 말해, v와 v2는 같다.

 

 

Set객체는 이터러블이다. 따라서 for ... of 문으로 순회할 수 있고 스프레드 문법 및 배열 구조분해할당도 가능하다.

 

이렇게 Set객체를 알아보게 되었는데 

중복되는 값을 제거하여 순회할 수 있다는 장점이 있고 

has 메서드를 사용하면 기존 배열의 메서드를 사용했을 때보다 

시간복잡도가 낮아 시간적으로 효율이 뛰어나다는 장점이 있다.

 

다음은 Map 객체를 알아보자!