[JavaScript] The Modern JavaScript Tutorial - (2-12) Nullish coalescing operator '??'

개요

null 병합 연산자(Nullish coalescing operator) ??를 사용하면, 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다.

a ?? b의 평가 결과는 다음과 같다.

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// null or undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous");    // Supercoder

 

'??'와 '||'의 차이

• ||는 첫 번째 truthy 값을 반환한다.
• ??는 첫 번째 정의된(defined) 값을 반환한다.

let height = 0;

alert(height || 100);  // 100
alert(height ?? 100);  // 0

height처럼 0이 할당될 수 있는 변수를 사용하여 개발할 때는 ||보다 ??가 적합하다.

 

연산자 우선순위

??의 연산자 우선순위는 5로 꽤 낮은 편이기 때문에, =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다.

따라서 예상대로 기능이 수행되기 위해 괄호를 추가하는 게 좋다.

let height = null;
let width = null;

// 괄호에 주의한다.
let area = (height ?? 100) * (width ?? 50);

alert(area);

// without parentheses
let area = height ?? 100 * width ?? 50;
let area = height ?? (100 * width) ?? 50;   // 다음과 같이 실행된다.

 

??는 &&, ||와 함께 사용하지 못한다

let x = 1 && 2 ?? 3;    // syntax error
let x = (1 && 2) ?? 3;  // it works

alert(x);   // 2

사람들이 ||를 ??로 바꾸기 시작하며 발생하는 실수를 방지하고나 제약이 추가된 상황이다. 제약을 피하기 위해서는 괄호를 사용하면 된다.

 

요약

• null 병합 연산자 ??를 사용하면, 피연산자 중 '값이 할당된' 변수를 빠르게 찾을 수 있다.
• 기본값을 할당하는 용도로도 사용할 수 있다.

// height가 null이나 undefined라면 100을 할당한다.
height = height ?? 100;

• ??의 연산자 우선순위는 대다수의 연산자보다 낮으며, ?와 = 보다는 높다.
• 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어 있다.

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial