옵셔널 체이닝 연산자 / null 병합 연산자

옵셔널 체이닝 연산자 ?.

 

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

var elem = null;

var value = elem && elem.value;	//elem이 falsy -> elem , 아니면 elem.value
console.log(value);	// null

-----------------------------------------------------------------------------
var elem = null;

var value = elem?.value;	// elem이 null 또는 undefined -> undefined
console.log(value);	// undefined

객체를 가리키기를 기대하는 변수가 null 또는 undefined 가 아닌지 확인하고, 프로퍼티를 참조할 때 유용하다. 하지만 , &&연산자의 경우 좌항의 falsy 값인 0과 ''가 객체로 평가되는 경우도 있다.

var str = '';

var length = str && str.length;	// str의 길이
console.log(length);	// '' 출력 , 문자열의 길이를 출력하지는 않는다.

옵셔널 체이닝 연산자는 좌항 연산자가 falsy 값이라도 null 또는 undefined가 아니면 우항을 참조한다.

var str = '';

var length = str?.length;
console.log(length);	// 0 출력

 

null 병합 연산자 ??

 

역시 ES11 에서 도입된 null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항을 반환하고 , 그렇지 않으면 좌항을 반환한다. 변수의 기본값을 설정할 때 유용하다.

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

?? 가 도입되기 전에는 ||를 사용해서 변수의 기본값을 설정했는데 , 역시 fasly값 중 ''과 0인 경우가 있어서 원치 않은 결과값을 반환할 수 있다.

var foo = '' || 'default string';
console.log(foo);	// "default string", ''이 falsy값으로 읽히는 문제
----------------------------------------------------------------------
var foo = '' ?? 'default string';
console.log(foo);	// "";