[Javascript] 널 병합연산자 '??'와 옵셔널 체이닝 '?.'

자바스크립트의 '?'

ES2020에서 도입된 새로운 문법들 중 옵셔널 체이닝 연산자 ?. 와 null 병합 연산자 ?? 는 모두 물음표를 쓴다.

사용되는 방식도 null이나 undefined 값을 체크할 수 있다는 점에서 비슷한 것 있는 것 같아, 이 둘을 한번 묶어서 정리해보면 좋겠다 싶어서 작성하게 되었다. 🙂

 

 

null 병합 연산자

우선 null 병합 연산자(nullish coalescing) ??은 간단하게 값이 할당되어 있는 변수를 쉽게 찾을 수 있다.

즉 undefined이나 null이 아닌 값이 할당된 경우를 말한다.

 

a ?? b

이 연산자는 위와 같이 쓸 수 있는데, 이런 식으로 해석할 수 있다.

• a가 null 도 아니고 undefined가 아니라면 a
• 그 외(null이나 undefined)에는 b

 

같은 방식을 삼항 연산자로 풀어써보면 이렇다.

let a = (a !== null && a !== undefined) ? a : b 

null 병합 연산자를 사용했을 때 무지하게 짧아지는 것을 볼 수 있다.

 

 

이 연산자는 특히나 변수에 기본값을 설정할 때 유용하다.

null 병합 연산자가 도입되기 전에는 논리 연산자 OR을 뜻하는 || 을 많이 이용했었고, 실제로 위 예시를 || 연산자로 바꾸어도 결과는 동일하다.

const test = null ?? 'default';
const test2 = null || 'default';

 

차이를 들자면 || 연산자의 경우 왼쪽이 Falsy한 값일 경우 오른쪽 값을 반환하고,

?? 연산자의 경우 왼쪽이 null이나 undefined로 정의된 것이 아니라면 오른쪽 값을 반환한다는 것이다.

 

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때, 0은 Falsy한 값이기 때문에 ||보다는 ?? 가 더욱 적합하다고 하다.

 

 

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자는 중첩 객체에서 프로퍼티가 null이나 undefined가 아닌지 확인하거나 참조가 유효한지 확인할 때 유용하다.

 

a?.b

왼쪽 연산자가 null이거나 undefined인 경우 undefined를 반환한다.

그렇지 않다면 오른쪽 프로퍼티의 참조를 이어간다.

const elem = null;
const value = elem?.value;

 

위 코드를 보면 변수 value는 변수 elem이 null이거나 undefined인지 확인하고 있다.

보다시피 elem은 null이 할당되어 있기 때문에 undefined를 반환한다.

 

const elem = {  
value: 'hello',  
};  
const value = elem?.value;

이제 elem이 객체로 선언되었고 value라는 프로퍼티를 갖고 있기 때문에 값을 반환하는 것을 볼 수 있다.

 

 

null 병합 연산자와 비슷하게 이전에는 논리 연산자 &&을 이용해서 변수가 null이거나 undefined인 경우를 확인하는 방법을 많이 사용했다. 역시 Falsy 한 경우를 따졌기 때문에 Falsy 값에 해당하는 0이나 ''를 거를 수 없었다는 점..

const elem = null;
const value = elem && elem.value;

 

 

하지만 옵셔널 체인지 연산자는 Falsy한 값이라도 null이거나 undefined한 경우를 바로 확인할 수 있다!

 

 

 

 

참고

코어 자바스크립트 https://ko.javascript.info/nullish-coalescing-operator

 

MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

 

모던 자바스크립트 Deep Dive 9장 9.4.2, 9.4.3