JavaScript에서 키-값 쌍 JSON 배열을 일반 JSON 객체로 변환하는 방법

JavaScript로 개발하다 보면 복잡하게 중첩된 키(key)-값(value) 쌍 형태의 JSON 배열을 만나게 됩니다. 이런 구조는 데이터를 다루기 번거롭기 때문에, 일반적인 JSON 객체 형태로 변환하는 것이 좋습니다.

문제 상황

예를 들어, 다음과 같이 key와 value 프로퍼티로 구성된 객체들을 담고 있는 JSON 배열이 있다고 가정해 보겠습니다.

const arr = [{
    "key": "name",
    "value": "john"
},
{
    "key": "number",
    "value": "1234"
},
{
    "key": "price",
    "value": [{
        "item": [{
            "item": [{
                "key": "quantity",
                "value": "20"
            },
            {
                "key": "price",
                "value": "200"
            }]
        }]
    }]
}];

위 배열처럼 value 안에 또 다른 배열과 item 구조가 여러 겹으로 중첩되어 있으면, 원하는 데이터에 접근하기가 매우 불편합니다.

목표 결과

우리가 작성할 함수는 이러한 배열을 입력받아, 데이터가 키에 직접 매핑된 단순한 구조의 새로운 객체를 반환해야 합니다. 즉, 위 배열을 변환하면 다음과 같은 결과가 나와야 합니다.

const output = {
    "name": "john",
    "number": "1234",
    "price": {
        "quantity": "20",
        "price": "200"
    }
};

해결 방법: 재귀 함수 활용

중첩된 구조를 처리하려면 재귀(recursion)를 사용하는 것이 가장 효과적입니다. 각 요소를 순회하면서 'item' 프로퍼티가 있으면 계속 탐색하고, value가 배열이면 새로운 객체를 만들어 그 안에서 재귀적으로 처리하는 방식입니다.

전체 코드는 다음과 같습니다.

const arr = [{
    "key": "name",
    "value": "john"
},
{
    "key": "number",
    "value": "1234"
},
{
    "key": "price",
    "value": [{
        "item": [{
            "item": [{
                "key": "quantity",
                "value": "20"
            },
            {
                "key": "price",
                "value": "200"
            }]
        }]
    }]
}];
const simplify = (arr = []) => {
    const res = {};
    const recursiveEmbed = function(el){
        if ('item' in el) {
            el.item.forEach(recursiveEmbed, this);
            return;
        };
        if (Array.isArray(el.value)) {
            this[el.key] = {};
            el.value.forEach(recursiveEmbed, this[el.key]);
            return;
        };
        this[el.key] = el.value;
    };
    arr.forEach(recursiveEmbed, res);
    return res;
};
console.log(simplify(arr));

코드 동작 원리

이 함수의 핵심 로직은 다음 세 가지 경우로 나눌 수 있습니다.

'item' 프로퍼티가 있는 경우: 더 깊은 중첩 구조라는 의미이므로, forEach에 재귀 함수와 현재 컨텍스트(this)를 전달하여 계속 탐색합니다.
value가 배열인 경우: 해당 키에 빈 객체를 할당한 뒤, 그 객체를 컨텍스트로 전달하여 하위 데이터를 채워 넣습니다.
그 외의 경우: 단순한 키-값 쌍이므로 바로 객체에 할당합니다.

forEach의 두 번째 인자로 컨텍스트 객체를 넘겨주는 점이 이 코드의 핵심입니다. 이를 통해 재귀 호출 시에도 올바른 객체에 데이터가 누적됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

{
    name: 'john',
    number: '1234',
    price: { quantity: '20', price: '200' }
}

이처럼 재귀 함수를 활용하면 아무리 깊게 중첩된 키-값 배열이라도 깔끔한 일반 JSON 객체로 손쉽게 변환할 수 있습니다.