[JavaScript] 배열을 일일이 순회하지 않고 더 빨리 값을 찾고 싶니? new Set() 써볼래?

$bookmark.addEventListener('click',() => {
    const $movieCards = document.querySelectorAll('.movieCard');
    const bookmarkedMovies = handleBookmark('get');
    const newRenderData = movieData.filter(({id}) => bookmarkedMovies.includes(id));

    $movieCards.forEach((card) => card.remove());

    if(newRenderData.length === 0){
        //기존에 이미 해당 요소('북마크된 영화가 없습니다.')가 추가되어 있으면 추가하지 않기 위해 분기 처리
      if (!$main.querySelector('.noMovie')) {
        const noBookmarkedMovie = document.createElement('div');
        noBookmarkedMovie.className = 'noMovie';
        noBookmarkedMovie.textContent = '북마크된 영화가 없습니다.';
        $main.appendChild(noBookmarkedMovie);
      } 

    } else renderMoviCard(newRenderData);
})

 

handleBookmard('get')은 localStorage에 저장된 값들을 배열로 반환하는 함수이다.

localStorage에 저장된 값들을 새로운 배열로 만들어 newRenderData에 할당한다.

renderMovieCard(newRenderData)를 통해 화면을 새롭게 그린다. (북마크 된 애들을 볼 수 있음)

 

여기서 문득 든 생각.. 

movieData를 filter하면 movieData를 처음부터 끝까지 한 번 순회할 테고

bookmarkedMovies에 id가 포함되어 있는지 확인하려면 bookmarkedMovies도 처음부터 끝까지 순회를 해야 할 텐데

순회를 하는데 그 안에서 또 순회를 한다라.. 

이 코드 괜찮은 거 맞나? 뭔가 최선이 아닌 거 같은 느낌적인 느낌.. 

아! Set을 써볼까? Set이 값에 빠르게 접근할 수 있다는 얘기를 예전에 들었던 거 같은데.

사실 Set에 대해 잘 모르기도 하고 일단 알아나 보자.

 

이런 생각 회로로 오늘 이 글을 쓰게 되었다!

 

일단 둘의 공통점과 차이점을 알아보자.

배열(Array)와 Set은 둘 다 같은 타입의 여러 값들을 저장하는 자료구조이다.

 

다만 배열은

• index가 있어 순서가 중요하고 값이 중복될 수 있다.
• 배열에서 특정 값을 찾는다면 배열 안에 있는 모든 값들을 순회해야 한다.
• 따라서 특정 값을 찾는데, 순회하는 배열 데이터가 크다면 시간이 오래 걸린다.

반면 Set은

• 내부적으로 값(혹은 키)를 저장할 때 해시값을 계산해서 데이터를 특정 위치에 저장한다.
• 따라서 같은 값을 저장하려고 하면 해당 값을 갖고 있는 해시 값이 존재하기 때문에 추가적으로 저장하지 않는다.(값 중복 저장 불가)
• 즉 Set은 고유한 값들만 저장한다.
• 해시값으로 접근하기 때문에 순서가 중요하지 않고
• 특정 값을 찾을 때에도 모든 값들을 순회할 필요 없이 has 메서드로 바로 해당 해시 값에 접근하기 때문에 값을 금방 찾을 수 있다.

 

그럼 무조건 Set을 쓰는 게 좋은 건가?? 

That' a nono!

 

Array는 메모리에 저장된 배열 값을 그대로 사용하기 때문에 추가적인 메모리 사용이 불필요하다.

하지만 Set은 값들을 다시 해시값으로 계산해 저장하기 때문에 추가적으로 메모리를 사용해야 한다.

즉, Set이 메모리 사용량이 더 크다.

 

대신 Set은 실행 속도가 빨라 CPU의 부하를 줄여주는 반면 Array는 데이터가 클수록 CPU에 부하가 걸리게 된다.

 

따라서 데이터 크기가 작거나 메모리를 우선적으로 고려한다면 Array를 사용하고

데이터 크기가 크거나 속도를 우선적으로 고려한다면 Set을 사용하는 것이 적절하겠다.

 

결론적으로 내가 고민했던 코드는 데이터가 작기 때문에 Array를 사용해도 큰 문제가 없어 보인다.

그래도 Set을 공부했으니 한 번 적용해 보았다.

$bookmark.addEventListener('click',() => {
    const $movieCards = document.querySelectorAll('.movieCard');
    const bookmarkedMovies = new Set(handleBookmark('get'));
    const newRenderData = movieData.filter(({id}) => bookmarkedMovies.has(id));

    $movieCards.forEach((card) => card.remove());

    if(newRenderData.length === 0){
        //기존에 이미 해당 요소('북마크된 영화가 없습니다.')가 추가되어 있으면 추가하지 않기 위해 분기 처리
      if (!$main.querySelector('.noMovie')) {
        const noBookmarkedMovie = document.createElement('div');
        noBookmarkedMovie.className = 'noMovie';
        noBookmarkedMovie.textContent = '북마크된 영화가 없습니다.';
        $main.appendChild(noBookmarkedMovie);
      } 

    } else renderMoviCard(newRenderData);
})