자바스크립트에서 기준 배열의 순서에 따라 배열 정렬하기

자바스크립트에서 동적 배열을 정렬할 때, 알파벳순이나 숫자 크기순이 아니라 미리 정의된 표준 배열에 저장된 값의 순서를 그대로 따라야 하는 경우가 있습니다.

예를 들어 다음과 같은 동적 배열이 있다고 가정해 보겠습니다.

const dbArray = ['Apple','Banana','Mango','Apple','Mango','Mango','Apple'];

그리고 정렬 시 참조할 기준이 되는 표준 배열은 다음과 같습니다.

const stdArray = ['Mango','Apple','Banana','Grapes'];

표준 배열의 순서는 'Mango' → 'Apple' → 'Banana' → 'Grapes'입니다. 따라서 dbArray를 정렬한 결과는 아래와 같은 형태가 되어야 합니다.

const resultArray = ['Mango','Mango','Mango','Apple','Apple','Apple','Banana'];

핵심은 Array.prototype.sort() 메서드에 커스텀 비교 함수를 전달하는 것입니다. 비교 함수 안에서 각 요소가 표준 배열에서 차지하는 인덱스(indexOf)의 차이를 계산하면, 표준 배열에서 앞쪽에 있는 값일수록 결과 배열의 앞으로 정렬됩니다.

예제 코드

다음은 실제 구현 코드입니다.

const dbArray =
['Apple','Banana','Mango','Apple','Mango','Mango','Apple'];
const stdArray = ['Mango','Apple','Banana','Grapes'];

const sortByRef = (arr, ref) => {
    const sorter = (a, b) => {
        return ref.indexOf(a) - ref.indexOf(b);
    };
    arr.sort(sorter);
};

sortByRef(dbArray, stdArray);
console.log(dbArray);

코드 설명

• sorter 함수는 두 요소 a와 b를 받아, 각각이 stdArray에서 가지는 인덱스의 차이를 반환합니다.
• 반환값이 음수면 a가 앞에, 양수면 b가 앞에 오도록 정렬됩니다.
• 만약 dbArray에 표준 배열에 없는 값이 포함되어 있다면 indexOf가 -1을 반환하기 때문에 해당 요소는 자연스럽게 맨 뒤로 밀려나게 됩니다.
• sort()는 원본 배열을 직접 변경하므로, 원본을 유지하고 싶다면 정렬 전에 [...arr]처럼 복사본을 만들어 사용하는 것이 좋습니다.

출력 결과

콘솔에는 다음과 같이 출력됩니다.

[
    'Mango',  'Mango',
    'Mango',  'Apple',
    'Apple',  'Apple',
    'Banana'
]

결과를 보면 'Mango' 세 개가 가장 앞에, 그다음 'Apple' 세 개, 마지막에 'Banana'가 배치되어 표준 배열의 순서를 정확히 따르는 것을 확인할 수 있습니다.