Javascript - Optional Chaining & Null 병합 연산자

Optional Chaining (.?)

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

var elem = null;

var value = elem?.value; //undefined

이렇게 옵셔널 체이닝은 객체를 가리키기를 기대하는 변수가 null or undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.
옵셔널 체이닝이 없던 예전에는 논리 연산자 &&를 사용하여 null인지 판별하였다.

var elem = null;

var value = elem && elem.value //null

.? vs &&

이 둘의 차이점이라면 논리연산자는 왼쪽의 피연산자가 null이나 undefined가 아닌 다른 falsy한 값이여도 오른쪽 요소를 참조했지만 옵셔널 체이닝은 null과 undefined만을 기준으로 true,false를 판별한다.

var str = '';

//str은 null이나 undefined는 아니지만 falsy한 값이다.
//하지만 ?.는 null로 보지않고 왼쪽 프로퍼티를 참조하여 0이라는 값이 나온다.
var length = str?.length; // 0

null 병합 연산자 (??)

또 ES11(ECMAScript2020)에서 도인된 null 병합 연산자 ??는 좌항의 피연산자가 null or undefined면 우항의 피연산자를 반환하고 그렇지 않으면 좌항을 반환한다.

var foo = null ?? 'default string';
console.log(foo); // default string

이렇게 null 병합 연산자는 변수의 기본값을 설정할 때 유용하다. null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||를 사용했다.

var foo = '' || 'default string';
console.log(foo); // default string

?? vs ||

널 병합 연산자 ??와 논리연산자 ||도 앞의 경우와 마찬가지로 병합 연산자는 null or undefined를 제외한 falsy한 값들은 고려하지 않고 논리연산자는 모든 falsy한 값들도 null과 마찬가지로 판단한다.

var foo = '' || 'default string'
console.log(foo) // default string

var foo2 = '' ?? 'default string'
console.log(foo2) // ''