2022.08.15 TIL : [자바스크립트] sort()

✅Array.sort()

 

백준을 풀다가 보면 배열 내의 문자의 길이를 오름차순으로 정렬, 숫자를 내림차순으로 정렬하라는 요구사항이 많습니다.

 

이 함수를 알기 전에는 for 문으로 반복문을 구성해서... 인덱스로 접근해서 다음 인덱스랑 비교하고... 난리를 피웠는데,

sort()는 굉장히 유용하더라고요!

 

하지만 처음 sort()를 보면 직관적으로 쉽게 해석되지가 않기 때문에 정확한 이해를 위해 정리해봅니다.

 

 

sort() 함수는 기본적으로 오름차순으로 정렬이 됩니다.

let array = [3,9,2,6,1];

console.log(array.sort());
//[1, 2, 3, 6, 9]

하지만 먼저 각 요소를 문자열로 반환해서 비교를 하기 때문에

let array = [3,20,10,2,30,1];

console.log(array.sort());
//[1, 10, 2, 20, 3, 30]

이러한 결과가 나옵니다. 저희가 원했던 결과는 아니죠?

 

따라서 제대로 정렬을 해주고 싶다면, sort()에 비교 함수를 입력해주어야 합니다.

 

let array = [3, 20, 10, 2, 30, 1];

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

console.log(array);
//[1, 2, 3, 10, 20, 30]

 

제대로 나왔죠?

 

비교함수를 보시면 다소 직관적이지 않을 수 있습니다. 

 

비교함수는 배열의 요소 a,b를 인자로 받는데, index[0]을 기준으로 array[0]이 b, array[1]이 a 입니다. (순서 주의)

 

a - b의 값이 양수면 (1을 반환) a가 b 보다 크다는 뜻이고, 배열의 순서를 그대로 두지만,

a - b의 값이 음수면 (-1을 반환) a가 b 보다 작다는 뜻이며 a가 b의 앞 쪽으로 가게 됩니다.

a - b의 값이 0이면 바꿀 필요가 없으니 그대로 놔두겠죠?

 

즉 sort()는 -1, 0, 1 에 따라 내부가 동작합니다.

 

반대로 내림차순으로 정렬하고 싶다면, a - b 대신 b - a 로 입력해주면 됩니다.

 

let array = [3, 20, 10, 2, 30, 1];

array.sort(function (a, b) {
    console.log(a,b);
    return b - a;
});

console.log(array);
//[30, 20, 10, 3, 2, 1]

 

 

화살표 함수로 간결하게 이렇게 나타낼 수 있겠죠.

let array = [3, 20, 10, 2, 30, 1];

array.sort((a, b)=> b - a);

console.log(array);

그렇다면 응용을 해볼까요?

 

const animals = [
    {name : 'monkey', size: 'medium', weight: 7},
    {name : 'cat', size: 'small', weight: 5},
    {name : 'lion', size: 'big', weight: 30},
    {name : 'mouse', size: 'small', weight: 3},
    {name : 'dog', size: 'medium', weight: 7},
];

animals.sort((a,b)=> (a.name > b.name ? 1 : -1));

console.log(animals);

 

a.name 이 b.name 보다 크다면

(a.name 첫 번째 알파벳의 순서가 b.name 첫 번째 알파벳의 순서보다 나중에 나온다면)

1을 반환하고

(순서 유지),

그렇지 않으면 -1을 반환한다

(순서 바꿈).

성공적이네요!