[JS] 자바스크립트 객체 배열(JSON) 순위/랭킹 정렬하기

 

 



 

 

 

객체 배열 정렬

 

 

 

이전 자바스크립트로 만든 테트리스 게임에서 랭킹 순위 보여주는 기능을 구현하는 도중 객체 배열을 정렬해야하는 기능이 필요해 공부해보았습니다. 정렬 기능은 기존 자바스크립트에 sort() 함수를 이용했고, 사용법은 정말 간단합니다.

 

 

우선 아래와 같은 객체 배열을 선언하겠습니다.

 

const rank = [
    {
        "name" : "홍길동",
        "score" : 100
    },
    {
        "name" : "신사임당",
        "score" : 650
    },
    {
        "name" : "이순신",
        "score" : 300
    }
];

 

객체 배열 안에는 이름과 점수만 들어있습니다. 여기서 정렬하기 위해서 score를 사용합니다.

 

 

 

객체 배열 오름차순

 

const rank = [
    {
        "name" : "홍길동",
        "score" : 100
    },
    {
        "name" : "신사임당",
        "score" : 650
    },
    {
        "name" : "이순신",
        "score" : 300
    }
];

rank.sort((a, b) => {
	return a.score - b.score
});

console.log(rank);

//(3) [{…}, {…}, {…}]
//0: {name: "홍길동", score: 100}
//1: {name: "이순신", score: 300}
//2: {name: "신사임당", score: 650}

 

 

---

 

 

객체 배열 내림차순

 

const rank = [
    {
        "name" : "홍길동",
        "score" : 100
    },
    {
        "name" : "신사임당",
        "score" : 650
    },
    {
        "name" : "이순신",
        "score" : 300
    }
];

rank.sort((a, b) => {
	return a.score - b.score
});

console.log(rank);

//(3) [{…}, {…}, {…}]
//0: {name: "신사임당", score: 650}
//1: {name: "이순신", score: 300}
//2: {name: "홍길동", score: 100}

 

 

오름차순과 내림차순의 차이첨은 sort() 함수에서 리턴값에 차이가 날 뿐이고 a와 b의 위치만 바꾸어주면 된다. 객체 배열이기 때문에 score를 비교하기 위해 a.score와 b.score를 사용