Javascript - Set()

B__m·2024년 3월 5일

목록 보기

1/1

Set?

순서가 없는 중복되지 않은 데이터의 집합입니다.

Set은 배열과 차이점을 이해하는 것이 중요합니다.

배열은 데이터를 순서있게 저장합니다. 그래서 인덱스를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능합니다. 그리고 배열에는 동일한 값을 여러 번 저장할 수 있습니다. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복에 문제가 되지 않습니다.

반면 Set은 얼핏 보기엔 배열과 비슷해 보일 수 있지만 사실 결이 아주 다른 자료구조입니다.
우선 Set은 데이터를 순서 없이 저장합니다. 따라서 배열처럼 인덱스를 통해서 접근할 수가 없습니다.

그리고 Set은 중복된 데이터를 허용하지 않습니다. 즉, 기존에 세트에 있는 값을 또 추가하면 아무 효력이 발생하지 않습니다.

정리해보자면

순서가 없고 중복되지 않은 데이터들의 집합이다.
집합 개념에서 파생된 자료구조로, 각 요소가 고유해야 한다는 특징이 있다.

자바스크립트에서 Set() 사용하기

1. 세트 생성

자바스크립트에서 Set은 클래스이기 때문에, new 키워드와 생성자를 활용해 인스턴스를 생성할 수 있습니다.

const mySet = new Set(); // Set(0) {}

2. 값 추가

.add() 메서드를 사용하여 Set에 새로운 요소를 추가합니다.
Set은 중복된 값을 저장하지 않으므로, 이미 존재하는 값을 추가하려고 하면 그 값은 무시됩니다.

mySet.add(1);
mySet.add(5);
mySet.add('text');

console.log(mySet) // Set(3) {1, 5, 'text'}

3. 값 삭제

.delete 메서드를 사용하여 특정 값을 삭제합니다.
해당 값이 Set내에 존재하면 삭제 후 true를 반환하고, 존재하지 않으면 false를 반환합니다.

mySet.delete(5);

4. 존재 여부 확인

세트에 특정 값이 존재하는지 확인하려면 has() 메서드를 사용합니다. 보통 if 조건문이나 3항 연산자(ternary operator)와 많이 사용됩니다.

console.log(mySet.has(1)); // true
console.log(mySet.has(3)); // false

5. Set 갯수 확인

.size 속성을 사용하여 Set 내 요소의 개수(크기)를 확인합니다.

console.log(mySet.size); // 2

6. 세트의 요소 순회

for...of 루프를 사용하여 Set의 모든 요소를 순회합니다.

for (let item of mySet) {
  console.log(item)
}

7. forEach 사용하기

Set은 .forEach() 메서드도 지원합니다. 이 메서드를 사용하여 Set의 모든 요소를 순회할 수 있습니다. 콜백 함수는 각 요소에 대해 실행됩니다.

mySet.forEach((value) => {
  console.log(value)
}

8. 배열을 세트로 변환

실제로 코딩을 하다보면 기존에 존재하는 배열로 부터 새로운 세트를 만들어야 하는 경우가 빈번한데, 이 때는 Set() 생성자의 인자로 해당 배열이 할당된 변수를 넘기면 됩니다.

const array = [1, 2, 2, 3, 3, 3];
const mySet = new Set(array); // Set(3) {1, 2, 3}

9. 세트를 배열로 변환

반대로 세트를 배열로 변환할 수도 있습니다.
가장 쉬운 방법은 대괄호 안에서 세트를 상대로 전개(spread) 연산자를 사용하는 것입니다.

const array = [...mySet]; // [1, 2, 3]

전개 연산자를 별로 안 좋아하신다면 Array.from() 함수를 사용하는 방법도 있습니다.

const array = Array.from(set); // [1, 2, 3]

10. 배열에서 중복 값 제거

세트는 중복 값을 허용하지 않기 때문에, 배열이나 문자열에서 중복된 값을 제거하는 데에 매우 유용하게 활용될 수 있습니다.

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Set의 단점:

순서 없음, Set 내의 요소들은 순서를 갖지 않습니다.
요소를 삭제하려면 해당 요소를 찾아야 하기 때문에 성능이 약간 저하될 수 있습니다.
메모리 사용량, 일부 구현에서 Set은 리스트나 배열에 비해 더 많은 메모리를 사용할 수 있습니다. 내부적으로 해시 테이블을 사용하기 때문!

결론 ...

데이터의 유일성을 보장해야 하고, 순서가 중요하지 않으며, 빠른 검색과 집합 연산이 필요한 경우에 Set을 사용하는 것이 좋습니다.

B__m