본문 바로가기

Javascript/Javascript고급

셋(Set)의 이해

ES6에서 새롭게 도입된 집합 컬렉션(Collection) 기능입니다.

키가 없고 값만 가지는 집합 개념의 데이터 객체로, 값이 집합(셋)에 있는지 여부를 판단할 수 있는 기능을 제공합니다.

키가 없는 맵(Map) 과 유사한 특징을 가지고 있습니다. 정확히는 키와 값이 같은 맵(Map) 이라고 봐도 됩니다.


2개의 셋에 모두 있으면, 교집합, 2개중 1개 이상의 셋에 있으면 합집합이 되는 방식으로 값이 어디에 속해있는지를 판단할 수 있습니다.




셋(Set)의 값 추가/삭제


셋 인스턴스를 생성 후 add(값)으로 셋에 값을 추가할 수 있습니다.

값은 중복될 수 없습니다. 객체의 속성이 중복될 수 없는 것처럼 값 자체가 키이자 값이 됩니다.


셋의 값 삭제는 delete(값) 메서드로 합니다.

삭제에 성공하면 true, 실패하면 false 를 반환합니다.


간단한 예를 들어보겠습니다.


const s1 = new Set();
const s2 = new Set();

s1.add('라이언');
s1.add('어피치');
s1.add('프로도');

s2.add('콘');
s2.add('무지');
s2.add('프로도');

if(s1.has('프로도') && s2.has('프로도')){
  console.log('두 집합에 모두 있음!');
  s2.delete('프로도');
}




셋(Set)의 값 순환


맵의 순환 구문과 동일합니다.

앞서 설명한데로 키와 값이 같은 맵(Map)과 같은 특징이 있기 때문에 , keys() 와 values() 의 결과가 동일합니다.

키와 값을 쌍으로 반환하는 entries() 메서드는 [값, 값] 을 반환합니다.


let arr = ['라이언''프로도''무지'];
let s = new Set(arr);

console.log('길이: '+s.size);

//파라메터로 키-값을 각각 받아 순환
s.forEach(function(valuekey){
  console.log(key+' '+value);
});

//키-값 쌍으로 순환
for(let [key,valueof s.entries()){
  console.log(key+' '+value);
}

//키만 순환
for(let key of s.keys()){
  console.log(key);
}

//값만 순환
for(let value of s.values()){
  console.log(value);
}


예제를 보면 키와 값이 같은 값이 출력되는 것을 알 수 있습니다.

어떤 것을 사용해도 무방하며, 키가 없는 맵이라는 점을 이해하고 사용하면 됩니다.





셋(Set) <-> 배열의 상호 변환


셋은 배열로 변환할 수 있습니다. 반대로 배열을 셋으로도 변경할 수 있습니다.

셋 인스턴스 생성 인자로 배열을 넣으면, 배열 요소들을 값으로 하는 셋이 생성됩니다.

인자로 사용하는 배열은 1차원 배열이어야 합니다.


반대로 셋을 Array.from() 메서드를 사용해 다시 배열로 변환할 수 있습니다.


let arr = ['라이언''프로도''무지'];
let s = new Set(arr);
let newarr = Array.from(s);

s.forEach(function(el){
  console.log(el);
});

console.log(newarr);




셋과 배열을 상호 변환하는 기능과, 중복 요소를 혀용하지 않는 셋의 특징을 활용하면 중복 요소가 있는 배열을 중복 요소가 없는 배열로 다시 생성할 수 있습니다.


아래처럼 중복 요소가 있는 배열을 셋으로 변환하면, 중복 값이 없는 셋으로 변환됩니다.

셋을 다시 배열로 변환하면 중복 요소가 없는 배열이 생성됩닉다.


let arr = ['라이언''프로도''무지''프로도'];
let s = new Set(arr);
let newarr = Array.from(s);

console.log(newarr);




'Javascript > Javascript고급' 카테고리의 다른 글

더 간편한 프로미스(Promise)를 위한 패치(Fetch)  (0) 2020.05.30
프로미스(Promise) 기초  (0) 2020.05.30
셋(Set)의 이해  (0) 2020.05.29
맵(Map)의 이해  (0) 2020.05.29
타이머를 이용한 지연 실행과 반복 실행  (2) 2020.05.29
AJAX 와 JSON  (0) 2020.05.29

닫기