[JavaScript] 배열 중복 제거: include()와 Set 성능 비교

문제

for문을 돌면서 특정 값을 배열에 push를 해야했는데, 중복이 발생하면 안 되는 상황이었다.

 

그래서 두 가지 방법을 생각해냈다.

1. 모든 값을 배열에 담은 후 중복을 제거하기

2. 값을 담을 때 중복을 검사하기 

 

includes()

 

찾아봤는데, includes()를 사용하여 미리 중복을 검사할 수 있다는 것을 알게 되어 해당 코드를 사용했다.

let numbers = []; 
[1, 2, 3, 1, 2, 4, 5].forEach(num => 
	{ if (!numbers.includes(num)) { 
    	numbers.push(num); 
    } 
}); 

console.log(numbers); // [1, 2, 3, 4, 5]

 

includes()는 해당 값이 배열에 포함되어 있는지 true or false를 반환하는 함수이다.

그래서 중복을 방지할 수 있다.

 

그러던 중, 더 자세히 알아보니 데이터 양이 많아지면 includes()는 속도가 느려진다는 것을 알게 됐다.

includes()는 O(n)의 속도이기 떄문에, 배열에 담긴 데이터가 많아질수록 성능이 떨어지는 함수였다.

내가 사용하는 이 부분에서는 데이터가 그렇게 많지 않은 편이라 includes로 해도 괜찮아서 이대로 진행했다. (진짜 많아야 몇 백개 정도..?)

 

하지만 성능 최적화를 고민하다 보니 더 나은 방법이 있을까 찾아봤다.

 

그때 발견한 것이 바로 Set이었다.

 

 

Set

Set은 중복 없는 값들의 집합을 다루는 자료형이다.

 

 

주요 특징

1. 중복을 허용하지 않는다

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // 중복된 2는 무시됨
console.log(mySet); // Set {1, 2}

 

Set에 같은 값을 두 번 이상 추가하려고 하면, 두 번째 값은 무시된다.

 

2. 순서가 있다.

const mySet = new Set([1, 2, 3]);
console.log([...mySet]); // [1, 2, 3]

 

Set은 삽입 순서를 기억하며, 값을 삽입한 순서대로 반복할 수 있어. 즉, 삽입 순서대로 값이 저장된다.

 

 

3. 배열과 비슷하지만, 배열과는 다른 점

Set은 배열처럼 반복이 가능하지만, 인덱스를 사용하여 직접 접근할 수 없다.

배열에서 중복 제거를 할 때 Set을 활용할 수 있다.

 

 

4. 빠른 검색 성능 (O(1))

Set은 값을 찾거나 삽입할 때 매우 빠르다. 배열은 순차적으로 탐색하지만, Set은 해시 테이블을 사용해서 빠른 검색을 지원한다. 그래서 데이터가 많을 때 유리하다.

let numbers = [1, 2, 3, 1, 2, 4, 5]; 
let uniqueNumbers = [...new Set(numbers)]; // 중복 제거 
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

 

Set을 사용하면 O(1)의 시간 복잡도를 제공하므로, 데이터가 많을 경우 성능이 매우 뛰어나다.

Set은 내부적으로 해시 테이블을 사용해 빠른 검색을 지원한다.

 

 

배열과 Set을 언제 사용할까?

• 배열의 중복을 검사하고 처리해야 할 때, 작은 데이터에서는 includes()를 사용하는 것이 직관적이고 간단하다.
• 데이터가 많아질 경우, Set을 활용하는 것이 성능상 훨씬 유리하다.

따라서, 성능이 중요하다면 Set을, 간단한 검증이 필요하면 includes()를 사용하면 좋다.