출처: https://ko.javascript.info/nullish-coalescing-operator

null 병합 연산자 ‘??’

스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.

폴리필: 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드

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

a ?? b의 평가 결과

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

null 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드는 다음과 같다.

1

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

용도

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

화면엔 세 변수 중, 값이 정해진 변수의 값을 출력하는데, 세 변수 모두 값이 정해지지 않았다면 “Anonymous”가 출력되는 코드이다. 이럴 때 null 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다.

1
2
3
4
5
6

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

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

’??’와 ‘||’의 차이

위 예시에서 ??를 ||로 바꿔도 그 결과는 동일하다. 그렇다면 차이점은 무엇일까?

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

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

1
2
3
4
5
6
7

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

height = null;
alert(height || 100); // 100
alert(height ?? 100); // 100

height || 100은 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다. 반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 된다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.

연산자 우선순위

??의 연산자 우선순위는 5로, =와 ? 보다는 먼저, 대부분의 연산자보다는 나중에 평가된다. 따라서 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋다.

1
2
3
4
5
6
7
8
9

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000

// 원치 않은 결과
area = height ?? /*(*/100 * width/*)*/ ?? 50;

안정성 관련 이슈 때문에 ??를 괄호 없이 &&나 ||와 함께 사용하는 것은 금지되어 있다.

1

let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'

사람들이 ||를 ??로 바꾸기 시작하면서 만드는 실수를 방지하고자 명세서에 제약이 추가되었다. 제약을 피하려면 괄호를 사용한다.

1
2
3

let x = (1 && 2) ?? 3; // 제대로 동작

alert(x); // 2