자바스크립트 javascript array sort 정렬

javascript array를 정렬하는 방법에 대해 알아보겠습니다.
array sort 메서드를 사용하면 쉽게 배열을 정렬할 수 있습니다.
json array sort도 json key를 바탕으로 원하는 기준으로 정렬할 수 있습니다.

array.sort

배열 값을 정렬한 후에 정렬된 배열을 반환합니다.
기본 정렬 순서는 문자열의 unicode 포인트 순서를 따라 정렬됩니다.

Syntax: arr.sort([compareFunction])

• compareFunction: 배열의 정렬 순서를 정의하는 메서드

let array = [3, 5, 4, 1, 2];
array.sort();
console.log(array);
// output: [ 1, 2, 3, 4, 5 ]

array = ['b', 'a', 'e', 'd', 'c'];
array.sort();
console.log(array);
// output: [ 'a', 'b', 'c', 'd', 'e' ]

일반적인 경우라면 sort 메서드만 사용하여 쉽게 정렬할 수 있습니다.

예상과 다르게 정렬되는 경우에 대해 살펴보겠습니다.

array.sort 예상과 다른 경우

숫자들로만 이루어진 배열에서 sort 메서드를 사용하면 오름차순으로 정렬이 잘 될까요?
저는 그렇게 생각했습니다...
예제를 한번 보시죠

let array = [1, 2, 11, 34, 22];
array.sort();
console.log(array);
// output: [ 1, 11, 2, 22, 34 ]

예상과 같으셨나요? 능력자시군요..^^
NOTE: compareFunction이 없으면 배열의 값를 문자열로 변환하고 유니코드 순서로 문자열을 비교하여 정렬합니다.
숫자에 대한 오름차순 혹은 내림차순에 대한 정렬은 다른 방법이 필요해보입니다.

compareFunction(parameter)

sort 메서드의 파라미터로 정렬 순서를 정의하는 함수입니다.

• compareFunction(a, b) { return -1; }: a를 b보다 낮은 index로 정렬됩니다. [a, b]
• compareFunction(a, b) { return 1; }: b를 a보다 낮은 index로 정렬됩니다. [b, a]
• compareFunction(a, b) { return 0; }: a, b에 대한 순서를 변경하지 않습니다.

위의 정의를 바탕으로 다시 정렬해보겠습니다.

let array = [1, 2, 11, 34, 22];
array.sort((a, b) => a - b);
console.log(array);
// output: [ 1, 2, 11, 22, 34 ]

array.sort((a, b) => b - a);
console.log(array);
// output: [ 34, 22, 11, 2, 1 ]

array = [1, 2, 11, 34, 22];
array.sort((a, b) => 0);
console.log(array);
// output: [1, 2, 11, 34, 22]

INFO: 이제 원하는 정렬 방식으로 정렬이 잘 됐습니다.

• a - b: 오름차순 정렬
• b - a: 내림차순 정렬
• a = b: 순서를 변경하지 않음

json array sort

위 내용을 바탕으로 json array 정렬에 대해 알아보겠습니다.
기준이 되는 json key를 정하고 비교하여 정렬하면 원하는 결과를 얻을 수 있습니다.

let array = [
    { name: 'Amelia', age: 23 },
    { name: 'Grace', age: 32 },
    { name: 'Belita', age: 54 },
    { name: 'Isabel', age: 17 },
    { name: 'Luara', age: 48 },
    { name: 'Jessie', age: 73 }
];
// order by age asc
array.sort((a, b) => {
    if (a.age < b.age) return -1;
    if (a.age > b.age) return 1;

    return 0;
});
console.log(array);
// output: 
// [
//     { name: 'Isabel', age: 17 },
//     { name: 'Amelia', age: 23 },
//     { name: 'Grace', age: 32 },
//     { name: 'Luara', age: 48 },
//     { name: 'Belita', age: 54 },
//     { name: 'Jessie', age: 73 }
// ]

// order by name desc
array.sort((a, b) => {
    a = a.name.toLowerCase();
    b = b.name.toLowerCase();
    if (a < b) return 1;
    if (a > b) return -1;

    return 0;
});
console.log(array);
// output: 
// [
//     { name: 'Jessie', age: 73 },
//     { name: 'Belita', age: 54 },
//     { name: 'Luara', age: 48 },
//     { name: 'Grace', age: 32 },
//     { name: 'Amelia', age: 23 },
//     { name: 'Isabel', age: 17 }
// ]

json array에서 json key의 age를 기준으로 오름차순 정렬한 결과와 name기준으로 내림차순 정렬한 결과를 볼 수 있습니다.

[javascript] - 자바스크립트 javascript array 값 요소 찾기

[javascript] - 자바스크립트 javascript array to string 배열을 문자로 변경

[javascript] - [javascript] 자바스크립트 array 배열

[javascript] - [javascript] 자바스크립트 배열 추가 삭제 array 다루기

[javascript] - [javascript] 자바스크립트 json push, input value, 값 넣기