JavaScript에서 객체의 키와 값을 별도의 객체 배열로 분할하는 방법

문제 소개

다음과 같이 여러 개의 키-값 쌍으로 이루어진 객체가 있다고 가정해 보겠습니다.

const dataset = {
    "diamonds": 77,
    "gold-bars": 28,
    "exciting-stuff": 52,
    "oil": 51,
    "sports-cars": 7,
    "bitcoins": 40
};

우리가 작성해야 할 것은, 이러한 객체를 입력받아 각 키(key)와 그에 대응하는 값(value)이 하나의 객체로 분리된 형태의 배열을 반환하는 자바스크립트 함수입니다.

따라서 위 객체를 변환했을 때 기대되는 출력 결과는 다음과 같습니다.

const output = [
    {"asset": "diamonds", "quantity": 77},
    {"asset": "gold-bars", "quantity": 28},
    {"asset": "exciting-stuff", "quantity": 52},
    {"asset": "oil", "quantity": 51},
    {"asset": "sports-cars", "quantity": 7},
    {"asset": "bitcoins", "quantity": 40}
];

구현 코드

다음은 위 문제를 해결하는 전체 코드입니다.

const dataset = {
    "diamonds": 77,
    "gold-bars": 28,
    "exciting-stuff": 52,
    "oil": 51,
    "sports-cars": 7,
    "bitcoins": 40
};

const splitKeyValue = obj => {
    const keys = Object.keys(obj);
    const res = [];
    for (let i = 0; i < keys.length; i++) {
        res.push({
            'asset': keys[i],
            'quantity': obj[keys[i]]
        });
    }
    return res;
};

console.log(splitKeyValue(dataset));

코드 설명

이 코드의 동작 원리는 단계별로 다음과 같습니다.

1. 키 추출: Object.keys() 메서드를 사용해 객체의 모든 키를 배열 형태로 가져옵니다.

2. 반복 처리: for 루프로 각 키를 순회하면서, 해당 키와 obj[keys[i]]로 접근한 값을 하나의 새로운 객체로 묶어 결과 배열에 추가합니다.

3. 결과 반환: 모든 키-값 쌍이 변환된 배열을 최종적으로 반환합니다.

출력 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[
    { asset: 'diamonds', quantity: 77 },
    { asset: 'gold-bars', quantity: 28 },
    { asset: 'exciting-stuff', quantity: 52 },
    { asset: 'oil', quantity: 51 },
    { asset: 'sports-cars', quantity: 7 },
    { asset: 'bitcoins', quantity: 40 }
]

대안: map()을 활용한 더 간결한 방법

ES6 문법을 활용하면 위 로직을 한 줄로 더 간결하게 표현할 수 있습니다. Object.entries()와 map() 메서드를 조합해 보세요.

const splitKeyValue = obj =>
    Object.entries(obj).map(([asset, quantity]) => ({ asset, quantity }));

이 방식은 코드 길이가 크게 줄어 가독성이 향상되며, 앞선 예제와 완전히 동일한 결과를 반환합니다. 실무에서는 상황에 맞춰 전통적인 for 루프 방식과 함수형 프로그래밍 방식 중 적절한 것을 선택하면 됩니다.