LHJ

I'm a FE developer.

8.2.7 reverse, sort 배열 정렬과 역순 정렬 - 수정

09 May 2020 » js_lj

reverse는 이름 그대로 배열 요소의 순서를 반대로 바꿉니다(수정).

const arr = [1, 2, 3, 4, 5];
arr.reverse(); // arr은 이제 [5, 4, 3, 2, 1] 입니다.

sort는 배열 요소의 순서를 정렬합니다.

const arr = [5, 3, 2, 4, 1];
arr.sort(); // arr은 이제 [1, 2, 3, 4, 5] 입니다.

sort는 정렬 함수를 받을 수 있습니다.
이 기능은 매우 편리합니다.
예를 들어 일반적으로는 객체가 들어있는 배열을 정렬할 수 없지만, 정렬 함수를 사용하면 가능합니다.

const arr = [
    {name: "Suzanne"}, 
    {name: "Jim"}, 
    {name: "Trevor"}, 
    {name: "Amanda"}
];

// 오름차순
arr.sort((a, b) => {
    console.log(a);
    console.log(b);
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});

// 간단하게 (오름차순)
arr.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);

// 내림차순
arr.sort((a, b) => {
    console.log(a);
    console.log(b);
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
});
// 간단하게 (내림차순)
arr.sort((a, b) => a.name > b.name ? -1 : a.name < b.name ? 1 : 0);

// name 프로퍼티의 두 번째 글자의 알파벳 순서로 정렬
arr.sort((a, b) => {
    console.log(a);
    console.log(b);
    return a.name[1] < b.name[1] ? -1 : a.name[1] > b.name[1] ? 1 : 0;
});

// name 프로퍼티의 두 번째 글자의 알파벳 역순으로 정렬
arr.sort((a, b) => {
    console.log(a);
    console.log(b);
    return a.name[1] > b.name[1] ? -1 : a.name[1] < b.name[1] ? 1 : 0;
});

TIP
이 예제의 정렬 함수에서는 불리언을 반환했지만, 숫자를 반환하는 함수도 쓸 수 있습니다.
0이 반환되면 sort는 요소가 순서상 같다고 간주하고 순서를 바꾸지 않습니다.
이를 응용하면 알파벳 순으로 정렬하면서 k로 시작하는 단어만 원래 순서를 유지한다는 식의 응용이 가능합니다.
즉, k로 시작하는 단어는 j로 시작하는 어떤 단어보다 뒤에 있고 i로 시작하는 어떤 단어보다 앞에 있지만,
k로 시작하는 단어들은 순서를 그대로 유지하는 겁니다.

const arr = [
    {name: "Suzanne"}, 
    {name: "Jim"}, 
    {name: "Trevor"}, 
    {name: "Tree"},
    {name: "Tara"},
    {name: "Amanda"}
];
arr.sort((a, b) => {
    console.log(a);
    console.log(b);
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});

const arr = [
    {name: "Suzanne"}, 
    {name: "Jim"}, 
    {name: "Trevor"}, 
    {name: "Tree"},
    {name: "Tara"},
    {name: "Amanda"}
];
arr.sort((a, b) => a.name[0] < b.name[0] ? -1 : a.name[0] > b.name[0] ? 1 : 0);