[Javascript] 자바스크립트 배열 정렬 sort를 알아보자

sort() 이제 그만 찾아보고 제대로 정리해두자.

정렬 문법

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

arr.sort([compareFunction]);

---

사용법

let sortArr = [3, 10, 2, 1];

// 요렇게 하면?
sortArr.sort();

console.log(sortArr); // [1, 10, 2, 3] 원하는 값이 나오지 않는다...

 

문자열로 변환 되어 유니코드 순으로 정렬되기 때문입니다.
새로운 정렬 기준을 얻기 위해선 sortArr.sort()에 함수를 넣어줍시다.

 

let sortArr = [3, 10, 2, 1];

// 요렇게 하면?
sortArr.sort(function(a, b){
    if(a > b) return 1;
    if(a === b) return 0;
    if(a < b) return -1;
});

console.log(sortArr); // [1, 2, 3, 10] 성공!

 

내부에 함수를 넣어주게 되면 a와 b의 값에 정렬하고자 하는 배열의 값이 차례대로 들어옵니다.
그 둘을 비교해서 return 값을 -1(음수)을 주면 순서를 바꿔줍니다.

이를 응용하면

 

let sortArr = [3, 10, 2, 1];

// 둘이 빼기연산
sortArr.sort(function(a, b){
    return a-b;
});

console.log(sortArr); // [1, 2, 3, 10]

이렇게 바꿀 수 있습니다.

---

응용

저렇게 간단하게만 값을 준다면 좋겠지만...
조금 더 복잡한 경우를 찾아봅시다.

• 객체안에 ranking 값으로 정렬을 원하는 경우

let sortArr = [
    {"id":1, ranking:3},
    {"id":2, ranking:5},
    {"id":3, ranking:2},
    {"id":4, ranking:1},
    {"id":5, ranking:4},
];

// 객체니까 key 값으로 접근...
sortArr.sort(function(a, b){
    return a.ranking - b.ranking;
});

/*
    결과
    0: {id: 4, ranking: 1}
    1: {id: 3, ranking: 2}
    2: {id: 1, ranking: 3}
    3: {id: 5, ranking: 4}
    4: {id: 2, ranking: 5}
*/

 

• ranking 값으로 정렬 - 추가로 ranking 값이 0일 경우는 맨 아래로(들어온 순서대로)

let sortArr = [
    {"id":1, ranking:3},
    {"id":2, ranking:5},
    {"id":3, ranking:0},
    {"id":4, ranking:1},
    {"id":5, ranking:4},
    {"id":6, ranking:0},
    {"id":7, ranking:2},
];

sortArr.sort(function(a, b){
    if (a.ranking == 0) {
        // ranking 값이 int라면 a.ranking == 0 대신
        // !a.ranking 조건으로 넣어도 됨.
        // 뒤의 값이 0 인경우는 순서 바꾸지 않음.
        return 1;
    } else if (b.ranking == 0) { 
        // ranking 값이 int라면 b.ranking == 0 대신
        // !b.ranking 조건으로 넣어도 됨.
        // 앞의 값이 0 인경우는 순서 바꿈
        return -1;
    }

    return a.ranking - b.ranking;    
});

/*
    결과
    0: {id: 4, ranking: 1}
    1: {id: 7, ranking: 2}
    2: {id: 1, ranking: 3}
    3: {id: 5, ranking: 4}
    4: {id: 2, ranking: 5}
    5: {id: 3, ranking: 0}
    6: {id: 6, ranking: 0}
*/

 

• ranking 값으로 정렬
• 추가: ranking 값이 0이거나, 없거나, null이거나, undefined 인경우 맨 아래로(들어온 순서대로)
• 추가: ranking 값은 문자열로 올수도 있음 예) "ranking": "3"

let sortArr = [
    {"id":1, ranking:3},
    {"id":2, ranking:null},
    {"id":3, ranking:"1"},
    {"id":4, ranking:4},
    {"id":5, ranking:"0"},
    {"id":6},
    {"id":7, ranking:2},
    {"id":8, ranking:undefined},
    {"id":9, ranking:0},
    {"id":10, ranking:5},
];

sortArr.sort(function(a, b){
    if (!Number(a.ranking)) {
        return 1;
    } else if (!Number(b.ranking)) {
        return -1;
    }

    return a.ranking - b.ranking;    
});

/*
    0: {id: 3 ranking: '1'}
    1: {id: 7, ranking: 2}
    2: {id: 1, ranking: 3}
    3: {id: 4, ranking: 4}
    4: {id: 10, ranking: 5}
    5: {id: 2, ranking: null}
    6: {id: 5, ranking: '0'}
    7: {id: 6}
    8: {id: 8, ranking: undefined}
    9: {id: 9, ranking: 0}
*/

---

마치며

지금까지 자바스크립트 sort() 사용법을 알아보았습니다.
응용 케이스의 예처럼 현업에서는 다양한 경우가 있기 때문에 눈으로 한번 봐두시면 좋아요~
그냥 데이터를 일관적으로 주ㅅ....