JavaScript에서 하나의 객체를 키/값 쌍별 객체 배열로 분리하는 방법

JavaScript로 개발하다 보면 하나의 객체에 담긴 여러 키/값 쌍을 각각 독립된 객체로 분리해야 하는 경우가 종종 있습니다. 예를 들어 다음과 같은 객체가 있다고 가정해 보겠습니다.

const obj = {
    "value 0": "value",
    "value 1": "value",
    "value 2": "value",
    "value 3": "value",
    "value 4": "value",
    "value 5": "value",
    "value 6": "value",
    "value 7": "value",
    "value 8": "value",
    "value 9": "value"
};

목표는 이 객체를 입력으로 받아, 각 키와 값의 쌍이 별도의 객체로 분리된 새로운 객체 배열을 반환하는 함수를 작성하는 것입니다.

해결 방법

Object.keys() 메서드를 사용하면 객체의 모든 키를 배열 형태로 가져올 수 있고, 이를 순회하면서 각 키에 해당하는 값을 새로운 객체에 담아 배열에 추가하면 됩니다.

const obj = {
    "value 0": "value",
    "value 1": "value",
    "value 2": "value",
    "value 3": "value",
    "value 4": "value",
    "value 5": "value",
    "value 6": "value",
    "value 7": "value",
    "value 8": "value",
    "value 9": "value"
};
const separateObject = obj => {
    const res = [];
    const keys = Object.keys(obj);
    keys.forEach(key => {
        res.push({
            key: obj[key]
        });
    });
    return res;
};
console.log(separateObject(obj));

출력 결과

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

[
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' },
    { key: 'value' }
]

코드 동작 원리

위 코드의 동작 과정을 단계별로 살펴보면 다음과 같습니다.

Object.keys(obj)가 원본 객체의 모든 키를 담은 배열을 반환합니다.
forEach()로 각 키를 순회하며, 키와 그에 대응하는 값으로 구성된 새로운 객체를 생성합니다.
생성된 객체를 push()로 결과 배열(res)에 차례대로 추가합니다.
모든 순회가 끝나면 완성된 객체 배열을 반환합니다.

참고 1: map()을 활용한 간결한 작성법

forEach() 대신 map()을 사용하면 동일한 결과를 훨씬 간결하게 얻을 수 있습니다.

const separateObject = obj =>
    Object.keys(obj).map(key => ({ key: obj[key] }));

참고 2: 원본 키 이름을 유지하고 싶다면

위 예제에서는 모든 분리된 객체가 고정된 속성 이름 key를 갖게 됩니다. 만약 각 객체가 원본 객체의 실제 키 이름(예: "value 0", "value 1")을 그대로 유지하기를 원한다면, 계산된 속성명(computed property) 문법인 대괄호 []를 사용하면 됩니다.

const separateObject = obj =>
    Object.keys(obj).map(key => ({ [key]: obj[key] }));

// 출력 예시:
// [ { 'value 0': 'value' }, { 'value 1': 'value' }, ... ]

이처럼 Object.keys()와 배열 메서드를 조합하면 복잡한 반복문 없이도 객체를 손쉽게 변환할 수 있으며, 상황에 맞게 속성명을 고정할지 원본 키를 유지할지만 결정하면 됩니다.