왜 Set을 사용할까요?

Set은 모든 유형의 고유한 값을 저장할 수 있는 데이터 구조입니다. 배열과 유사하지만 중복 값을 허용하지 않습니다. 모든 종류의 고유 값을 보관하는 좋은 방법입니다. 때때로 배열에 고유한 값을 저장하고 싶지만 값이 이미 존재하는지 확인하기 위해 배열을 반복하고 싶지 않을 수 있습니다. 바로 이때 Set이 유용합니다.

이전 글에서 Javascript Map에 대해 논의했습니다. Set은 Map과 유사하지만 값이 아닌 키만 저장합니다. 모든 유형의 고유한 값을 유지하는 좋은 방법입니다. 너무 많은 경우에 Map을 사용하는 것이 부담스러울 수 있습니다. 그래서 Set에 대해 알아보겠습니다.

JavaScript Set이란 무엇일까요?

Set 객체는 값의 집합입니다. Set의 값은 한 번만 발생할 수 있으며 Set의 집합에서 고유합니다. Set의 요소를 삽입 순서대로 반복할 수 있습니다. 삽입 순서는 add() 메서드가 성공적으로 Set에 각 조각을 삽입한 순서(즉, Set이 add()를 호출할 때 동일한 요소가 이미 Set에 없었음)와 일치합니다.

사양에서는 Set을 "평균적으로 컬렉션의 요소 수에 대한 서브리니어 액세스 시간을 제공하는" 방식으로 구현해야 합니다. 따라서 내부적으로 해시 테이블(O(1) 조회), 검색 트리(O(log(N)) 조회) 또는 복잡도가 O(N)보다 나은 다른 데이터 구조로 표현될 수 있습니다.

Set을 만드는 방법

Set을 만드는 방법은 두 가지가 있습니다. 첫 번째 방법은 Set 생성자를 사용하는 것입니다. 두 번째 방법은 Set 객체 리터럴을 사용하는 것입니다.

Set 생성자

Set 생성자는 새 Set 객체를 만듭니다. 생성자에 반복 가능한 객체를 인수로 전달할 수 있습니다. 반복 가능한 객체의 요소가 새 Set에 추가됩니다.

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

Set 객체 리터럴

Set 객체 리터럴은 새 Set 객체를 만듭니다. 객체 리터럴에 반복 가능한 객체를 인수로 전달할 수 있습니다. 반복 가능한 객체의 요소가 새 Set에 추가됩니다.

const set = {1, 2, 3, 4, 5};

Set 메서드 & 속성

메서드	설명
add()	Set 객체에 지정된 값을 가진 새 요소를 추가합니다.
clear()	Set 객체에서 모든 요소를 제거합니다.
delete()	값과 연결된 요소를 제거하고 Set.prototype.has(value)가 이전에 반환했을 값을 반환합니다. Set.prototype.has(value)는 나중에 false를 반환합니다.
entries()	Set 객체의 각 요소에 대한 [value, value] 배열이 포함된 새 Iterator 객체를 삽입 순서대로 반환합니다.
forEach()	Set 객체의 각 값에 대해 삽입 순서대로 제공된 함수를 한 번씩 실행합니다.
has()	Set 객체에 지정된 값으로 요소가 있는지 여부를 나타내는 부울을 반환합니다.
keys()	Set 객체의 각 요소에 대한 값을 삽입 순서대로 포함하는 새 Iterator 객체를 반환합니다.
values()	Set 객체의 각 요소에 대한 값을 삽입 순서대로 포함하는 새 Iterator 객체를 반환합니다.

속성	설명
size	Set 객체의 값 수를 반환합니다.

Set 예제

Set에 값 추가

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

Set에서 값 삭제

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

Set에 값이 있는지 확인

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

Set 반복

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

Set을 배열로 변환

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

배열을 Set으로 변환

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

Set의 크기 가져오기

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

Set 지우기

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

Set 병합

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

두 Set의 교집합 가져오기

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

두 Set의 차집합 가져오기

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

Set이 다른 Set의 부분집합인지 확인

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

Set이 다른 Set의 상위집합인지 확인

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

두 Set이 서로소인지 확인

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

두 Set이 같은지 확인

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

브라우저 지원

Chrome	Firefox	Edge	Safari	Opera
49+	44+	12+	10.1+	36+

Set vs. Array

Set	Array
고유한 값, 중복 값 허용 안 함	중복 값 허용
Set은 특정 순서가 없는 값의 집합입니다.	Array는 특정 순서로 값이 들어 있는 집합입니다.
Set은 반복 가능합니다.	Array는 반복 가능합니다.
Set은 해시 프로세스를 사용하기 때문에 배열보다 초기화 속도가 느립니다.	Array는 초기화 속도가 빠릅니다.
요소의 존재 여부를 확인할 때 성능이 좋습니다.	요소에 액세스할 때 성능이 좋습니다.

이 글은 원래 blog.imam.dev에 게시되었습니다.

자바스크립트 집합: 초보 개발자가 알아야 할 기본 사항