Optional Chaining operator(선택적 체이닝 연산자)

?. 문법

'?.'은 Optional chaining operator(선택적 체이닝 연산자)라고 부르며, ES2020부터 추가된 문법이다.
이 연산자는 객체의 중첩된 속성에 접근할 때, 해당 속성이 존재하지 않는 경우, 'TypeError'를 발생시키지 않고, 'undefined'를 반환한다.

바로 예시 코드를 보자

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St.',
    city: 'Anytown',
    state: 'CA',
  }
};

이 객체의 address 속성에 접근하려면 다음과 같이 할 수 있다.

const city = person.address.city; // 'Anytown'

하지만 만약 person 객체에 address 속성이 없는 경우, 자바스크립트에서 에러를 발생시킨다.

const city = person.address.city; 
// TypeError: Cannot read property 'city' of undefined

이 경우 '?' 연산자를 사용하면 '**TypeError**' 에러를 방지할 수 있다.

const city = person?.address?.city; 
// undefined

위의 코드에서 persion 객체에 address 속성이 없다면 'undefined'를 반환한다.
 address 속성이 있지만 city 속성이 없다면, 여전히 'undefined'를 반환한다.

이러한 방식으로 연산자 체인을 따라서 값을 찾아가면서, 중간에 값이 null 또는 undefined인 경우, 에러를 방지할 수 있다.

Optional chaining 연산자는 다양한 상황에서 유용하게 사용될 수 있으나 모든 브라우저에서 지원되지는 않으므로, 사용 전에 브라우저 호환성을 확인해야 한다.

브라우저 호환성 체크 사이트: https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

사이트 상단에 Can I use ?에서 부분에 본인이 쓰고자 하는 문법을 입력하면 위의 사진처럼 호환되는 브라우저 목록을 띄워준다. 목록에서 확인해보면
Chrome 80+
Firefox 74+
Safari 13.1+
Edge 80+
Opera 67+
iOS Safari 13.4+
Android Chrome 80+
등에서 Optional chaining이 지원되는 것을 확인할 수 있다.