JavaScript에서 대괄호 객체 키를 중첩 객체로 변환하는 방법

JavaScript에서 객체 내부의 중첩된 키(nested key)에 접근하는 방법은 크게 두 가지가 있습니다.

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

const obj = {
    object: {
        foo: {
            bar: {
                ya: 100
            }
        }
    }
};

중첩된 프로퍼티 'ya'에 접근하거나 값을 수정하려면 아래 두 가지 방식을 사용할 수 있습니다.

방법 1 — 대괄호 표기법

obj['object']['foo']['bar']['ya']

방법 2 — 점 표기법

obj.object.foo.bar.ya

두 방법 모두 동일한 값에 도달합니다. 하지만 실무에서는 "object[foo][bar][ya]"처럼 대괄호 형태로 합쳐진 단일 키를 실제 중첩 객체 구조로 변환해야 하는 경우가 종종 있습니다. 이번 글에서는 이러한 변환을 수행하는 JavaScript 함수를 작성해 보겠습니다.

구현 예제

변환을 처리하는 코드는 다음과 같습니다.

const obj = { "object[foo][bar][ya]": 100 };
const constructDotNotation = obj => {
    const keys = Object.keys(obj)[0].split('[').map(el => {
        return el.replace(']', '');
    });
    let res = {};
    keys.reverse().forEach(key => {
        if (Object.keys(res).length === 0){
            res[key] = obj[Object.keys(obj)[0]];
        }else{
            const temp = {};
            temp[key] = res;
            res = temp;
        };
    });
    return res;
};
console.log(JSON.stringify(constructDotNotation(obj), undefined, 4));

코드 설명

• Object.keys(obj)[0]를 통해 객체의 첫 번째 키인 "object[foo][bar][ya]"를 가져옵니다.
• split('[')로 여는 대괄호를 기준으로 문자열을 분리한 뒤, replace(']', '')로 닫는 대괄호를 제거하여 ['object', 'foo', 'bar', 'ya'] 배열을 만듭니다.
• 배열을 reverse()로 뒤집어 가장 안쪽 키부터 차례대로 바깥쪽 객체로 감싸는 방식으로 중첩 구조를 완성합니다.

출력 결과

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

{
    "object": {
        "foo": {
            "bar": {
                "ya": 100
            }
        }
    }
}