JavaScript에서 객체를 키 값 기준으로 정렬하는 방법

개요

JavaScript에서 다루는 데이터 중에는 문자열 리터럴을 키(key)로 가지고, 각 키의 값(value) 역시 객체로 구성된 형태의 데이터가 자주 등장합니다. 이런 '객체의 객체' 구조에서는 특정 순서대로 데이터를 정렬해야 할 필요가 생기곤 하는데요, 이번 글에서는 객체의 키를 기준으로 전체 객체를 정렬하는 방법을 알아보겠습니다.

먼저 아래와 같이 회사 이름을 키로, 직원 수·가치·CEO 정보를 담은 객체를 값으로 가지는 데이터가 있다고 가정해 보겠습니다.

const companies = {
    'landwaves ltd': {employees: 1200, worth: '1.2m', CEO: 'Rajiv Bansal'},
    'colin & co': {employees: 200, worth: '0.2m', CEO: 'Sukesh Maheshwari'},
    'motilal biscuits': {employees: 975, worth: '1m', CEO: 'Rahul Gupta'},
    'numbtree': {employees: 1500, worth: '1.5m', CEO: 'Jay Kumar'},
    'solace pvt ltd': {employees: 1800, worth: '1.65m', CEO: 'Arvind Sangal'},
    'ambicure': {employees: 170, worth: '0.1m', CEO: 'Preetam Chawla'},
    'dis n dat': {employees: 540, worth: '1m', CEO: 'Mohit Sharma'},
}

여기서 우리가 작성해야 할 함수는 객체를 키 순서대로(알파벳순) 정렬한 새로운 객체를 반환하는 함수입니다.

구현 방법

핵심 로직은 다음과 같습니다.

Object.entries()를 사용해 객체를 [키, 값] 쌍의 배열로 변환합니다.
배열에 내장된 sort() 메서드를 호출하여 키를 기준으로 오름차순 정렬합니다.
map()으로 각 엔트리를 다시 하나의 객체 형태로 만든 뒤,
Object.assign()과 스프레드 연산자(...)를 활용해 모든 객체를 하나로 병합합니다.

이 과정을 코드로 구현하면 아래와 같습니다.

const companies = {
    'landwaves ltd': {employees: 1200, worth: '1.2m', CEO: 'Rajiv Bansal'},
    'colin & co': {employees: 200, worth: '0.2m', CEO: 'Sukesh Maheshwari'},
    'motilal biscuits': {employees: 975, worth: '1m', CEO: 'Rahul Gupta'},
    'numbtree': {employees: 1500, worth: '1.5m', CEO: 'Jay Kumar'},
    'solace pvt ltd': {employees: 1800, worth: '1.65m', CEO: 'Arvind Sangal'},
    'ambicure': {employees: 170, worth: '0.1m', CEO: 'Preetam Chawla'},
    'dis n dat': {employees: 540, worth: '1m', CEO: 'Mohit Sharma'},
};

const sortKeys = (obj) => {
    return Object.assign(...Object.entries(obj).sort().map(([key, value]) => {
        return {
            [key]: value
        }
    }));
};

console.log(sortKeys(companies));

코드 설명

Object.entries(obj)는 객체를 이터러블한 배열로 바꿔주므로 sort()를 바로 적용할 수 있습니다. 정렬된 결과를 [key]: value 형태의 객체로 매핑한 후, Object.assign(...)이 이 객체들을 하나의 객체로 합쳐 줍니다. 덕분에 원본 객체는 변경되지 않고, 정렬된 새로운 객체만 반환됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 키가 알파벳순으로 정렬된 객체가 출력됩니다.

{
    ambicure: { employees: 170, worth: '0.1m', CEO: 'Preetam Chawla' },
    'colin & co': { employees: 200, worth: '0.2m', CEO: 'Sukesh Maheshwari' },
    'dis n dat': { employees: 540, worth: '1m', CEO: 'Mohit Sharma' },
    'landwaves ltd': { employees: 1200, worth: '1.2m', CEO: 'Rajiv Bansal' },
    'motilal biscuits': { employees: 975, worth: '1m', CEO: 'Rahul Gupta' },
    numbtree: { employees: 1500, worth: '1.5m', CEO: 'Jay Kumar' },
    'solace pvt ltd': { employees: 1800, worth: '1.65m', CEO: 'Arvind Sangal' }
}

마무리

이처럼 Object.entries(), sort(), Object.assign() 세 가지만 조합하면 별도의 외부 라이브러리 없이도 객체를 손쉽게 키 기준으로 정렬할 수 있습니다. 참고로 최신 환경에서는 Object.fromEntries()를 사용하면 코드를 더욱 간결하게 작성할 수 있습니다.

const sortKeys = (obj) => Object.fromEntries(Object.entries(obj).sort());