JavaScript에서 깊게 중첩된 객체 값에 안전하게 접근하는 방법

JavaScript에서 객체의 속성에 접근할 때, 해당 경로가 존재하지 않으면 undefined가 반환되거나 에러가 발생할 수 있습니다. 이럴 때 Lodash의 get 메서드를 사용하면 어떤 깊이의 속성이든 안전하게 조회할 수 있습니다.

첫 번째 레벨의 속성에 접근하는 것은 비교적 간단하지만, 중첩된 속성 접근은 훨씬 까다롭습니다. 중간 단계의 속성이 null 또는 undefined일 경우 에러가 발생하기 때문에, lodash와 같이 검증된 라이브러리를 사용하는 것이 안전합니다.

Lodash의 get 메서드 사용하기

lodash를 설치한 후 다음과 같이 깊게 중첩된 객체에 접근할 수 있습니다.

let _ = require("lodash");
let obj = {
    a: {
        b: {
            foo: "test"
        },
        c: 2
    }
};
console.log(_.get(obj, "a.b.foo"));
console.log(_.get(obj, "a.c"));
console.log(_.get(obj, "a.test"));
console.log(_.get(obj, "a.test.x"));

실행 결과

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

test
2
undefined
undefined

주목할 점은 존재하지 않는 경로(a.test, a.test.x)에 접근했을 때도 에러 없이 undefined를 반환한다는 것입니다. 덕분에 복잡한 조건문 없이도 안전하게 값을 조회할 수 있습니다.

직접 getProp 함수 구현하기

외부 라이브러리를 사용하고 싶지 않다면, 재귀 호출을 활용해 직접 getProp 함수를 작성할 수도 있습니다.

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

이 함수는 접근하고자 하는 속성 경로를 배열 형태로 전달받아 사용합니다.

사용 예제

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

실행 결과

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

{level3: {name: "Foo"}}

정리

• lodash의 get: 문자열 경로(예: "a.b.foo")로 안전하게 값에 접근하며, 경로가 없으면 undefined를 반환합니다.
• 직접 구현한 getProp: 배열 형태의 경로를 받아 재귀적으로 탐색하며, 중간 경로가 없으면 빈 객체를 생성해 계속 탐색합니다.

실무에서는 검증된 lodash 라이브러리를 사용하는 것이 가장 안전하고 편리하며, 의존성 추가가 어려운 환경이라면 위와 같은 커스텀 함수나 ES2020의 옵셔널 체이닝(obj?.a?.b?.foo)을 활용하는 것도 좋은 대안입니다.