다른 키 배열을 기준으로 객체 배열 정렬하기 - JavaScript

문제 상황

다음과 같은 두 개의 배열이 있다고 가정해 보겠습니다.

const arr1 = ['d','a','b','c'];
const arr2 = [{a:1},{c:3},{d:4},{b:2}];

여기서 우리는 이 두 배열을 인자로 받는 자바스크립트 함수를 작성해야 합니다. 이 함수는 첫 번째 배열(arr1)의 요소 순서를 기준으로 두 번째 배열(arr2)을 정렬하는 역할을 합니다.

다시 말해, 두 번째 배열에 담긴 객체들의 키를 첫 번째 배열의 요소 순서에 맞춰 재배치해야 하며, 최종적으로 다음과 같은 결과가 나와야 합니다.

const output = [{d:4},{a:1},{b:2},{c:3}];

해결 방법

이 문제는 Array.prototype.sort() 메서드와 Object.keys(), indexOf()를 조합하면 간단하게 해결할 수 있습니다. 전체 코드는 다음과 같습니다.

const arr1 = ['d','a','b','c'];
const arr2 = [{a:1},{c:3},{d:4},{b:2}];

const sortArray = (arr1, arr2) => {
  arr2.sort((a, b) => {
    const aKey = Object.keys(a)[0];
    const bKey = Object.keys(b)[0];
    return arr1.indexOf(aKey) - arr1.indexOf(bKey);
  });
};

sortArray(arr1, arr2);
console.log(arr2);

코드 동작 원리

1. 키 추출: 각 객체는 단일 키-값 쌍으로 이루어져 있으므로, Object.keys(obj)[0]를 사용해 객체의 유일한 키를 가져옵니다.
2. 순서 비교: indexOf()로 각 키가 참조 배열(arr1)에서 위치한 인덱스를 구한 뒤, 그 차이를 반환합니다.
3. 정렬 수행: 반환값이 음수면 a가 앞으로, 양수면 b가 앞으로 오도록 sort()가 자동으로 요소 순서를 조정합니다.

실행 결과

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

[ { d: 4 }, { a: 1 }, { b: 2 }, { c: 3 } ]

두 번째 배열이 참조 배열 ['d', 'a', 'b', 'c']의 순서와 정확히 일치하도록 정렬된 것을 확인할 수 있습니다. 이 방식은 특정 순서를 정의한 별도의 배열을 기준으로 데이터를 재정렬해야 할 때 매우 유용하게 활용됩니다.