[JavaScript 내장함수 다루기 ①] Array.Prototype.Sort, 자바스크립트로 정렬하기

Array.Prototype.sort(sortFunc)

JavaScript로 코딩테스트 문제를 풀다보면, sort 함수를 사용해서 값들을 정리하는 경우가 많다.

배열의 내장함수인 sort 함수에 대해서 알아보자.

문자열 정렬은 ASCII 문자 순서대로

// 문자열 정렬
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

// 숫자 정렬
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

매개변수가 없는 상황에서 sort 함수를 실행하면, 다음과 같은 결과값이 나온다. 문자 정렬은 우리가 기대한 결과지만, 숫자는 그렇지 않다. 왜 그럴까? 그 까닭은 sort 함수의 매개변수를 생략했을 때 오름차순, ASCII 문자 순서로 정렬되는데 100000을 구성하는 1과 0의 ascii code가 나머지 값보다 작기 때문이다. 따라서 숫자를 정렬하기에는 적합하지 않다.

숫자는 어떻게 정렬할 수 있을까?

답은 sort 함수의 콜백함수에 있다. 콜백함수를 지정하면, 세가지 경우 중 하나가 반환되는데

• 첫 번째 인수가 두 번째 인수보다 작을 경우 : - 값
• 두 인수가 같을 경우 : 0
• 첫 번째 인수가 두 번째 인수보다 클 경우 : + 값

const array = [3, 30, 34, 5, 9];
array.sort((a, b) => {
        console.log(a - b < 0); // true 반환 (오름차순 정렬), 첫번째 인자가 더 작은 경우
        return a - b;
    }
);
array.sort((a, b) => 
array.sort((a, b) => {
        console.log(b - a > 0); // true 반환 (내림차순 정렬), 두번째 인자가 더 큰 경우
        return b - a;
    }
);

위와 같이 첫번째 인자가 더 작고 함수의 리턴값이 - 값이면 오름차순으로 정렬되고 두번째 인자가 더 크고 리턴 값으로 +값이 반환되면 내림차순으로 정렬되는 것을 알 수 있다.

객체는 어떻게 정렬할까?

자바스크립트의 객체를 정렬하는 것은 까다로운 일이다. 하지만 배열의 내장함수 sort를 사용하면, 위와 같이 숫자를 배열하듯 손쉽게 정렬할 수 있다. 방법은 다음과 같다. 먼저 정렬하고 싶은 객체들을 하나의 배열 안에 넣어준다. 예를 들어, 아래와 같이 배열 안에 객체(key와 value로 이루어진 값)가 있다고 해보자.

const songs = [];
let obj;
for (let i = 0; i < len; i++) {
    obj = {};
    obj.index = i;
    obj.genre = genres[i];
    obj.play = plays[i];
    songs.push(obj);
  }

console.log(songs); 

// [{ index: 0, genre: 'classic', play: 500 }, 
// { index: 1, genre: 'pop', play: 600 }, 
// { index: 2, genre: 'classic', play: 150 }, 
// { index: 3, genre: 'classic', play: 800 },
// { index: 4, genre: 'pop', play: 2500 }]

객체의 key 값인 play를 기준으로 가장 많이 재생된 곡들을 기준으로 배열을 정리하고 싶으면 객체의 필드 값을 참조하여, 해당 필드 값을 내림차순으로 정렬해주면 된다. 그러면 아래와 같이 정렬된 모습을 볼 수 있다.

songs.sort((a, b) => b.play - a.play);

// [{ index: 4, genre: 'pop', play: 2500 }, 
// { index: 3, genre: 'classic', play: 800 },
// { index: 1, genre: 'pop', play: 600 }, 
// { index: 0, genre: 'classic', play: 500 },
// { index: 2, genre: 'classic', play: 150 }]

이상으로 자바스크립트에서 자주 쓰이는 sort 함수에 관하여 알아보았다. 다음 시간에는 그 다음으로 자주 쓰이는 filter 함수에 관하여 정리해보겠다.