문자열 키로 중첩된 JavaScript 객체 속성에 안전하게 접근하는 방법

lodash의 get 메서드 활용

JavaScript에서 깊게 중첩된 객체의 속성에 접근하다 보면, 존재하지 않는 경로를 참조할 때 TypeError가 발생하거나 undefined가 반환되는 문제가 생기기 쉽습니다. 이럴 때 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를 반환한다는 것입니다. 이것이 lodash의 get 메서드가 가진 가장 큰 장점입니다.

직접 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()을 사용하는 것이 가장 간편하고 신뢰할 수 있는 방법입니다.
• 의존성을 줄이고 싶다면 재귀 기반의 getProp 함수를 직접 구현해 사용할 수 있습니다.
• 두 방식 모두 존재하지 않는 중첩 경로에 접근할 때 발생하는 런타임 에러를 방지하는 데 도움이 됩니다.