[TIL 62] javascript | null 병합 연산자(nullish coalescing operator) '??'

개발을 하다보면, null 또는 undefined가 아닌 경우를 판별해야하는 경우가 굉장히 많다. 그럴때 유용하게 쓸 수 있는 null 병합 연산자에 대해 알아보자!

null 병합 연산자 (??)

왼쪽 피연산자가 null 또는 undefined일 때는 오른쪽 피연산자를 리턴하고, 그렇지 않으면 (즉, 확정된 값이 있다면) 왼쪽 피연산자를 리턴하는 논리 연산자

예를 들어, a가 null 혹은 undefined가 아닌 경우에는 a를 리턴하고, 그 외의 경우에는 b를 리턴하는 코드를 작성한다고 가정해보자.

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

이런식으로 작성할 수 있을 것이다.
동일한 작동을 하는 코드를 null 병합 연산자를 사용해 작성하면 이렇게 작성하면 된다.

a ?? b 

• a가 null 혹은 undefined가 아닌 경우 : a 리턴
• 그 외의 경우 : b 리턴

좀 더 구체적인 예와 함께 살펴보자.

const foo = null ?? 'value';
console.log(foo); // value

const foo = undefined ?? 'value';
console.log(foo); // value

const foo = 0 ?? 'value';
console.log(foo); // 0

그렇다면 비슷한 동작을 하는 || 연산자와는 어떻게 다른 것일까?

or 연산자 (||)와의 차이

null 병합 연산자는 or 연산자 ||와 비슷하지만 차이가 있다.

||는 첫 번째 truthy 값을 리턴한다.
??는 첫 번째 정의된(defined) 값을 리턴한다.

null과 undefined, 숫자 0을 구별해서 다뤄야할때 사용된다.
예를 들자면,

const a = 0;
const b = 'value';

console.log(a ?? b); // 0

console.log(a || b); // 'value'

변수 a가 0인 경우, ??를 사용하면 a의 값인 0이 리턴되지만 ||를 사용하면 b의 값인 'value'가 리턴된다.

Optional chaining 연산자(?.)와의 관계

null 병합 연산자는 명확한 값으로 undefined과 null을 처리하고, optional chaining 연산자는 null or undefined일 수 있는 객체의 속성에 접근할 때 사용한다.

let foo = { sayHi: "hi" };

console.log(foo.sayHi?.toUpperCase());  // "HI"
console.log(foo.sayBye?.toUpperCase()); // undefined
console.log(foo.sayBye.toUpperCase()); // TypeError