JavaScript에서 조건에 따라 배열을 재정렬하는 방법

카드 게임에서 여러 플레이어의 점수를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.

const scorecard = [{
    name: "Zahir",
    score: 23
}, {
        name: "Kabir",
        score: 13
}, {
        name: "Kunal",
        score: 29
}, {
        name: "Arnav",
        score: 42
}, {
        name: "Harman",
        score: 19
}, {
        name: "Rohit",
        score: 41
}, {
        name: "Rajan",
        score: 34
}];

또한 특정 플레이어의 이름을 담고 있는 selfName이라는 변수가 하나 있습니다.

const selfName = 'Arnav';

문제 상황

여기서 우리가 작성해야 할 함수는 다음 두 가지 조건을 만족해야 합니다.

첫째, scorecard 배열을 이름 기준 알파벳 순으로 정렬해야 합니다.
둘째, 이름이 selfName과 일치하는 객체는 반드시 맨 앞(인덱스 0)에 위치해야 합니다.

즉, 나머지 플레이어들은 알파벳 순서대로 정렬되되, 해당 플레이어만 항상 최상단에 고정되는 것입니다.

해결 방법

이 문제는 JavaScript의 sort() 메서드에 사용자 정의 비교 함수(comparator)를 전달하는 방식으로 해결할 수 있습니다. 비교 함수의 동작 원리는 다음과 같습니다.

비교 대상 중 한쪽의 이름이 selfName과 같으면 음수(-1) 또는 양수(1)를 반환하여 해당 객체를 앞쪽으로 밀어냅니다.
두 이름 모두 selfName이 아니라면, 일반적인 문자열 비교를 통해 알파벳 순으로 정렬합니다.

그럼 실제 코드를 작성해 보겠습니다.

예제 코드

const scorecard = [{
    name: "Zahir",
    score: 23
}, {
        name: "Kabir",
        score: 13
}, {
        name: "Kunal",
        score: 29
}, {
        name: "Arnav",
        score: 42
}, {
        name: "Harman",
        score: 19
}, {
        name: "Rohit",
        score: 41
}, {
        name: "Rajan",
        score: 34
}];
const selfName = 'Arnav';
const sorter = (a, b) => {
    if(a.name === selfName){
        return -1;
    };
    if(b.name === selfName){
        return 1;
    };
    return a.name < b.name ? -1 : 1;
};
scorecard.sort(sorter);
console.log(scorecard);

출력 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[
    { name: 'Arnav', score: 42 },
    { name: 'Harman', score: 19 },
    { name: 'Kabir', score: 13 },
    { name: 'Kunal', score: 29 },
    { name: 'Rajan', score: 34 },
    { name: 'Rohit', score: 41 },
    { name: 'Zahir', score: 23 }
]

코드 설명

출력 결과를 보면 'Arnav'가 맨 앞에 위치하고, 나머지 플레이어들은 Harman → Kabir → Kunal → Rajan → Rohit → Zahir 순으로 알파벳순 정렬된 것을 확인할 수 있습니다.

비교 함수 sorter의 로직을 자세히 살펴보면 다음과 같습니다.

a.name === selfName일 때 -1을 반환하면, a가 b보다 앞에 와야 함을 의미합니다.
b.name === selfName일 때 1을 반환하면, b가 a보다 앞에 와야 함을 의미합니다.
그 외의 경우에는 a.name < b.name 비교를 통해 사전순으로 정렬합니다.

이처럼 sort() 메서드의 비교 함수를 활용하면 단순 정렬을 넘어, 특정 조건을 가진 요소를 원하는 위치에 배치하는 유연한 정렬 로직을 손쉽게 구현할 수 있습니다.