[Javascript] Array Methods- sort() function

1️⃣ sort() : 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환
기본적으로 오름차순(ascending) 정렬

Syntax

// Functionless
sort() // (default) sort by ascending(오름차순) 

// Arrow function
sort((a, b) => { /* … */ } )

// Compare function
sort(compareFn)

// Inline compare function
sort(function compareFn(a, b) { /* … */ })

// a :The first element for comparison.
// b :The second element for comparison.

compareFunction이 제공되지 않으면, (1)요소를 문자열로 변환하고, (2)유니코드 코드 포인트 순서로 문자열을 비교하여 정렬된다.

2️⃣ 숫자(Number) 정렬과 문자열(String) 정렬 알고리즘이 다르다.

숫자 비교

오름차순(ascending)
a - b > 0 (양수) : a 를 오른쪽에 정렬
a - b < 0 (음수) : b 를 오른쪽에 정렬
a - b == 0 : a와 b를 서로 변경하지 않고 모든 다른 요소에 대해 정렬

Syntax

function compareNumbers(a, b) {
  return a - b;
}

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

내림차순(descending) : (큰 숫자 >> 작은 숫자)

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return b - a; // 역순으로 정렬
});
console.log(numbers);

// [1, 2, 3, 4, 5]

문자열 비교

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

function compare(a, b){
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

(응용🔥) 문자열을 내림차순(역순)으로 정렬하기

let array = ['가','다','나'];
array.sort((a ,b)=>{
	if (a < b) return 1;
    if (a > b) return -1;
    if (a == b) return 0;
})
console.log(array);  // ['다','나','가']

🐰 어떻게 정렬된다고??

• return a - b > 0 이라면, a가 오른쪽으로 정렬된다.
• return a - b < 0 이라면, b가 우측으로 간다.

먄약, a ='가', b ='다' 를 파라미터(parameter)로 넣었을 때,
a(='가') < b(='다') 라면, 0 보다 커야(양수여야)지 a(작은 값)가 오른쪽으로 정렬되고, b(큰 값)가 왼쪽으로 가게 된다. 결국엔 가장 큰 값이 왼쪽부터 시작되는 내림차순 정렬이 된다.
따라서 이 조건(a < b)에서 return 1이 되어야 한다.

반대로, a ='다', b ='나' 를 넣었을 때,
a(='다') > b(='나') 라면, 0 보다 작아야(음수여야)지 b(큰 값)가 오른쪽으로 정렬되고, a(작은 값)가 왼쪽으로 가게 된다.
따라서 이 조건(a > b)에서 return -1이 되어야 한다.

3️⃣ Return value : The reference to the original array, now sorted. Note that the array is sorted in place, and no copy is made.
sort()는 원본 데이터를 참조/변경한다.

위의 응용문제에서도 알 수 있듯이, sort()는 원본 데이터를 참조(얕은복사, Shallow Copy) 하여 변경하므로, 원래 값을 유지하지 않는다. 따라서, 원본 데이터를 유지하되 새로운 배열을 반환하는 map()을 이용한 정렬을 고려해보자.

cf. map()을 이용한 정렬

// 소트 할 배열
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// 임시 배열은 위치 및 정렬 값이있는 객체를 보유합니다.
var mapped = list.map(function(el, i) {
  return { index: i, value: el.toLowerCase() };
})

// 축소 치를 포함한 매핑 된 배열의 소트
mapped.sort(function(a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;
});

// 결과 순서를 위한 컨테이너
var result = mapped.map(function(el){
  return list[el.index];
});

Reference

• [MDN] sort() function