JavaScript로 객체 안의 객체를 position 속성 기준으로 정렬하는 방법

JavaScript에서 다음과 같이 하나의 객체 안에 여러 객체가 중첩된 구조(Object of Objects)를 다루다 보면, 내부 객체들을 특정 속성 값 기준으로 정렬해야 하는 경우가 종종 발생합니다.

const obj = {
    "CAB": {
        name: 'CBSSP',
        position: 2
    },
    "NSG": {
        name: 'NNSSP',
        position: 3
    },
    "EQU": {
        name: 'SSP',
        position: 1
    }
};

위 예제에서 각 하위 객체는 name과 position 속성을 가지고 있습니다. 우리가 작성해야 할 함수는 이러한 객체를 입력받아, 하위 객체의 position 속성 값을 기준으로 오름차순 또는 내림차순으로 정렬된 새로운 객체를 반환하는 것입니다.

정렬 로직 살펴보기

객체 자체에는 배열처럼 sort() 메서드를 직접 사용할 수 없기 때문에, 다음과 같은 단계로 접근합니다.

• Object.keys() 메서드로 원본 객체의 모든 키를 배열 형태로 가져옵니다.
• 각 키에 해당하는 하위 객체의 position 값을 확인하여, position 순서대로 키가 배치된 order 배열을 만듭니다.
• order 배열을 순회하면서 새로운 빈 객체 res에 키와 값을 순서대로 삽입합니다.

ES2015(ES6) 이후의 JavaScript 엔진은 문자열 키에 대해 객체에 삽입된 순서를 유지하기 때문에, 이 방식으로 만들어진 객체의 키 순서는 안정적으로 보장됩니다.

예제 코드

실제 동작하는 전체 코드는 다음과 같습니다.

const obj = {
    "CAB": {
        name: 'CBSSP',
        position: 2
    },
    "NSG": {
        name: 'NNSSP',
        position: 3
    },
    "EQU": {
        name: 'SSP',
        position: 1
    }
};
const sortByPosition = obj => {
    const order = [], res = {};
    Object.keys(obj).forEach(key => {
        return order[obj[key]['position'] - 1] = key;
    });
    order.forEach(key => {
        res[key] = obj[key];
    });
    return res;
}
console.log(sortByPosition(obj));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다. 하위 객체들이 position 값(1 → 2 → 3)을 기준으로 올바르게 재배치된 것을 확인할 수 있습니다.

{
    EQU: { name: 'SSP', position: 1 },
    CAB: { name: 'CBSSP', position: 2 },
    NSG: { name: 'NNSSP', position: 3 }
}

내림차순으로 정렬하고 싶다면 order[obj[key]['position'] - 1] 부분을 역방향 인덱스로 계산하거나, 최종 결과 객체의 키 순서를 뒤집으면 됩니다. 이 패턴은 position 외에도 날짜, 이름 등 다른 속성 기준 정렬에도 응용할 수 있다는 점을 기억해 두면 유용합니다.