[JS] 옵셔널 체이닝 연산자 ?.와null 병합 연산자 ?? 알아보기

 

옵셔널 체이닝 연산자

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

예제는 다음과 같다.

var elem = null;

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

옵셔널 체이닝 연산자가 등장하기 전에는 논리 연산자 && 를 활용해 단축 평가를 했었으나, 옵셔널 체이닝 연산자를 활용하면 좀 더 깨끗한 코드를 작성할 수 있다. 하지만 논리 연산자 && 를 활용하는 것과 옵셔널 체이닝 연산자 ?. 를 활용하는 것에는 분명한 차이가 있는데, 다음과 같다.

var elem = null;

var value = elem && elem.value;
console.log(value); // null

바로 논리 연산자 && 는 좌항 피연산자가 Falsy (false로 평가되는 값 - false, undefined, null, 0, -0, NaN, ‘’) 이면 좌항 피연산자를 그대로 반환한다. (하지만 0이나 ‘’은 객체로 평가될 때도 있다. - 추후 알아보도록 하겠다.)

하지만 옵셔널 체이닝 연산자 ?. 는 좌항 피연산자가 Falsy 값이더라도 null 또는 undefined 가 아니면 우항의 프로퍼티 참조를 이어간다.

var str '';

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

 

실제로 개발을 진행하다보면, 옵셔널 체이닝 연산자 ?. 를 사용하는 것이 예외를 고려하는 측면에서 편리한 경우가 많았다.

 

 

null 병합 연산자

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

예시는 다음과 같다.

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

null 병합 연산자가 도입되기 이전에는 논리 연산자 || 를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. 하지만 논리 연산자 || 를 사용한 단축 평가의 경우 좌항의 피연산자가 Falsy 값이면 우항의 피연산자를 반환하는 문제점이 있다.

예제로 살펴보자.

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

하지만 null 병합 연산자 ??는 좌항의 피연산자가 Falsy 값이더라도 null 또는 undefined 가 아니면 좌항의 피연산자를 그대로 반환한다.

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

 

null 병합 연산자 ??의 경우 변수에 기본값을 설정할 때 주로 사용되므로 예기치 않은 동작을 예방할 수 있어 유용하다.

 

---

Reference

모던 자바스크립트 Deep Dive - 저자: 이응모