sort(), reverse() 배열요소 정렬 메소드 (+ 오름차순, 내림차순 정렬)

.sort() / mutable

sort()메소드는 배열의 엘리먼트 값을 왼쪽에서 오른쪽으로 문자 하나씩 비교하여 승순으로 배열을 정렬하여 반환한다. 정렬기준은 Unicode순서로 분류하며, 유니코드의 코드 포인트가 작으면 앞에오고 크면 뒤에 온다. (원본배열을 수정한다.)

const array1 = [5, 3, 8, 2, 1];
console.log(array1.sort()); // -> [1, 2, 3, 5, 8] 
// 원본배열도 수정된다.
console.log(array1); // -> [1, 2, 3, 5, 8]

// 작은 수에서 큰 수가 아닌, 유니코드 순으로 작성된다.
const array2 = [1, 30, 4, 21, 192];
console.log(array2.sort()); // -> [1, 192, 21, 30, 4]
console.log(array2); // -> [1, 192, 21, 30, 4]

const abc = ["B", "A", "H", "D"];
console.log(abc.sort()); // -> ['A', 'B', 'D', 'H']
console.log(abc); // -> ['A', 'B', 'D', 'H']

sort() 값의 순서로 배열을 정렬

arr.sort((a,b) => { return a - b })

1. sort 메소드를 호출할며 콜백함수를 호출한다.
2. 콜백함수 function(a,b)에 인자를 순차적으로 전달하여 식을 실행한다. { return a - b; }
3. 콜백함수 식이 계산된 값이 양수일 경우 -> 배열의 요소 순서를 변경한다.
4. 콜백함수 식이 계산된 값이 음수 또는 0일 경우 -> 배열의 요소 순서를 변경하지 않는다.
5. 다시 처음으로 돌아가서 순서가 변경되는 값이 없을때까지 반복한다.
6. 배열의 요소가 변경되지 않을 때의 배열을 반환한다.

let value = [161, 40, 7, 4000];
// sort 메소드가 실행될때 콜백함수 function(a,b)가 실행됨
value.sort(function(a,b){ 
  return a - b;
});
console.log(value); // -> [7, 40, 161, 4000]

/* 왼쪽의 배열 요소부터 순서대로 비교한다.
* 콜백함수 function(a,b)의 인자에 순서대로 전달하여 식을 실행한다.
* 식이 계산된 값이 양수일 경우 -> 배열의 요소 순서를 변경한다.
* 식이 계산된 값이 음수일 경우 -> 배열의 요소 순서를 변경하지 않는다.

1번 실핼 : 전달인자 (a: 161, b: 40) {161 - 40} = 양수 -> [40, 161, 7, 4000]
2번 실핼 : 전달인자 (a: 161, b: 7) {161 - 7} = 양수 -> [40, 7, 161, 4000]
3번 실행 : 전달인자 (a: 161, b: 4000) {161 - 4000} = 음수 -> [40, 7, 161, 4000]

*다시 처음으로 돌아가서 왼쪽부터 오른쪽요소를 순차적으로 비교한다.
2-1번 실행 : 전달인자 (a: 40, b: 7) {40 - 7} = 양수 -> [7, 40, 161, 4000]
2-2번 실행 : 전달인자 (a: 40, b: 161) {40 - 161} = 음수 -> [7, 40, 161, 4000]
2-3번 실행 : 전달인자 (a: 40, b: 161) {161 - 4000} = 음수 -> [7, 40, 161, 4000]

* 배열이 더이상 변경되지 않을 때 배열을 반환한다.
*/

sort() 값의 역순서로 배열을 정렬

arr.sort((a,b) => { return b - a })

1. sort 메소드를 호출할며 콜백함수를 호출한다.
2. 콜백함수 function(a,b)에 인자를 순차적으로 전달하여 식을 실행한다. { return b - a; }
3. 콜백함수 식이 계산된 값이 음수일 경우 -> 배열의 요소 순서를 변경한다.
4. 콜백함수 식이 계산된 값이 양수 또는 0일 경우 -> 배열의 요소 순서를 변경하지 않는다.
5. 다시 처음으로 돌아가서 순서가 변경되는 값이 없을때까지 반복한다.
6. 배열의 요소가 변경되지 않을 때의 배열을 반환한다.

let value = [161, 40, 7, 4000];
value.sort(function(a,b){
  return b - a;
});
console.log(value); // [4000, 161, 40, 7];

/* 왼쪽의 배열 요소부터 순서대로 비교한다.
* 콜백함수 function(a,b)의 파라미터에 인자를 순서대로 전달한다.
* 전달받은  식을 실행한다.
* 식이 계산된 값이 음수일 경우 -> 배열의 요소 순서를 변경한다.
* 식이 계산된 값이 양수일 경우 -> 배열의 요소 순서를 변경하지 않는다.
* 배열이 더이상 변경되지 않을 때 배열을 반환한다.
*/

sort() 기준을 두고 정렬하는 방법

• value의 값을 기준으로 정렬하려면?
• 고차함수를 활용 → value의 값을 맨 왼쪽(위)부터 순차적으로 고차함수의 파라미터에 전달한다.
• 전달된 두 인자를 비교하여 양수인 경우 → 요소의 위치를 바꾼다.
• 전달된 두 인자를 비교하여 음수 또는 0인 경우 → 요소의 위치를 바꾸지 않는다.

reverse() / mutable

reverse() 메소드는 배열의 요소의 정렬 순서를 반전시킨다. (원본배열을 수정한다.)

const arr1 = ["a", "b" , "c" , "d"];
console.log(arr1.reverse())

const arr2 = [1, 2, 3, 4, 5];
console.log(arr2.reverse())

// 원본배열도 수정된다.
console.log(arr1)
console.log(arr2) 

reverse() 배열요소 순서

출처 MDN
코드스테이츠