옵셔널 체이닝 연산자 (optional chaining)

ES11(ECMAScript2020) 에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined 인 경우 undefined를 반환하고 그렇지 않을 경우에는 우항의 프로퍼티 참조를 이어간다.

<script>
var elem = null;

var value = elem?.value;
console.log(value); // undefined
</script>

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

<script>
var elem = null;

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

논리곱 연산자(&&)는 좌항의 피연산자가 false로 평가되는 Falsy값(false, null, undefined, 0, -0, NaN, '')이면 좌항 피연산자를 그대로 반환한다. 하지만 0이나 ''은 객체로 평가될 때도 있다.

<script>
var str = '';

// 문자열의 길이를 참조하지 못한다.
var length = str && str.length;
console.log(str); // ''
</script>

하지만 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 false로 평가되는 Falsy값(false, null, undefined, 0, -0, NaN, '')이라도 null과 undefined가 아니라면 우항의 프로퍼티 참조를 이어간다.

<script>
var str = '';

var length = str?.length;
console.log(str); // 0
</script>