[ 모던 자바스크립트 스터디 ] 옵셔널 체이닝 연산자 / null 병합 연산자

ECMAScript2020에서 도입된 옵셔널 체이닝 연산자에 대해 알아보겠다.

 

 

옵셔널 체이닝 연산자

 

좌항의 피연산자가 null 또는 undefiend 인 경우 undefined 를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

연산자는 ?. 이다.

 

 

var a = null;

var aValue= a?.value;

 

 

 

만약 옵셔널 체이닝 연산자 없이 바로 a.value 로 좌항의 피연산자의 value 라는 프로퍼티를 참조했을 때,

Uncaught TypeError: Cannot read properties of null (reading 'value')

에러를 봤을 것이다.

 

하지만 옵셔널 체이닝 연산자를 이용하면 에러 없이 null 또는 undefined 일때도 참조할 수 있다.

 

 

원래 이 옵셔널 체이닝 연산자가 없었을 때는 논리연산자 && 를 사용하여 단축평가를 통해 변수가 null 인지, undefined 인지 확인했었다.

 

 

var a = null;

var aValue = a && a.value;

 

위의 && 논리 연산자 가 무슨 역할인지 잘 모르겠다면, 바로 이전의 포스팅을 참고하면 될 것 같다.

 

하지만 && 연산자는 Falsy 값인 false, undefined, null, 0, -0, NaN, '' 는 무조건 좌항 피연산자를 반환한다.

 

 

만약 아래와 같은 코드가 있다면?

 

var txt = '';

var txtLen = txt && txt.length;

 

 

txtLen 변수는 ''(빈 문자열) 을 반환할 것이다.

 

 

이걸 옵셔널 체이닝 연산자를 이용하면 아래와 같은 결과를 얻을 수 있다.

 

 

 

 

 

옵셔널 체이닝 연산자 ?. 는 좌항 피연산자가 false 로 평가되는 Falsy 값이라도

 

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

따라서 위와 같은 상황이 발생하는 것이다.

 

 

null 병합 연산자

 

ECMAScript 2020 에서 도입된 null 병합 연산자 ?? 는

좌항의 피연산자가 null 혹은 undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

 

 

null 병합 연산자는 변수에 기본값을 정할 때 유용하게 쓰인다.

 

var a = null ?? '테스트 문자열';

 

아래와 같이 쓰일 수도 있다.

 

var a = null ? 0

 

 

이 경우 a 의 값은 0이 되는 것이다.

 

이 null 병합 연산자 등장 이전에는 변수에 기본 값을 설정할 때 논리 연산자 || 를 사용하여 설정했다.

 

var a = '' || '테스트 문자열';

 

 

이 또한 단축평가가 이루어져 falsy 값인 빈 문자열이라면 우항의 값을 그대로 반환한다.

하지만 빈 문자열이나 0 이 기본 값이 되어야 하는경우, 논리 연산자 || 를 이용하면 예상치 못한 동작이 이루어질 수도 있다.

 

 

그럴 경우에는 null 병합 연산자를 이용하면 된다.

 

null 병합 연산자는 false 로 평가되는 Falsy값이더라도 null 이나 undefined 가 아니라면 좌항의 피 연산자를 반환하기 때문이다.