[JavaScript] Nullish Coalescing

Nullish coalescing operator(null 병합 연산자)에 대해서 알아보도록 하겠습니다.

null 병합 연산자는 ?? 를 사용하여 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다. 바로 예를 들어보겠습니다.

a ?? b 의 경우 a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b를 의미합니다.

이를 삼항 연산자로 표현하면 다음과 같습니다.

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

??와 ||의 차이

위 둘은 같은 것처럼 보입니다. 두 연산자의 차이점은 뭘까요?

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

null, undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 합니다.

let height = 0;

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

height || 100은 height에 0을 할당했지만 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100의 평가 결과는 100 입니다.

반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 됩니다. 예시에선 height에 0이라는 값을 할당했기 때문에 0이 출력됩니다. height에 할당된 0 자체는 'defined'값이기 때문에 첫번째 정의된 값인 0이 반환됩니다.

연산자 우선 순위

null 병합 연산자의 우선순위는 5로 낮은편입니다.

따라서 ??는 = 와 ? 보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다.

그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 때는 괄호를 추가하는 것이 좋습니다.

let height = null;
let width = null;

let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

그렇지 않으면 *가 ?? 보다 우선순위가 높기 때문에 *가 먼저 실행됩니다.

결국엔 아래 예시 처럼 원치 않게 동작합니다.

let area = height ?? (100 * width) ?? 50;
console.log(area) // 0
// (null * 100) -> 0

참고

• Modern JavaScript Tutorial