[JS] Null인 경우 값 설정 연산, Nullish coalescing operator (??)

Nullish coalescing operator 등장 배경

Null과 유사한 값에 대해서 기본 값을 설정하고 싶을 때가 많다. 가령 DBMS에서 지원하는 ifnull, NVL같은 기능 말이다.

이런 경우 과거에는 아래와 같이 코드를 작성하였다.

// name이 falsy인 경우 기본 값 설정
const a = name || "ban"

Logical OR 연산자를 사용해 falsy(false 유사 값) 값인 경우 다음 값을 할당하는 방식이다.

그런데 이 코드는 문제점이 있다. 바로 falsy에 범위이다.

falsy로 분류되는 대표적인 몇 개의 값은 아래와 같다.

falsy values

false, 0, null, undefined, “”, …

보통 우리가 기본 값을 설정하고자 하는 경우는 “” or 0인 경우가 들어가면 안된다.

왜냐하면 실 데이터에서 값이 저렇게 설정되어 있는 경우가 있기 때문이다.

그래서 위의 코드로 작성하는 경우는 실제 값을 기본 값으로 변경할 위험성을 가지고 있다.

그러면 어떠한 경우에만 기본 값을 설정하고 싶을까? 바로 null or undefined 일 때 이다.

그리고 그 조건을 충족하는 연산자가 Nullish coalecing operator이다.

예제

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

확장

optional Chaining operator (?.) 와 함께 사용 가능 하다.

const foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"

 

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator#specifications