Array.prototype.sort([compareFunction])

Category : Javascript

const numArr = [1, 3, 2, 10];
const strArr = ['banana', 'apple', 'carrot'];

console.log(numArr.sort()); // [1, 10, 2, 3]
console.log(strArr.sort()); // ['apple', 'banana', 'carrot']

• Array.sort() 함수 내부에 인자로 compareFunction을 전달하지 않으면 ASCII코드를 기준으로 정렬을 수행합니다.
  1. [1, 3, 2, 10]을 정렬한 결과가 [1, 10, 2, 3]이 나오는 이유입니다.
  2. strArr은 문자열로 구성된 배열이기 때문에 ASCII코드에 따라서 정렬이 잘 된 모습입니다.

const compareFunction = (a, b) => {
  if (a < b) { // [a, b]
    return -1;
		// return -100도 가능
  }
  if (a === b) { // [a, b]
    return 0;
  }
  if (a > b) { // [b, a]
    return 1;
		// return 100도 가능
  }
};
console.log(numArr.sort(compareFunction)); // [1, 2, 3, 10]

• 만약 numArr을 오름차순으로 올바르게 정렬하려면 compareFunction을 사용하면 되는 데, MDN에서 compare함수의 형식을 보시면 아래와 같습니다.
  • return값이 0보다 작으면 a가 먼저 옴, -1이 아닌 0보다 작은 값을 반환해도 됩니다.
  • return값이 0이면 a, b의 순서를 변경하지 않고 다른 요소에 대해 정렬, 무조건 0 이어야합니다.
  • return값이 0보다 크면 b가 먼저 옴, 1이 아닌 0보다 큰 값을 반환해도 됩니다.

numArr을 오름차순으로 정렬

const compareFunction = (a, b) => {
  return a-b;
};
console.log(numArr.sort(compareFunction)); // [1, 2, 3, 10]

• 여기서 a-b를 살펴보겠습니다.
  1. a=1, b=3 : 이 경우에는 a-b < 0이므로 정렬시 [a, b]로 정렬됩니다.
  2. a=3, b=2: 이 경우에는 a-b > 0이므로 정렬시 [b, a]로 정렬됩니다.
  • 이와 같은 방식으로 배열을 순회하며 compareFunction의 결과 값으로 정렬하게 됩니다.

• 그럼 numArr을 내림차순으로 정렬해보겠습니다.

const compareFunction = (a, b) => {
  return b-a;
};
console.log(numArr.sort(compareFunction)); // [10, 3, 2, 1]

• 마찬가지로 b-a를 살펴보겠습니다
  1. a=1, b=3 : 이 경우에는 b-a > 0이므로 정렬시 [b, a]로 정렬됩니다.
  2. a=3, b=2 : 이 경우에는 b-a < 0이므로 정렬시 [a, b]로 정렬됩니다.

추가) strArr을 내림차순으로 정렬

const strArr = ['banana', 'apple', 'carrot'];
const compareFunction = (a, b) => {
  if (a < b) { // [b, a]
    return 1;
  }
  if (a === b) { // [a, b]
    return 0;
  }
  if (a > b) { // [a, b]
    return -1;
  }
};
console.log(strArr.sort(compareFunction)); // ['carrot', 'banana', 'apple']

• a < b의 결과 값으로 0보다 큰 1을 반환하기 때문에 a와 b의 순서를 바꾸게 됩니다.