[모던자바스크립트 Deep Dive] 옵셔널 체이닝 연산자와 null 병합 연산자

옵셔널 체이닝(Optional Chaining) 연산자 - ?.

 

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

 

var elem = null;

//elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않다면 우항의 프로퍼티 참조를 이어간다
var value = elem.value;
console.log(value)	//undefined

 

옵셔널 체이닝 연산자 ?.는 객체를 가르키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다!

 

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

 

var str = '';

//문자열 길이를 참조하는데 그 값이 Falsy값이라도
//null이나 undefined가 아니면 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length);	//0

 

null병합 연산자 - ??

 

null 병합 연산자도 옵셔널체이닝 연산자와 마찬가지로 ES11에서 도입되었다. 이 연산자는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.(기본값 설정할 때 유용한다!)

 

//좌항의 피연산자가 null 또는 undefined면 우항의 피연산자를 반환하고,
//그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'defalut value';
console.log(foo)  //"defalut value"

null 병합 연산자는 좌항의 피연산자가 false로 평가되는 Falsy 값 (false, undefined, null, 0, -0, NaN, ' ')이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

 

//좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'defalut value';
console.log(foo);  //""