Dev/javascript
[javascript] ?. 옵셔널 체이닝(optional chaining)이란?
bskyvision.com
2024. 8. 14. 16:45
옵셔널 체이닝(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("서울사람입니다.");
}