자바스크립트 옵셔널 체이닝 연산자

옵셔널 체이닝 연산자

 

옵셔널 체이닝 연산자 ?. 는

좌항 피연산자가 false로 평가되는 값이라도

null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다

 

즉

좌항이 null 또는 undefined만 아니면 우항값을 쓸거임. 이런 뜻

 

var elem = null;

// elem이 null 또는 undefined면 undefiend를 반환하고
// 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

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

 

옵셔널 체이닝 연산자는

변수가 null 인지 undefined가 아닌지 확인하고

프로퍼티를 참조할 때 유용하다.

 

하지만

좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이더라도

null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

 

즉

Only null 또는 undefined만 체크한다. 이런 뜻

 

var str = '';

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

 

 

null 병합 연산자

null 병합 연산자 ?? 는 좌항의 피연산자가

null 또는 undefined이면 우항의 피연산자 리턴

 

아니면 좌항의 피연산자 리턴

// 좌항이 null 또는 undefined일 때
var foo = null ?? 'default string';
console.log(foo); // "default string"

 

// 좌항이 값이 null 또는 undefined만 아니면 좌항의 값을 반환

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

 

 

변수에 기본값을 설정할 때 유용하다

 

정리

옵셔널 체이닝 연산자는 ( ?. )

왼쪽값이 null 또는 undefined만 아니라면

오른쪽 값 리턴

 

 

null 병합 연산자는 ( ?? )

왼쪽값이 null 또는 undefined만 아니라면

왼쪽값 리턴.

 

헷갈린다...

 

 

출처 모던 자바스크립트 Deep dive