JavaScript에서 기준 배열의 순서대로 객체 배열 정렬하는 방법

실무에서는 문자열로 이루어진 기준(참조) 배열이 있고, 그 순서에 맞춰 객체 배열을 정렬해야 하는 경우가 종종 발생합니다. 예를 들어 카테고리 표시 순서나 사용자 지정 정렬 옵션을 처리할 때 유용하게 쓰이는 패턴입니다. 이번 글에서는 기준 배열의 순서에 따라 객체 배열을 정렬하는 방법을 알아보겠습니다.

문제 상황

다음과 같이 문자열 배열 하나와 객체 배열 하나가 있다고 가정해 보겠습니다.

const sort = ["this","is","my","custom","order"];
const myObjects = [
    {"id":1,"content":"is"},
    {"id":2,"content":"my"},
    {"id":3,"content":"this"},
    {"id":4,"content":"custom"},
    {"id":5,"content":"order"}
];

우리가 작성해야 할 함수는 이 두 배열을 입력으로 받아, 첫 번째 배열(기준 배열)의 순서에 맞춰 두 번째 객체 배열을 정렬하는 역할을 합니다. 즉, 각 객체의 content 속성 값이 기준 배열의 문자열 순서와 일치하도록 만들어야 합니다.

따라서 위 배열에 대한 최종 출력 결과는 다음과 같아야 합니다.

const output = [
    {"id":3,"content":"this"},
    {"id":1,"content":"is"},
    {"id":2,"content":"my"},
    {"id":4,"content":"custom"},
    {"id":5,"content":"order"}
];

구현 예제

가장 직관적인 접근 방식은 기준 배열을 순회하면서 일치하는 객체를 찾아 새 배열에 담는 것입니다. 코드는 다음과 같습니다.

const arrLiteral = ["this","is","my","custom","order"];
const arrObj = [
    {"id":1,"content":"is"},
    {"id":2,"content":"my"},
    {"id":3,"content":"this"},
    {"id":4,"content":"custom"},
    {"id":5,"content":"order"}
];
const sortByReference = (arrLiteral, arrObj) => {
    const sorted = arrLiteral.map(el => {
        for(let i = 0; i < arrObj.length; ++i){
            if(arrObj[i].content === el){
                return arrObj[i];
            }
        };
    });
    return sorted;
};
console.log(sortByReference(arrLiteral, arrObj));

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
    { id: 3, content: 'this' },
    { id: 1, content: 'is' },
    { id: 2, content: 'my' },
    { id: 4, content: 'custom' },
    { id: 5, content: 'order' }
]

코드 동작 원리

이 코드의 핵심은 map() 메서드입니다. 기준 배열(arrLiteral)의 각 문자열을 순회하면서, 객체 배열(arrObj) 안에서 해당 문자열과 일치하는 content 속성을 가진 객체를 찾아 반환합니다. 결과 배열은 자연스럽게 기준 배열의 순서를 그대로 따르게 됩니다.

성능 개선 팁

위 방식은 기준 배열의 요소마다 객체 배열 전체를 탐색하므로 시간 복잡도가 O(n²)입니다. 데이터 양이 많다면 Map 객체를 활용해 조회 비용을 O(1)로 줄일 수 있습니다.

const sortByReferenceFast = (order, arrObj) => {
    const map = new Map(arrObj.map(obj => [obj.content, obj]));
    return order.map(el => map.get(el));
};

console.log(sortByReferenceFast(arrLiteral, arrObj));

먼저 객체 배열을 Map으로 변환해 content 값을 키로 저장한 뒤, 기준 배열의 순서대로 값을 꺼내오는 방식입니다. 대량의 데이터를 다룰 때는 이 방법이 훨씬 효율적입니다.