자바스크립트 set 메소드 를 통해 중복제거 및 배열화 등의 처리를 할 수 있습니다.
자바스크립트 Set 란 , 어떠한 자료형, 객체 등 각 요소를 고유(unique) 하게 저장하는 객체 구조입니다. 따라서 중복제거와 동일한 효과를 줄 수 있습니다.
그리고 set 는 표준 내장 객체로써 중복 요소를 갖지 않으며, 순서나 인덱스 등이 의미가 없는 객체입니다.
기본적으로 내장된 has, size, keys, entries 등의 자바스크립트 set 메소드 를 활용할 수 있습니다.
자바스크립트 Set 의 유일값 특성
자바스크립트 set 는 각 요소가 고유하게 저장됨을 보장합니다.
<script>
const fruits = new Set();
fruits.add( "apple" );
fruits.add( "banana" );
fruits.add( "grape");
console.log( fruits );
console.log( typeof( fruits ));
fruits.add( "apple");
console.log( fruits );
</script>
마지막 추가된 apple은 이미 set 에 추가된 상태이므로 더 들어가지 않습니다.
자바스크립트 Set 메소드 – size, keys(), entries()
Set으로 생성된 객체에서는 다음과 같은 메소드들을 사용할 수 있습니다.
<body>
<script>
const fruits2 = new Set();
fruits2.add("apple");
fruits2.add("banana");
fruits2.add("grape");
console.log(fruits.size);
console.log(fruits.keys());
console.log(fruits.entries());
fruits2.forEach((elem) => {
console.log(elem);
});
</script>
</body>
자바스크립트 Set 메소드 – has(), delete()
또 has 메소드를 사용해서 배열 요소에 해당 요소가 존재하는지 체크할 수 있습니다.
<script>
const fruits2 = new Set();
fruits2.add("apple");
fruits2.add("banana");
fruits2.add("grape");
// 결과값은 True가 나오게 된다
console.log( fruits2.has( "apple") );
</script>
그리고 불필요한 요소는 delete 메소드를 활용하여 지울 수 있습니다.
<script>
const fruits2 = new Set();
fruits2.add("apple");
fruits2.add("banana");
fruits2.add("grape");
//banana 와 일치하는 요소 삭제
fruits2.delete( "banana" );
console.log( fruits2 );
// 결과 : apple, grape 만 출력
</script>
Set를 활용하여 배열 내 중복 제거, 전개 연산자 활용
이와 같은 set의 중복을 허용하지 않는 특징을 활용하면 배열내 중복을 아주 쉽게 없앨 수 있습니다.
아래는 배열의 중복을 없애기 위해 Array.from 과 Set를 이용한 예제입니다.
<script>
// 철수가 2번 중복됨
const students = ["철수", "영희", "수정", "짱구", "철수"];
// Set 생성시 파라메터로 중복된 배열값을 넘겨줌
// Set로 변환시 마지막 중복값 "철수"값 은 제거됨
const setStudent = new Set(students);
console.log(setStudent);
const uniqueStudent = Array.from(setStudent);
console.log(uniqueStudent);
</script>
중복된 마지막 값 “철수”는 제거됩니다.
다음과 같이 한줄로 간략히 나타낼 수 있습니다.
<script>
// 철수가 2번 중복됨
const students = ["철수", "영희", "수정", "짱구", "철수"];
// 한줄로 해당 배열의 중복을 제거함
const us = Array.from(new Set(students));
console.log(us);
</script>
혹은, 다음과 같이 객체나 배열의 변수 앞에 …를 사용한 전개 연산자를 활용하여 배열 구조를 풀어낼 수 있습니다.
<script>
// 철수가 2번 중복됨
const students = ["철수", "영희", "수정", "짱구", "철수"];
// set를 전개 연산자를 통해
console.log([...setStudent] );
</script>
Set 을 활용한 교집합, 차집합
Set의 특성과 has 메소드, 그리고 전개연산자를 활용하면 아래와 같이 교집합, 차집합 로직을 만들 수 있습니다.
set 값을 전개 연산자로 배열로 만든다음, filter 메소드를 통해 비교 대상 set에 has 메소드를 통해 포함 여부를 체크합니다.
<script>
//차집합
const aSet1 = new Set(["영희", "철수", "짱구"]);
const aSet2 = new Set(["영희", "민정", "수정"]);
// 해당 set를 전개 연산자로 배열화 한 뒤, filter 메소드
// 교집합화할 set
const intersect = [...aSet1].filter((elem) => {
return aSet2.has(elem);
});
console.log(intersect);
//결과 : 영희 만 출력됨
// 차집합
const diff = [...aSet1].filter( (elem)=>{
return !aSet2.has( elem );
})
console.log( diff )
// 결과, 철수, 짱구만 출력됨
</script>
Set 요소로서의 객체
하지만, 요소로서 객체를 받게되면, 같은 값을 갖는 객체일지라도 주소값이 다르므로 같은 것으로 인식하지 않습니다. 따라서 set의 경우, 객체의 유일한 값을 다루기에는 적합하지 않습니다.
<script>
const students5 = [
{name : "철수", age : 20 },
{name : "영희", age : 20 },
{name : "짱구", age : 20 },
{name : "철수", age : 20 },
{name : "민정", age : 20 }
];
const setStudent5 = Array.from( new Set( students5 ));
console.log( setStudent5 );
</script>
이상으로 자바스크립트 set 에 대해서 알아보았습니다. 좀 더 자세한 사항을 알고자 한다면 MDN 모질라 문서 Set – JavaScript 문서 편을 확인해 보시기 바랍니다.
예제에서 쓰인 Array 메소드는 자바스크립트 Array 메소드 편을 참고하시기 바랍니다.