Set 이용해서 Array 의 중복 삭제하기, Set 이용해서 중복 없는 배열 만들기

array를 만들다보면  array  내부의 element들이 중복되는 경우가 있다.

 

만약 array 내에서 중복되는 값을 제외한 겹치지 않는 element들만 알고 싶거나,

중복되지 않는 고유한 element의 개수를 알고 싶다면, 이 중복 element 를 어떻게 처리해야 하나 멈칫 할 것이다.

 

그때는 Set를 이용하면 쉽게 배열의 중복값을 제거할 수 있으며

 고유한 element 의 갯수를 알수 있다.

 

우선 Set이 어떤 것인지부터 알아보자.

const ordersSet = new Set([
  'Pasta',
  'Pizza',
  'Pizza',
  'Risotto',
  'Pasta',
  'Pizza',
]);

위와 같이 ordersSet라는 Set가 있다고 하자. 이 세트에는 Pizza와 Pasta라는 중복되는  요소가 존재한다.

console.log(ordersSet);

해당 Set를 출력하면

중복값을 삭제한 고유한 요소들만 출력한다.

 

 

만약 문자열로 구성된 Set를 출력한다면,

console.log(new Set('Nomad'));​

문자열 하나하나를 요소로 삼아 Set가 생성된다.

Set 에는  Array의 length와 비슷한 메소드가 있다.

바로 size이다.

console.log(ordersSet.size);

해당 Set에 size라는 메소드를 적용하면 중복되지 않는 고유한 값의 개수 3이 나온다.

중복값 까지 모두 element로 처리해서 중복되는 원소까지 제외하지 않고 출력하는 length와는 미묘한 차이가 있다.

 

또한 특정 element가 해당 Set에 있는지 확인하기 위한 메소드로 has 가 있다. 

 

console.log(ordersSet.has('Pizza')); //array의 include와 비슷
console.log(ordersSet.has('Bread'));

Pizza같이 세트에 존재하는 요소를 넣으면  true가 출력되고

Bread 같이 존재하지 않는 요소를 넣으면 false가 출력된다.

 

배열의 include와 비슷한 기능이다.

 

또한 add/delete 메소드를 통해서 세트에 요소를 추가 삭제도 가능하다.

add와 delete 를 사용한 예시를 보자.

ordersSet.add('Garlic Bread');
ordersSet.add('Garlic Bread');
ordersSet.delete('Risotto')
//ordersSet.clear();// 모든 element 삭제하는 메소드

console.log(ordersSet); //Garlic Bread  두개가 추가됐지만 갈릭브레드 하나만 추가됨. 리조토 삭제됨.
console.log(ordersSet[0]); // udefined 출력된 이유 : Set에는 인덱스가 없다.

위의 코드에서 add를 통해  Galic Bread를 두번 추가했지만 결국 출력되는 갈릭브레드는 딱 1개 밖에 없다.

같은 값의 요소를 계속 추가해봤자 늘어나지 않는 것이다.

또한 delete메소드를 이용해 삭제한 Risotto는 삭제되어 보이지 않는다.

모든 요소를 한번에 삭제하고 싶다면 clear 메소드를 써도 된다.

 

Set에 add 를 통해서 같은 값의 요소를 추가해도 하나의 고유한 값만 추가되는 이유는 무엇일까?

Set는 가지고 있는 모든 값을 유니크한 value로 인식하기 떄문이다. 따라서 Set에는 중복된 value를 구분하기 위한 index역시 없다. Set의 모든 요소는 고유한 value이므로 인덱스가 필요 없기 때문이다.

 

orderSet[0]이라는 인덱스를 출력해봤자 undefined만 출력되는 이유다. 그 이유로 Set는 요소가 있는지 확인하는 메소드 has, 추가 삭제하는 메소드 add delete 밖에 없다.

 

그래서 외부에서 set의 value도 가져오지 못한다. set에는 인덱스가 없기 때문이다. 외부에서 value를 가져오고 싶을떄는 인덱스를 이용하는 array를 사용해야 한다.

 

 

하지만 Set의 요소는  iterable하다.

for문 안에서 Set를 돌리면 각각의 요소가 잘 출력되긴한다.

 

for(const order of ordersSet) console.log(order);

출력결과

Set의 한계로 인해 실제 사용 범위가 줄어들지도 모른다 생각하겠지만,

Set는 Array와 함께 사용할때 훌륭한 시너지를 낸다.

 

Set를 활용해  Array의 중복제거를 할수도 있으며, Array에서 중복된 값을 제외한 고유한 요소의 개수도 알수 있다.

const staff = ['Waiter','Chef','Waiter','Manager','Chef','Waiter'];
const staffUnique = [...new Set(staff)]; //set 을 이용해서 중복이 삭제된 새로운 array생성.
console.log(staffUnique);

스태프의 역할을 표기한 staff라는 배열에서 중복되는 역할이 삭제된 값만 알고 싶다면,

배열을 생성하는 괄호안에 스프레드 연산자인 ...를 쓴다음, 기존 staff 배열의 값을 담은 새로운 Set를 생성하면 된다.

출력하면 중복된 값이 제외된 고유한 값 3개만 배열로 생성된 걸 알 수 있다.

 

배열에서 중복된 값을 제외한 고유한 요소의 갯수를 알수도 있다.

//배열에서 중복된 값을 제외한 고유한 엘레멘트의 개수만 알고싶을때
console.log(new Set(['Waiter','Chef','Waiter','Manager','Chef','Waiter']).size);

Set의 size 메소드만 사용하면 된다.

출력시 중복되지 않는 요소의 갯수인 3이 출력된다.

 

굳이 배열 뿐만아니라, 문자열의 중복되지 않는 글자 개수를 알고 싶을때도 Set를 쓰면 된다.

//문자 열에서 중복되지 않은 고유한 문자의 개수 알고싶을때.
console.log(new Set('nomadhavensheaven').size);

 

nomadhavensheaven 이라는 문자열에서 중복된 알파벳이 제거된 고유한 문자열의 갯수 9가 출력된다.