옵셔널 체이닝 연산자

ES11 (ECMAScript2020) 에 도입되었다.

옵셔널 체이닝 연산자 .? 는 좌항의 피연산자가 null 혹은 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할때 유용하다. 도입되기전에는 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined가 아닌지 확인하였다.

 

// 옵셔널 체이닝 사용
let elem = null;
let value = elem?.value;

console.log(value); // undefined


// 단축연산자 사용
let elem = null;
let value = elem && elem.value;

console.log(value); // null

 

논리연산자 &&는 좌항 피연산자가 false로 평가되는 Falsy한 값 (false, undefined, null, 0, '', NaN 등등..)이면 좌항 피연산자를 그대로 반환한다. 하지만 0이나 ''는 객체로 평가될 때도 있다. 옵셔널 체이닝 연산의 경우 좌항 피연산자가 Falsy한 값이라도 null 또는 undefined가 아니라면 우항의 프로퍼티 참조를 이어간다.

 

// 단축연산자
let str = '';
let length = str && str.length;

console.log(length); // '' 가 출력되고 length를 참조하지 못한다.


// 옵셔널 체이닝 연산자
let str = '';
let length = str.?length;

console.log(length); // 0이 출력된다