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

ES11에서 도입된 옵셔널 체이닝 연산자(?.)에 대해 알아보자

정의는 다음과 같다.

좌항의 피연산자가 null 또는 undefined 일 경우 undefined 리턴하고 아닐경우 우항을 리턴한다.

사용 예시)

var elem = null;
var value = elem?.value;
console.log(value) // undefined

elem이 null이니 undefined를 리턴하였다.

만약 옵셔널 체이닝 연산자 없이 elem.value에 직접 접근하려고 하였다면

위와같은 type error를 볼 수 있다.

 

참고)

위 타입에러를 피하기 위해서 옵셔널 체이닝이 없을 때는 [단순 평가]를 활용하였다.

var elem = null;
var value = elem && elem.value;
console.log(value) // null

단순 평가의 문제점은 좌항이 Falsy값인 (false,0,-0,Nan,'') 이면 좌항값을 리턴해버린다는 점이다.

따라서 다음과 같은 코드에서 기대하지 않는 값을 리턴한다.

var elem = '';
var value = elem && elem.length;
console.log(value) // 기대값 : 0 but 실제 결과 : ''

이렇게 && 연산자에서 ''(빈문자열로 의도한)객체를 false로 판단하여 좌항을 바로 리턴해버리는 애로사항을 옵셔널 체이닝(?.)연산자가 해결해준다.

var elem = '';
var value = elem?.length;
console.log(value) // 기대한대로 0 리턴