JS - 중복체크

안녕하세요. 어제보다 오늘 더 앞으로 원스텝퍼더입니다.

 

원래 spring boot + React를 하려고 했지만 그 전에 일을 하다 Array in JS 의 중복체크 로직을 for 문으로만 생각하다 '다른 방식은 없을까?' 해서 찾아본 Set 객체에 대해 공부하고 적어보려고 합니다.

 

일단 중복체크의 코드는 이렇게 적었습니다.

var array1 = [ 1, 2, 3, 4 ,5 ,6 ,7, 1] ; 
var set1 = new Set(array1);

if ( array1.length != set1.size ) {
   console.log("중복!");
   return ;
} else {
   //로직
}

코드를 보시면 간단하게 중복체크를 하는데요. 보시면 array를 가지고 새로운 Set 객체를 선언합니다.

이렇게 선언하게 되면 Set 객체의 특징인 Set내의 값은 한번만 사용가능하다는 것이기 때문에 자동으로 중복된 값은

Set 내의 값으로 존재하지 않게 됩니다.

 

제게 필요한 로직은 저 위에 작성할 만한 코드가 전부였습니다. array의 중복을 회피한 Set 객체의 선언으로 손쉽게 중복을 체크할 수 있다. 일을 위해서는 필요한 것만 취하고 말았지만 제대로 알고 간다면 나중에 Set 객체를 더 잘 쓸 수 있을 것 같아서 조금만 더 공부해봤습니다.

 

Set의 특징

- 특징으로는 NaN의 자료형은 NaN끼리 비교를 해도 같지 않지만 ( NaN != NaN ) , Set 객체 안에서는 같음으로 인지 한다는 것

- +0 === -0 이 다른 JS 문법과는 다르게 Set 안에서만 다르게 인식된다는 점

 

아래는 활용방법들입니다.

var myset = [ 0 ,1 ,2 ,3 ,4 ];
myset.add(5); //자료형 상관없이 중복된 값만아니면 add를 통해 추가할 수 있다.
myset.has(0); //자료형 상관없이 Set 안에 들어간 값이 있으면 true, 없으면 false를 반환한다.
myset.delete(3); //마찬가지로 Set 안에 들어간 값을 제거한다.
myset.size; //  0,1,2,4,5 총 5의 값을 나타낸다.

for (let item of mySet.keys()) console.log(item) ;// 순서대로 항목을 기록: 0, 1, 2, 4, 5
for (let item of mySet.values()) console.log(item); // 순서대로 항목을 기록: 0, 1, 2, 4, 5
for (let [key, value] of mySet.entries()) console.log(key); // 0, 1, 2, 4, 5
//위의 예제를 통해 Set 객체는 들어간 값을 키이자 벨류로 표시하는 것 같다.

var myArr = Array.from(mySet) //  이전 코드에서 Array => Set 이었다면 이번엔 Set => Array로 변경

// 다음도 HTML 문서에서 실행하는 경우 작동함
mySet.add(document.body);
mySet.has(document.querySelector('body')); // true
//Set 객체에는 다양한 자료형을 넣을 수 있기 때문에 document.body의 객체도 들어간다고 한다.

[...mySet]; // [1, 2, 3, 4] array로 이런식으로 지정도 가능한듯 하다.

// 교집합은 다음으로 흉내(simulate)낼 수 있음
var intersection = new Set([...set1].filter(x => set2.has(x)));
// 차집합은 다음으로 흉내낼 수 있음
var difference = new Set([...set1].filter(x => !set2.has(x)));
// 위 코드는 예제에서 바로 가져온 것인데 간단하게 교집합, 차집합의 구현이다. 이런 코드는 코드를 짤 때 도움이 될 것 같다.

 

 

출처는 mdn web docs 의 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set 를 참조했습니다.