[Javascript] Set에 대하여

안녕하세요. 남산돈가스입니다.

오늘은 Javascript Set에 대하여 알아보겠습니다.

 

Set 객체는 Javascript ES6부터 제공 된 객체이며 그 이전까지는 set을 구현하고 있지 않았습니다.

대표적으로 Java에서의 Set을 알고계신다면, 같은 개념으로 이해하시면 될 것 같습니다.

Set은 데이터 타입 중 하나로 중복되는 값을 가지지 않는 값들의 리스트입니다. 지금 언급한 내용이 Set의 가장 핵심적인 특징입니다.

추가적으로 리스트라고 한다면 배열을 떠올릴 수 있는데, 배열과는 달리 순서가 존재하지 않는다는 특징 또한 있습니다.

Set이 가지고 있는 이러한 특성들과 Javascript의 편리한 특징들을 잘 활용하면 효율적인 코드를 작성할 수 있습니다. 

대표적인 예로 여러 개의 배열을 합쳐 중복을 제거한 이터러블한 데이터셋을 추려내는 용도에서 가장 효율적인 코드로 원하시는 결과를 얻을 수 있습니다.

그럼 이제 Set의 사용법에 대해서 알아보겠습니다.

const a = new Set();
console.log(a);
// Set(0) {}

const b = new Set(["1", 1, 2, 1, "1", 3, "4"])
console.log(b);
// Set(5) { '1', 1, 2, 3, '4' }

위와 같이 생성자를 이용하여 set 객체를 생성할 수 있으며, 추가적으로 초기값으로 iterable한 데이터를 input으로 입력받으면 set 형태로 변환 된 값이 저장됩니다. 변수 b에 할당 된 set 객체는 array를 입력받아 초기화하였는데 여기서 생성 된 결과 값이 아래와 로그와 같이 Set(5) { '1', 1, 2, 3, '4' } 가 출력되었습니다. 맨 처음 설명드렸듯이 중복이 제거 된 데이터가 반환되었는데 여기서 제가 미처 설명드리지 못했던 것 중에 "1"과 1이 분리되어 저장된 것 처럼 Set은 데이터 타입을 구분하여 저장할 수 있다는 특징입니다.

const c = new Set([1,2]);
// => Set(2) { 1, 2 }

c.add(3);
// => Set(3) { 1, 2, 3 }
c.add(2);
// => Set(3) { 1, 2, 3 } 
c.delete(3);
// => Set(2) { 1, 2 }
console.log(c.has(3))
// => false
console.log(c.has(2))
// => true
c.clear();
// => Set(0) {}

위 코드는 Set의 기능들을 알아보았습니다. 기본적으로 add, delete, has로 set에 있는 데이터를 관리할 수 있습니다.

add의 경우 중복 된 값을 넣었을 경우엔 같은 기존 값과 동일한 결과를 확인할 수 있으며, has(value) 메서드로 set 내부에 입력 된 값이 있는 지 여부를 알 수 있어 유용하게 데이터를 처리하실 수 있습니다.

맨 처음 언급했듯이 배열들 간의 중복값만을 추려내는 기능이나 특정 배열에서 다른 배열의 요소들에서 중복 된 요소를 제거하는(차집합 개념) 같은 기능들을 구현할 경우 기존 방식들보다 더욱 간결하게 코드를 작성할 수 있습니다.

// 교집합
const x = new Set([ 3, 6, 7, 9]);
const y = new Set([ 1, 3, 5, 7, 9 ])
const result = [];

x.forEach(n => {
    if(y.has(n)){
        result.push(n);
    }
})

// result => [ 3, 7, 9 ]


// 차집합 x - y
const x = new Set([ 3, 6, 7, 9]);
const y = new Set([ 1, 3, 5, 7, 9 ])
const result = []

x.forEach(n=> {
    if(y.has(n)){
        x.delete(n);
    }
})
result = [...x];
// result => [ 6 ]

위와 같이 간단하게 교집합, 차집합을 구현할 수 있으며, 추가적으로 Set을 Array로 변환하는 방법은 spread operator를 이용하여 [...set] 으로 표현하거나 Array.from 함수를 이용하여 쉽게 변환하실 수 있습니다.

const a = new Set([2, 4, 6, 8]);
// => Set(4) { 2, 4, 6, 8 }
const aArr = [...a];
// => [ 2, 4, 6, 8 ]

const b = new Set([1,3,5,7,9]);
// => Set(5) { 1, 3, 5, 7, 9 }
const bArr = Array.from(b);
// => [ 1, 3, 5, 7, 9 ]

 

이렇게 Javascript에서 제공하는 자료형 Set에 대해서 알아보았습니다. 감사합니다.