Javascript의 Nullish 병합(??)

기초

시작하기 전에 기본 개념부터 살펴보겠습니다.

JavaScript에는 undefined , null , NaN , 0 , "" , false 6개의 잘못된 값이 있습니다.

위의 값은 조건에서 false 값으로 간주됩니다. learn more

소개

왼쪽 피연산자가 거짓이면 일반적으로 논리 OR( || ) 연산자를 사용하여 오른쪽 피연산자를 반환합니다.

구문은 leftExpression || rightExpressionleftExpression가 사실이면 반환됩니다.
leftExpression가 거짓이면 rightExpression가 반환됩니다.

예를 들어:

let falsyValue = 0;
let truthyValue = 1;

console.log(falsyValue || 'printed'); //output: 'printed'
console.log(truthyValue || 'nope'); //output: 1

0 또는 ""(빈 문자열)을 유효한 값으로 간주하면 예기치 않은 문제가 발생할 수 있습니다.

이것이 Nullish Coalescing( ?? ) 연산자가 우리를 도와주는 곳입니다. ES2020에 도입되었습니다.

무효화 합체(??)

Nullish Coalescing( ?? ) 연산자는 왼쪽 표현식이 null인 경우 오른쪽 표현식을 반환하는 데 사용됩니다.

A nullish value is a value that is either null or undefined.

다음은 표현식의 몇 가지 예입니다.

// comments represent the value returned

0 ?? 'expressionB' // 0
0 || 'expressionB' // expressionB

'' ?? 'expressionB' // ''
'' || 'expressionB' // expressionB

null ?? 'expressionB' // expressionB
null || 'expressionB' // expressionB

undefined ?? 'expressionB' // expressionB
undefined || 'expressionB' // expressionB

let object = {}; // same for [] as well
object ?? 'expressionB' // {}
object || 'expressionB' // {} 

단락

AND( && ) 및 OR( || ) 연산자와 유사하게 Nullish Coalescing( ?? )도 단락되어 왼쪽 피연산자가 null도 아니고 undefined도 아닌 경우 오른쪽 피연산자를 실행하지 않습니다. .

체이닝

?? 또는 && 연산자를 사용하여 ||를 연결하면 SyntaxError가 발생합니다.

 null || undefined ?? 'OK'; // Uncaught SyntaxError: Unexpected token '??'

이것은 괄호를 사용하여 연산자 우선 순위를 명시적으로 지정함으로써 피할 수 있습니다.

(null || undefined) ?? 'OK'; // "OK"

참고문헌

JavaScript Nullish Coalescing Operator