[JavaScript] 옵셔널 체이닝 '?.'

옵셔널 체이닝

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.

필요한 이유?

사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다.

let user ={}
console.log(user.address.street) 
//TypeError: Cannot read property 'street' of undefined

명세서에 ?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했습니다.

let user ={}
console.log(user && user.address && user.address.street)
//undefined, 에러가 발생하지 않습니다.

옵셔널 체이닝의 등장

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

설명이 장황해지지 않도록 지금부턴 평가후 결과가 null이나 undefined가 아닌 경우엔 값이 ‘있다’ 혹은 '존재한다’라고 표현하겠습니다.

위의 error를 옵셔널 체이닝을 사용하면

let user ={}
console.log(user?.address?.street) // undefined, 에러가 발생하지 않습니다.