JavaScript에서 점 표기법 문자열로 객체 속성을 안전하게 설정하는 방법

JavaScript에서 객체의 깊은 곳에 있는 속성에 값을 설정할 때는 lodash의 set 메서드를 활용하면 안전하게 처리할 수 있습니다. 최상위 레벨의 속성 설정은 비교적 간단하지만, 중첩된(nested) 속성에 접근하는 작업은 오류가 발생하기 쉽습니다. 따라서 검증된 라이브러리인 lodash를 사용하는 것이 가장 좋은 방법입니다.

lodash set 메서드로 깊은 중첩 객체 설정하기

lodash를 사용하면 다음과 같이 깊게 중첩된 객체의 속성도 간단히 설정할 수 있습니다.

예제

let _ = require("lodash");
let obj = {
    a: {
        b: {
            foo: "test"
        },
        c: 2
    }
};
_.set(obj, "a.b.foo", "test1");
_.set(obj, "a.c", { test2: "bar" });
console.log(obj);

실행 결과

{ a: { b: { foo: 'test1' }, c: { test2: 'bar' } } }

_.set은 경로 문자열(예: "a.b.foo")을 기준으로 해당 위치가 존재하지 않으면 자동으로 생성해 주기 때문에, 존재 여부를 일일이 확인하는 번거로움 없이 안전하게 값을 할당할 수 있습니다.

직접 구현한 setUpdateProp 함수 사용하기

외부 라이브러리를 사용하고 싶지 않다면, 재귀 호출을 이용해 직접 유틸리티 함수를 작성할 수도 있습니다. 아래는 경로를 배열 형태로 전달받아 속성을 설정하는 setUpdateProp 함수입니다.

const setUpdateProp = (object, path, value) => {
    if (path.length === 1) object[path[0]] = value;
    else if (path.length === 0) throw error;
    else {
        if (object[path[0]])
            return setUpdateProp(object[path[0]], path.slice(1), value);
        else {
            object[path[0]] = {};
            return setUpdateProp(object[path[0]], path.slice(1), value);
        }
    }
};

이 함수는 배열로 전달된 경로를 따라 재귀적으로 탐색하며, 중간 경로의 객체가 존재하지 않으면 빈 객체({})를 생성한 뒤 계속 진행합니다.

예제

var obj = {
    level1:{
        level2:{
            level3:{
                name: "Foo"
            }
        },
        anotherLevel2: "bar"
    }
};
setUpdateProp(obj, ["level1", "level2"], "FooBar");
console.log(obj);

실행 결과

{ level1: { level2: 'FooBar', anotherLevel2: 'bar' } }

정리

• lodash의 set: 문자열 경로를 지원하며, 누락된 중간 객체를 자동으로 생성해 주는 안정적인 방법입니다.
• 직접 구현한 함수: 의존성 없이 동작하며, 배열 기반 경로를 통해 유연하게 확장할 수 있습니다.

실무에서는 예외 상황(배열 인덱스, null 값 등)까지 고려해야 하므로, 특별한 이유가 없다면 lodash처럼 충분히 테스트된 라이브러리를 사용하는 것을 권장합니다.