옵셔널 체이닝(optional chaining) 이란?

옵셔널 체이닝이란, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있도록 해주는 것입니다.

프로퍼티 뒤에 ?. 을 붙혀 사용합니다.

사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 생각해봅시다.

이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다.

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street); 
// TypeError: Cannot read property 'street' of undefined

?.은 ?. '앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.
옵셔널 체이닝을 사용해 user.address.street에 안전하게 접근할 수 있습니다.

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

user?.address 로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않습니다.

?. 앞의 변수는 꼭 선언되어 있어야 합니다.

변수 user 가 선언되어있지 않으면 user?.anything 평가시 에러가 발생합니다.

// ReferenceError: user is not defined user?.address;

user?.anything을 사용하려면  user를 정의해야 합니다. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작합니다.

참고자료 : https://ko.javascript.info/optional-chaining