??

null 병합연산자 (nullish colaescing operator)

오늘 처음 본 ?? 연산자 썰을 풀어보자. 그런데 이 단어 뭐냐
colaescing[|koʊə|les ] : 합치다  발음이 심히 어렵다..

---

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

⏩ a ?? b

a가 null 또는 undefined이 아니면 그대로 a, a === null 또는 a === undefined이면 b를 할당한다.

x = x ?? y;

변수에 기본값을 할당하는 용도로 사용할 수 있다.

---

?? vs ||

?? 는 ||연산자와 비슷해보이지만,

||는 truthy한 값을 찾아서 반환하고, ??는 정의된 값을 반환하는 것이다.

즉 ??는 null또는 undefined일 경우에 오른쪽 값을 할당하는 반면에
||는 두 개를 포함한 falsy 중 하나라도 해당되면 (0도 포함) 오른쪽으로 넘어간다.

let height = 0;

height || 100; // 100
height = height ?? 100; // 0
//height에 값이 정의되지 않았다면 height엔 100이 할당된다.

0은 ||에게는 falsy이므로 오른쪽 100을 반환하고,
0은 nul, undefined가 아니니 ??는 원래값 height, 0을 반환하는 것이다.

연산 우선순위

??의 연산자 우선순위는 5로 꽤 낮기 때문에 다른 연산자와 사용할 때는 ()로 감싸주어야 한다.

또한, 안정성 관련 이슈 때문에 ??는 아래와 같이 ()괄호없이&&나 ||와 함께 사용할 수 없다.

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

//goood
let x = (1 && 2) ?? 3; // 동작가능

Reference JavascriptInfo