Array method 주의할 것

오늘의 문제

• fetch를 해서 가져온 데이터를 각각 가나다순, 평점순 등으로 정렬하는데
  원본 데이터가 자꾸 변경되는 문제.

작성했던 코드

<.js>
// 영화 가져오는 함수
function getMovies(url) {
  fetch....
  ...생략
      // 평점순 정렬 데이터 변수에 저장
      let sortedByRate = data.results.sort((a, b) => {
        return b.vote_average - a.vote_average;
      });

      // 가나다순 정렬 데이터 변수에 저장
      let sortedByAlpha = data.results.sort((a, b) => {
        const upperCaseA = a.title.toUpperCase();
        const upperCaseB = b.title.toUpperCase();

        if (upperCaseA > upperCaseB) return 1;
        if (upperCaseA < upperCaseB) return -1;
        if (upperCaseA === upperCaseB) return 0;
      });

      // 각각의 정렬 버튼 클릭 시 함수 실행
      resetBtn.addEventListener('click', () => showMovies(data.results));
      orderRateBtn.addEventListener('click', () => showMovies(sortedByRate));
      orderAlphabetBtn.addEventListener('click', () =>
        showMovies(sortedByAlpha),
      );
    });
}

원인

• 원본 데이터를 Array의 sort() method로 정렬하여 변수에 저장함
• sort는 원본 데이터를 바꿔버리는 method라서 원본 데이터가 sort()하여
  변수에 할당 할 때마다 바뀌어버림.
• 결론은 계속 sort() 해서 할당할 때마다 값이 변한 상태로 내려간다는 것...

해결방안

spread operator(...) 를 이용한 Array 복제

• 원본 데이터를 가져와 나열하고 다시 대괄호 [ ] 씌워 새로운 배열로 만들어
  sort()를 진행한다.

// data.results를 복사하여 sort
let sortedByRate = [...data.results].sort((a, b) => {
  return b.vote_average - a.vote_average;
});

// data.results를 복사하여 sort
let sortedByAlpha = [...data.results].sort((a, b) => {
  const upperCaseA = a.title.toUpperCase();
  const upperCaseB = b.title.toUpperCase();
  
  .......생략
});

느낀점

• Array의 method는 무엇을 반환하는지, 원본 데이터를 유지하는지
  확실하게 숙지하고 사용하자

이런 문제는 메소드 사용법이 틀리지 않아서 오류도 안 난다.
팀원이 발견하지 않았다면 그 에러도 안 뜨는 상황에서...
끔찍해라!😨