[javascript] ?. 옵셔널 체이닝(optional chaining)이란?

옵셔널 체이닝(optional chaining)은 ES11 (2020년)에 도입된 문법입니다. 객체의 속성에 접근할 때 해당 속성이 존재하는지 먼저 확인한 후에 접근하는 기능입니다. 만약 해당 속성이 존재하지 않는 경우네는 TypeError 대신에 undefined를 반환합니다. "돌다리도 두들겨보고 건너라" 전법을 시전하는 것이라고 볼 수 있습니다. 해당 객체 내에 특정 속성이 존재할지에 대해 확신을 할 수 없다면 옵셔널 체이닝을 써주는 것이 좋습니다. 

 

const user = {
    name: "Alice",
    address: {
        city: "Seoul",
        street: "123 Main St"
    }
}

console.log(user?.address?.city); // Seoul
console.log(user?.phone?.number); // undefined
console.log(user.phone.number); // TypeError

 

위 코드를 실행한 결과는 다음과 같습니다. 옵셔널 체이닝을 쓰지 않은 경우에는 TypeError가 발생했음을 알 수 있습니다. 

 

 

이 옵셔널 체이닝을 사용하면 다음과 같이 존재 여부를 확인하는 지저분한 코드를 안 써도 됩니다. 아마 비교적 예전에 작성된 자바스크립트 프로그램들에서는 다음과 같은 코드를 많이 보셨을 것입니다. 

 

const ApiResp = {
    name: "Alice",
    // address: {
    //     city: "Seoul",
    //     street: "123 Main St"
    // }
}

if (ApiResp && ApiResp.address && ApiResp.address.city == "Seoul"){
    console.log("서울사람입니다.");
}

 

대신에 아래와 같이 코드를 작성할 수 있습니다. 코드가 한결 간결해진 것을 알 수 있습니다.

 

const ApiResp = {
    name: "Alice",
    // address: {
    //     city: "Seoul",
    //     street: "123 Main St"
    // }
}

if (ApiResp?.address?.city == "Seoul"){
    console.log("서울사람입니다.");
}

 

참고자료

[1] https://ko.javascript.info/optional-chaining

[2] https://haenny.tistory.com/241