[JavaScript] nullish 병합 연산자 (??)

nullish 병합 연산자는 왼쪽 연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

 

개념은 대충 알겠고 예제를 통해 좀 더 자세히 알아보자.

---

nullish 기본 사용법

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

// null이나 undefined가 아닌 첫 번째 피연산자
console.log(firstName ?? lastName ?? nickName ?? "무명"); // 바이올렛

본문 시작할 때 설명한 것처럼 null이거나 undefined가 아닌 값이 나올 때 해당 값이 출력되는 구조이다.

 

우리가 흔히 사용하는 논리연산자는 OR을 의미하는 '||' 연산자일 텐데,

이 연산자를 많이 사용해봤다면 알겠지만 아주 불편한 점이 왼쪽 피연산자가 boolean으로 강제로 변환되어 false인지를 체크하기 때문에 0이나 ''(빈 값)을 그대로 출력하고 싶어도 출력할 수 없는 아이러니한 상황이 발생한다.

([JavaScript] 비교 시  false로 간주되는 것들)

 

그럴 때 nullish를 사용하면 된다.

nullish와 || 연산자 비교

let myText = ''; // An empty string (which is also a falsy value)

let notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world

let preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

let height = 0;
console.log(height || 100); // 100
console.log(height ?? 100); // 0

0이나 ""를 할당하기 위해 nullish를 사용하면 좋은데, 하나 알아둬야 할 점은 NaN 역시 유효한 값으로 생각한다는 점이다.

 

No chaining with AND or OR operators

And(&&) 와 OR 연산자(||)를 nullish(??)와 직접적으로 결합하여 사용하는 경우는 불가능하다.

null || undefined ?? "foo"; // raises a SyntaxError
true || undefined ?? "foo"; // raises a SyntaxError

하지만 우선순위를 명시적으로 나타내기 위해 괄호를 사용하면 가능하다.

(null || undefined ) ?? "foo"; // returns "foo"

그리고 추가적으로 nullish는 우선순위가 생각보다 많이 낮기 때문에 다른 연산자들과 사용하려면 괄호를 이용해 주는 게 좋다. (nullish(??)의 연산자 우선순위는 5라고 한다.)

---

참고: https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN