옵셔널 체이닝 연산자 (.?)

Javascript Info | 옵셔널 체이닝

MDN | 옵셔널 체이닝

 

옵셔널 체이닝 연산자란?

?.은 ?.'앞’의 평가 대상이 undefined나 null이면, 평가를 멈추고 undefined를 반환. 그렇지 않으면 뒤의 프로퍼티 참조를 이어감

 

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

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

옵셔널 체이닝이 필요한 이유

사례1

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

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

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

사례2

브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있습니다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생하죠.

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

 

옵셔널 채이닝이 나오기 전 해결방법

이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했습니다.

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

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

중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했었죠. 그런데 이렇게 AND를 연결해서 사용하면 코드가 아주 길어진다는 단점이 있습니다.

 

어떨 때 유용한지?

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용함

논리 연산지 &&는 앞의 피연산자가 false로 평가되는 Falsy값이 앞 피연산자를 그대로 반환함

 

*Falsy값 : 거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 불리언 문맥에서 false로 평가되는 값입니다.

아래 8가지 값

false	키워드 false
0	숫자 zero
-0	음수 zero
0n	BigInt. 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. 0n은 거짓 같은 값.
""	빈 string
null	null - 아무런 값도 없음
undefined	undefined - 원시값
NaN (en-US)	NaN - 숫자가 아님