JavaScript에서 JSON 객체 값을 정렬하는 방법

JavaScript로 개발을 하다 보면 객체(Object)에 담긴 값들을 추출하여 오름차순으로 정렬해야 하는 경우가 종종 있습니다. 이번 글에서는 JSON 형태의 객체에서 값을 꺼내어 정렬된 배열로 변환하는 방법을 알아보겠습니다.

문제 상황

다음과 같은 객체가 있다고 가정해 보겠습니다.

const obj = {
    key1: 56,
    key2: 67,
    key3: 23,
    key4: 11,
    key5: 88
};

이 객체를 입력받아 아래와 같이 값들이 오름차순으로 정렬된 배열을 반환하는 JavaScript 함수를 작성해야 합니다.

const arr = [11, 23, 56, 67, 88];

즉, 객체의 각 키에 해당하는 값들을 모두 추출한 뒤, 숫자 크기순으로 정렬하여 새로운 배열에 담으면 됩니다.

해결 방법

이 문제는 Object.keys(), map(), sort() 세 가지 메서드를 조합하면 간단하게 해결할 수 있습니다.

• Object.keys(obj): 객체의 모든 키(key)를 배열로 반환합니다.
• map(): 각 키를 이용해 객체의 값(value)만 추출한 새 배열을 만듭니다.
• sort((a, b) => a - b): 숫자를 오름차순으로 정렬합니다. 기본 sort()는 문자열 기준으로 정렬하기 때문에 반드시 비교 함수를 전달해야 합니다.

예제 코드

const obj = {
    key1: 56,
    key2: 67,
    key3: 23,
    key4: 11,
    key5: 88
};

const sortObject = obj => {
    // 객체의 키를 배열로 가져온 후, 해당 키의 값들로 새 배열 생성
    const arr = Object.keys(obj).map(el => {
        return obj[el];
    });
    // 숫자 오름차순 정렬
    arr.sort((a, b) => {
        return a - b;
    });
    return arr;
};

console.log(sortObject(obj));

실행 결과

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

[ 11, 23, 56, 67, 88 ]

추가 팁

내림차순으로 정렬하고 싶다면 비교 함수를 (a, b) => b - a로 변경하면 됩니다. 또한 Object.values() 메서드를 사용하면 map 과정 없이 한 번에 값 배열을 얻을 수 있어 코드를 더욱 간결하게 만들 수 있습니다.

const sortObject = obj => Object.values(obj).sort((a, b) => a - b);

이처럼 JavaScript의 내장 메서드를 활용하면 객체 데이터를 손쉽게 정렬된 배열로 변환할 수 있습니다.