[JS] 배열 데이터 sort()

배열의 내장 함수인 sort()를 알아보자.

 

 

문자형 정렬

 

원본 배열의 순서를 정렬하는 메소드이다.

보통 오름차순, 내림차순 정렬을 할 때 쓰인다.

 

📍작성코드 예시

const App = () => {
  const sortedItems = items.sort((a, b) => b.rating - a.rating);

  return (
    <div>
      <ReviewList items={sortedItems} />
    </div>
  );
};
export default App;

rating(별점) 순서대로 데이터를 정렬하고 싶었다.

검색하던중 sort 메소드를 발견! 

주의 할 점은 숫자를 정렬할 땐, ASCII 문자 순서로 정렬된다는 점..

let a = [4, 11, 2, 10, 3, 1]; 

/* 오류 */
a.sort(); // 1, 10, 11, 2, 3, 4 
              // ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음

/* 정상 동작 */
a.sort(function(a, b) { // 오름차순
    return a - b;
    // 1, 2, 3, 4, 10, 11
});

a.sort(function(a, b) { // 내림차순
    return b - a;
    // 11, 10, 4, 3, 2, 1
});

 

 

숫자형도 정렬해보자.

 

    let numbers = [0, 1, 3, 2, 5, 10, 7];
    numbers.sort();
    console.log(numbers)

정렬이 이상하게 되었다.

이유는? sort 메소드는 숫자를 기준으로 정렬하는게 아니고 문자를 사전순으로 정렬을해서 그렇다.

문자를 보고 사전순으로 정렬을 하기때문에 0, 1, 10 , 2 이런식으로 출력이 되는 것이다.

 

이럴땐,

sort 메소드의 인자로 비교함수를 직접 만들어서 넣어주면 된다.

 

    let numbers = [0, 1, 3, 2, 5, 10, 7];
    const compare = (a, b) => {
      if (a > b) {
        return 1;
        //크다
      }
      if (a < b) {
        return -1;
        //작다
      }
      return 0;
      //같다

    };

    numbers.sort(compare);
    console.log(numbers)

 

짠, 순서대로 잘 출력된다.

 

원리를 알아보자.

비교함수가 세가지 기준으로 결과를 내놔야하는데

크다, 작다, 같다로 구분하였다.

a 가 b 보다 클 때, 라는것은 a가 b보다 더 뒤에 있어야 한다는 뜻이다.

(큰 값이 뒤로 간다는 뜻)

클땐 뒤로 보내고 작을 땐 앞으로 보내고 같을 땐 자리를 안바꾸게 되면 오름차순으로 

배열이 정렬되는 것이다.

(내림차순은 -1, 1의 순서를 바꿔주면 된다.)