배열에서 중복 제거하기
배열에서 중복 요소를 제거하는 방법에는 여러 가지 로직이 있지만, 모던 자바스크립트에서는 이 작업을 훨씬 간단하게 처리할 수 있는 메서드들을 제공합니다. 대표적으로 Set()과 filter()가 있으며, 각각의 동작 방식과 특징을 하나씩 자세히 살펴보겠습니다.
Set() 메서드
Set() 객체의 핵심 특징은 고유한 값(unique value)만 저장한다는 점입니다. 즉, 중복된 값을 자동으로 걸러주기 때문에 개발자가 별도의 로직을 작성할 필요가 없습니다. Set()은 반복 가능한(iterable) 값을 인수로 받아 중복이 없는 새로운 컬렉션을 생성하며, 스프레드 연산자(...)와 함께 사용하면 손쉽게 일반 배열로 변환할 수 있습니다.
예제
다음 예제에서는 Set() 메서드를 사용하여 별도의 조건문이나 반복문 없이 배열의 중복 요소를 제거합니다.
<html>
<body>
<script>
var dupNames = ['John', 'Ram', 'Rahim', 'Remo', 'Ram', 'Rahim'];
var uniArr = [...new Set(dupNames)];
document.write("Before removing :" +" "+ dupNames);
document.write("</br>");
document.write("After using set() method :" +" "+ uniArr);
</script>
</body>
</html>출력 결과
Before removing : John,Ram,Rahim,Remo,Ram,Rahim After using set() method : John,Ram,Rahim,Remo
filter() 메서드
filter() 메서드를 활용하면 각 요소가 두 번 이상 반복되는지 하나씩 검사하여, 중복된 값 중 첫 번째로 등장한 값만 남기고 나머지는 걸러낼 수 있습니다. 콜백 함수 안에서 indexOf(v)와 현재 인덱스 i를 비교함으로써, 해당 요소가 배열에서 처음 등장하는 위치인지 판별하는 방식으로 동작합니다.
예제
<html>
<body>
<script>
var dupname = ['John', 'Ram', 'Rahim', 'Remo', 'Ram', 'Rahim'];
var x = (dupname) => dupname.filter((v,i) => dupname.indexOf(v) === i)
document.write("Before removing : " +" "+ dupname);
document.write("</br>");
document.write("After filter() method :" +" "+ x(dupname));
</script>
</body>
</html>출력 결과
Before removing : John,Ram,Rahim,Remo,Ram,Rahim After filter() method : John,Ram,Rahim,Remo
두 방법 비교 및 정리
두 방법 모두 동일한 결과를 반환하지만 성능 면에서 차이가 있습니다. Set()은 내부적으로 해시 구조를 기반으로 동작하므로 시간 복잡도가 O(n)으로, 대량의 데이터를 다룰 때 매우 빠릅니다. 반면 filter() + indexOf() 조합은 각 요소마다 배열을 처음부터 다시 검색하므로 O(n²)의 시간 복잡도를 가집니다. 따라서 단순히 중복만 제거하는 것이 목적이라면 Set()을, 필터링 과정에 추가 조건이 필요하다면 filter()를 사용하는 것이 효율적입니다.