JavaScript에서 JSON 객체를 배열로 변환하는 방법 완벽 정리

문제 상황

다음과 같이 인덱스 키("0", "1", "2"...)가 문자열 값에 매핑된 JSON 객체가 있다고 가정해 보겠습니다.

const obj = {
    "0": "Rakesh",
    "1": "Dinesh",
    "2": "Mohit",
    "3": "Rajan",
    "4": "Ashish"
};

이러한 객체를 입력으로 받아, 객체의 값들을 활용해 하나의 배열을 만들어 반환하는 JavaScript 함수를 작성해야 합니다.

해결 방법 1: Object.keys() 활용

가장 기본적인 접근 방식은 Object.keys()로 객체의 모든 키를 가져온 뒤, 각 키에 해당하는 값을 새로운 배열에 할당하는 것입니다. 키를 숫자로 변환하기 위해 단항 더하기 연산자(+)를 사용한다는 점에 주목하세요.

const obj = {
    "0": "Rakesh",
    "1": "Dinesh",
    "2": "Mohit",
    "3": "Rajan",
    "4": "Ashish"
};
const objectToArray = (obj) => {
    const res = [];
    const keys = Object.keys(obj);
    keys.forEach(el => {
        res[+el] = obj[el];
    });
    return res;
};
console.log(objectToArray(obj));

출력 결과

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

[ 'Rakesh', 'Dinesh', 'Mohit', 'Rajan', 'Ashish' ]

해결 방법 2: Object.values()로 더 간단하게

ES2017부터 도입된 Object.values() 메서드를 사용하면 훨씬 간결하게 처리할 수 있습니다. 이 메서드는 객체의 값만 모아 바로 배열로 반환해 주기 때문입니다.

const objectToArray = (obj) => Object.values(obj);
console.log(objectToArray(obj));
// [ 'Rakesh', 'Dinesh', 'Mohit', 'Rajan', 'Ashish' ]

정리

인덱스 키를 가진 JSON 객체를 배열로 변환할 때는 Object.keys()와 반복문을 조합하는 방식과 Object.values()를 사용하는 방식이 대표적입니다. 키를 기준으로 추가 가공이 필요하다면 첫 번째 방법이, 단순히 값만 배열로 만들면 된다면 Object.values()가 가장 간단하고 효율적인 선택입니다.