[JavaScript] Set 개념에 대해 알아보기 !

 

최근에 알고리즘 문제를 풀다가 다른 사람 풀이를 봤는데 Set을 이용해서 문제를 쉽게 풀었길래 이참에 Set 개념에 대해서 공부를 해보고자 정리해 보려고 포스팅하게 되었습니다.

 

공부는 mdn 사이트를 참조해서 공부했습니다. 

 

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

Set 

JavaScript 에서 Set은 Array와 비슷하게 데이터를 모아서 볼 수 있는 역할을 합니다. 

하지만 다른 점은 Set은 Array와 다르게 중복된 값이 들어갈 수 없습니다. 

 

Example 

let a = [];
a.push(1);
a.push(2);
a.push(1);

let b = new Set();
b.add(1);
b.add(2);
b.add(1);

console.log(a); // 1 2 1
console.log(b); // 1 2

Set을 사용하면 위 예시대로 중복된 값이 들어가지 않습니다. 

보통 배열에서 중복된 데이터를 넣고 싶지 않을 때는 includes()라는 메서드를 사용해서  true , false라는

값을 가지고 판단을 했었는데 , Set이라는 데이터 구조를 사용하면 훨씬 편리하게 중복된 값을 배제할 수 있습니다.

 

Set 생성 및 데이터 추가 

Set은 new 키워드를 생성해서 인스턴스를 생성해서 사용합니다.

Set에서 데이터를 추가할 때는 add()라는 메서드를 사용합니다. 

let b = new Set();
b.add(1);
b.add(2);

 

주의할 점으로는 Set은 undefined , NaN 도 값으로 넣을 수 있는데 원래 NaN!== NaN이지만 Set에서는 

같다고 판단하고 하나밖에 넣을 수 없습니다.

 

let b = new Set();
b.add(NaN);
b.add(NaN);
console.log(b); // Set(1) { NaN }

 

Set 에 값이 있는지 확인 하기 

이건 보통 반복문을 돌면서 값 하나하나 비교해서 찾을 수도 있지만 , Set에는 바로 확인할 수 있는 메서드가 있습니다.

음... 배열에 includes() 메서드랑 비슷하다고 볼 수 있겠네요.

let b = new Set();
b.add(1);
b.add(2);
console.log(b.has(2)); //true
console.log(b.has(3)); // false

 

Set은 아예 중복된 값이 없는 건 아니다! 

let b = new Set();
let arr = [1, 2];
let a = {
  name: 'data',
};
b.add(a);
b.add({ name: 'data' });
b.add(arr);
b.add([1, 2]);
console.log(b); Set(4) { { name: 'data' }, { name: 'data' }, [ 1, 2 ], [ 1, 2 ] }

결괏값을 보면 알겠지만 { name : 'data'}라는 데이터가 2개 , [1,2]라는 배열 데이터가 2개 들어 있네요. 

Set은 중복된 값이 안 들어간다 했는데 어떻게 들어갈 수 있는 걸 까요? 

그 이유는 각자 참조하는 참조 값이 다르기 때문입니다.  

그러면 쉽게 보면 원시 값은 값 중복이 불가능하고 , 참조값들은 값 중복이 될 수도 있다라고 보는 게 편하겠네요.

 

Set 길이 확인하는 법 

let b = new Set();
b.add(1);
b.add(2);
b.add(3);
console.log(b.size); 3

Set에서는 길이를 확인할 때 length 대신 size를 사용합니다. 

 

Set 값 제거하기 

let b = new Set();
b.add(1);
b.add(2);
b.add(3);
b.delete(3);
console.log(b); // Set(2) { 1, 2 }

remove , pop 이런 거를 사용하는 게 아니라 Set에서는 delete라는 메서드가 있습니다. 

이 메서드 안에 삭제하고 싶은 값을 넣으면 값이 삭제됩니다. 

 

Set을 배열 객체로 바꾸기

(1) 번 방법 

let b = new Set();
b.add(1);
b.add(2);
b.add(3);
b.add({ name: 'Set!!' });

let a = Array.from(b);
console.log(a);

(2) 번 방법 

let b = new Set();
b.add(1);
b.add(2);
b.add(3);
b.add({ name: 'Set!!' });

let a = [...b];
console.log(a);

Array.from () 메서드는 새 배열 인스턴스로 만들어 준다.

-> Set , Map , String 등 여러 가지 자료형을 Array 형으로 바꾸어 준다. 

둘 다 결과는 배열로 바뀌어 있다. 

두 방법 중 자신에게 편한 방법으로 바꾸어 사용하면 될 거 같다!