[JS] Array.prototype.sort

Array.prototype.sort

• sort 메서드는 배열의 요소를 정렬한다
• 원본 배열을 직접 변경하여 정렬된 배열을 반환한다
• 기본적으로 오름차순으로 요소를 정렬한다

const fruits = ['Banana', 'Orange', 'Apple'];

// 오름차순(ascending) 정렬
fruits.sort();

// sort 메서드는 원본 배열을 직접 변경한다
console.log(fruits); // ['Apple','Banana','Orange']

• 내림차순 요소 정렬하는 법
  • sort메서드로 오름차순 정렬 후 reverse 메서드를 사용하여 요소의 순서를 뒤집는다
  • reverse 메서드 또한 원본 배열을 직접 변경한다
• 유니코드 코드 포인트의 순서를 따른다

  • 문자열 ‘1’의 유니코드 포인트는 U+0031, ‘2’는 U+0032

  • sort 메서드는 배열의 요소를 일시적으로 문자열로 변환한 후 정렬하므로 숫자 배열[2,1]을 메서드로 정렬해도 [1,2]로 정렬된다

    ['2','1'].sort(); // -> ["1","2"]
    [2, 1].sort(); // -> [1,2]

  • 문자열 ‘10’의 유니코드 포인트는 U+0031U+0030, ‘2’는 U+0032

    ['2','10'].sort(); // -> ["10","2"]
    [2, 10].sort(); // -> [1,2]

  • 숫자 요소를 정렬할 때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다
    - 비교 함수는 양수/음수/0을 반환해야 한다
    - 반환값 < 0 이면 비교 함수의 첫번째 인수를 우선 정렬한다
    - 반환값 = 0 이면 정렬하지 않는다
    - 반환값 > 0 두번째 인수를 우선 정렬한다

    const points = [40, 100, 1, 5, 2, 25, 10];
    
    // 숫자 배열의 오름차순 정렬. 비교 함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다
    points.sort((a,b) => a - b);
    console.log(points); // [1, 2, 5, 10, 25, 40, 100]
    
    // 숫자 배열에서 최소/최대값 취득
    console.log(points[0], points[points.length - 1]); // 1 100
    
    // 숫자 배열의 내림차순 정렬. 비교 함수의 반환값이 0보다 작으면 b를 우선하여 정렬한다
    points.sort((a,b) => b - a);
    console.log(points); // [100, 40, 25, 10, 5, 2, 1]
    
    // 숫자 배열에서 최소/최대값 취득
    console.log(points[points.length - 1], points[0]); // 1 100

• 객체를 요소로 갖는 배열을 정렬한 예제

const todos = [
  { id: 4, content: 'JavaScript'},
  { id: 1, content: 'HTML'},
  { id: 2, content: 'CSS'},
  { id: 3, content: 'Java'},
];

// 비교 함수. 매개변수 key는 포로퍼티 키다.
function compare(key){
  // 프로퍼티 값이 문자열인 경우 - 산술 연산으로 비교하면 NaN이 나오므로 비교 연산을 사용한다.
  // 비교 함수는 양수/음수/0을 반환하면 되므로 - 산술 연산 대신 비교 연산을 사용할 수 있다.
  return (a,b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1: 0));
}

// id를 기준으로 오름차순 정렬
todos.sort(compare('id'));
console.log(todos);

/*
[
  { id: 1, content: 'HTML'},
  { id: 2, content: 'CSS'},
  { id: 3, content: 'Java'},
  { id: 4, content: 'JavaScript'}
]
*/

// content를 기준으로 오름차순 정렬
todos.sort(compare('content'));
console.log(todos);

/*
[
   { id: 2, content: 'CSS'},
   { id: 1, content: 'HTML'},
   { id: 3, content: 'Java'},
   { id: 4, content: 'JavaScript'}
]
*/

참고 자료

도서 )
모던 자바스크립트 Deep Dive - 이웅모