[JS] nullish 병합 연산자 '??'

nullish 병합 연산자 '??'

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

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

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

let x = 3;
console.log(x??100); // 3
            
x = null;
console.log(x??100); // 100

x = a ?? b와 동일한 동작을 하는 코드

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

예시

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
// 세 변수 다 값이 없다면 '익명의 사용자'가 출력
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

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

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

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

예시

// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

'??'와 '||' 비교

let height = 0;

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

0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

연산자 우선순위

??는 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다. 따라서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋습니다.

let height = null;
let width = null;

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

제약

괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있습니다.

// 괄호사용
let x = (1 && 2) ?? 3;

alert(x); // 2