[Javascript] Performance of Set and Array

이번주 회사에서 코드 리뷰를 하면서 기술 블로그로 쓰기 딱 좋은 주제가 생겼다.

object의 property 값이 중복되는지 체크하는 부분이었는데, 내가 작성한 로직은 아래와 같다.

1. Array에 해당 property 값들을 담아 놓음
2. lodash의 _.uniq()로 Array에서 중복 값 제외
3. object와 Array의 length 비교 (length가 다르다면 중복 값이 존재함)

리뷰해주는 동료분께서, 중복값을 체크하려면 Set을 써도 되지 않겠냐고 의견을 주셨다. 한동안 Set을 안쓰고 있어서 기억 저편에 있었다😅

Set을 사용하는 경우 로직:

1. Set에 해당 property 값들을 담아 놓음 (Set은 uniq한 값들만 저장됨)
2. object와 Array의 length 비교

Array와 가장 큰 차이는 중복값을 체크하는 코드가 필요없다는 것!!!
그러다 문득 Array와 Set의 퍼포먼스가 어느정도 차이가 나는지 궁금해졌다.

Array를 사용한 경우:

let isDuplicate: boolean = false;
const names: string[] = [];

console.time('use Array');

_.forEach(result, (item) => {
  names.push(item.name);
});

if (result.length !== _.uniq(names).length) {
  isDuplicate = true;
}

console.timeEnd('use Array');

Set을 사용한 경우:

let isDuplicate: boolean = false;
const names: Set<string[]> = new Set();

console.time('use Set');

_.forEach(result, (item) => {
  names.add(item.name);
});

if (result.length !== names.size) {
  isDuplicate = true;
}

console.timeEnd('use Set');

데이터의 수가 100개 미만인 지금 상황과 같은 경우, Set이 Array보다 약 0.01 ms 정도 빨랐다.
현재 코드에선 거의 차이가 안나는 수준이긴 하다.

그런데 만약 데이터가 1k, 10k 정도로 많아진다면?

	Array	Set
1k
10k
100k

1,000개 까지는 눈에 띄게 차이가 나지 않지만, 10만개 이상의 많은 데이터의 경우 38ms 정도 차이가 난다. 이 땐, Set을 사용하는 것이 퍼포먼스 측면으로는 더 낫다고 볼 수 있겠다.

❗️이건 Array의 push + lodash _.uniq() + Array.length
Set의 add + Set.size 조합을 비교한 경우이기 때문에,
데이터 삭제, index 추출 등 Array와 Set의 퍼포먼스는 각각 다 다를 수 있다.

현재 해당 기능의 로직상 10만개 이상의 데이터가 들어오는 경우는 거의 없지만, 코드의 가독성 측면에서 Set을 사용하는 게 더 낫다고 결론이 나왔다.😌😌

잊고 있었던 Set을 다시 상기 시키고, Array와 Set을 비교해 글까지 작성하게 해준 이번 코드 리뷰였다. 매일 배우는 즐거움과 성장할 기회가 주어지는 개발자라는 내 직업이 너무 행복함을 다시 한 번 느꼈다🥰