자바스크립트 - sort()

sort() 함수

Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다.

arr.sort([compareFunction])

파라미터
compareFunction

정렬 순서를 정의하는 함수.

• 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다.
• 이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다.
• 이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우,
• 이 함수가 리턴하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고,
• 이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬합니다.
• 만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다.

리턴값

compareFunction 규칙에 따라서 정렬된 배열을 리턴합니다.
이때, 원본 배열인 arr가 정렬이 되고, 리턴하는 값 또한 원본 배열인 arr을 가리키고 있음에 유의하세요.

예제 1

const arr1 = [2, 1, 3];
const arr2 = ['banana', 'apple', 'orange']

arr1.sort();
document.writeln(arr1 + '<br>'); // [1, 2, 3]

arr2.sort();
document.writeln(arr2 + '<br>'); // ['apple', 'banana', 'orange']

// 결과
1,2,3
apple,banana,orange

sort() 함수를 사용하여 오름차순으로 정렬한 예제입니다.
파라미터(compareFunction)가 생략되었으므로, 유니코드 순서에 따라서 오름차순으로 정렬되었습니다.

예제 2

const arr = [2, 1, 3, 10];

arr.sort();
document.writeln(arr + '<br>'); // [1, 10, 2, 3]

//결과
1,10,2,3

sort() 함수는 파라미터(compareFunction)가 입력되지 않으면, 유니코드 순서에 따라서 값을 정렬합니다.
따라서, 유니코드 순서에 따라 [1, 10, 2, 3] 으로 정렬되었습니다.
그렇지만, 이 순서는 우리가 기대했던 순서가 아닙니다.
[1, 2, 3, 10] 순서로 정렬하기 위해서는 파라미터(compareFunction)를 활용해야 합니다 -> (예제 3)

예제 3

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  if(a > b) return 1;
  if(a === b) return 0;
  if(a < b) return -1;
});
document.writeln(arr + '<br>'); // [1, 2, 3, 10]

//결과
1,2,3,10

 

배열의 숫자들을 유니코드 순서가 아닌, 숫자 크기 순서대로 정렬하기 위해서 sort() 함수의 파라미터로 함수를 정의하였습니다.
이 함수는 a, b 두 개의 파라미터를 입력받고, a > b이면 1, a == b이면 0, a < b이면 -1을 리턴하여, 주어진 배열을 오름차순으로 정렬하였습니다.

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});
document.writeln(arr + '<br>'); // [1, 2, 3, 10]

//결과
1,2,3,10

두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여 숫자를 오름차순으로 정렬하는 예제를 위와 같이 단순화 할 수도 있습니다.

예제 4

const arr1 = [2, 1, 3];

const arr2 = arr1.sort();
document.writeln(arr1 + '<br>'); // [1, 2, 3]
document.writeln(arr2 + '<br>'); // [1, 2, 3]

arr1.push(4);
document.writeln(arr1 + '<br>'); // [1, 2, 3, 4]
document.writeln(arr2 + '<br>'); // [1, 2, 3, 4]

//결과
1,2,3
1,2,3
1,2,3,4
1,2,3,4

sort() 함수는 원본 배열을 정렬하고, 원본 배열을 가리키는 배열을 리턴합니다.
const arr2 = arr1.sort();
arr1; // [1, 2, 3]
arr2; // [1, 2, 3]
원본 배열인 arr1이 정렬이 되었고, sort() 함수가 리턴한 arr2도 정렬이 된 상태임을 확인할 수 있습니다.

arr1.push(4);
arr1; // [1, 2, 3, 4]
arr2; // [1, 2, 3, 4]
원본 배열인 arr1에 element 4를 추가하였습니다.
arr2는 arr1을 가리키고 있기 때문에, arr2의 배열을 출력하여도 element 4가 추가된 것을 확인 할 수 있습니다.

sort() 함수로 숫자 오름차순 정렬하기

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});
document.writeln(arr + '<br>'); // [1, 2, 3, 10]

//결과
1,2,3,10

두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달하여, 배열을 오름차순으로 정렬하도록 하였습니다.

sort() 함수로 숫자 내림차순 정렬하기

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return b - a;
});
document.writeln(arr + '<br>'); // [10, 3, 2, 1]

//결과
10,3,2,1

두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달하여,배열을 내림차순으로 정렬하도록 하였습니다. 오름차순으로 정렬할 때와 달리, sort() 함수의 파라미터 함수에서 b-a값을 리턴하도록 수정하였습니다.

sort() 함수로 문자열 정렬하기-오름차순

const arr = ['banana', 'b', 'boy'];

arr.sort();
document.writeln(arr + '<br>'); // ['b', 'banana', 'boy']

//결과
b,banana,boy

sort() 함수는 파라미터가 입력되지 않으면 문자열의 유니코드 순서대로 정렬하기 때문에 문자열의 오름차순 정렬에는 파라미터가 입력되지 않아도 됩니다.

내림차순으로 정렬하기

const arr = ['banana', 'b', 'boy'];

arr.sort(function(a, b) {
  if(a < b) return 1;
  if(a > b) return -1;
  if(a === b) return 0;
});
document.writeln(arr + '<br>'); // ['boy', 'banana', 'b']

//결과
boy,banana,b

문자열을 내림차순으로 정렬하기 위해서는 sort()의 파라미터 함수에서 두 문자열을 비교하는 내용이 들어가야 합니다.

sort() 함수로 문자열(대소문자 구분없이) 정렬하기

const arr = ['banana', 'b', 'Boy'];

arr.sort();
document.writeln(arr + '<br>'); // ['Boy','b','banana']

//결과
Boy,b,banana

sort() 함수로 문자열을 정렬하면, 대문자가 소문자보다 앞에 오도록 정렬이 됩니다.
유니코드가 대문자가 소문자보다 앞서기 때문입니다. 문자열의 대소문자 구분없이 정렬하기 위해서는 다음 방법을 사용합니다.

오름차순으로 정렬하기 (대소문자 구분없이)

const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA > upperCaseB) return 1;
  if(upperCaseA < upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

document.writeln(arr + '<br>'); // ['b', 'banana', 'Boy']

//결과
b,banana,Boy

sort() 함수의 파라미터 함수에서 문자열을 비교할 때 문자열을 모두 대문자로 변환하여 비교하였습니다. ( toUpperCase() 함수)

내림차순으로 정렬하기 (대소문자 구분없이)

const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA < upperCaseB) return 1;
  if(upperCaseA > upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

document.writeln(arr + '<br>'); // ['Boy', 'banana', 'b']

//결과
Boy,banana,b

sort() 함수로 객체 정렬하기

const arr = [
  {name: 'banana', price: 3000}, 
  {name: 'apple', price: 1000},
  {name: 'orange', price: 500}
];

arr.sort(function(a, b) {
  return a.price - b.price;
});

document.writeln(JSON.stringify(arr[0]) + '<br>');
document.writeln(JSON.stringify(arr[1]) + '<br>');
document.writeln(JSON.stringify(arr[2]) + '<br>');

//결과
{"name":"orange","price":500}
{"name":"apple","price":1000}
{"name":"banana","price":3000}

배열의 element가 객체일 때의 예제입니다. 객체의 price값을 기준으로 오름차순 정렬하였습니다.