[Javascript] 물음표 2개(??) 널 병합 연산자 (Nullish coalescing operator)

물음표 2개 ?? 로 쓰이는 널 병합 연산자(Nullish coalescing operator)는

 

왼쪽이 null 또는 undefiend일 때 오른쪽 피연산자를 출력하고,

아니면 왼쪽 피연산자를 반환하는 논리 연산자이다.

 

// 오른쪽이 null이기 때문에 콘솔창에 '널입니다'가 출력된다
const foo = null ?? '널입니다';
console.log(foo);

// 오른쪽이 undefined이기 때문에 콘솔창에 '널값입니다'가 출력된다
const foo = undefined ?? '언디파인입니다';
console.log(foo);

 

---

 

 

널병합연산자는 'falsy 값을 어떻게 처리하는가'에 따라 논리연산자 OR(||)과 동작이 다르다.

 

 

falsy 값이란?

거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 불리언 문맥에서 false로 평가되는 값입니다.

false, 숫자 0, 음수 -0, 0n, 빈 스트링(" "), null, undefiend, NaN이 falsy 값에 해당된다.

 

 

// 오른쪽 값이 null이기 때문에 foo의 값은 'string'이 된다.
const foo = null ?? 'string';

// 오른쪽 값이 null 또는 undefined가 아니기 때문에 bar의 값은 0이 된다.
const bar = 0 ?? 'string';

// 오른쪽 값이 falsy값에 해당하기 때문에 foo의 값은 'string'이 된다.
const foo = null ?? 'string';

// 오른쪽 값이 falsy값에 해당하기 때문에 bar의 값은 'string'이 된다.
const bar = 0 ?? 'string';

 

 

?? 연산자는 null 또는 undefined만 같은 값으로 치고,

|| 연산자는 falsy값에 해당하는 모든 것들을 같은 값으로 친다.

 

// 오른쪽 값이 falsy값에 해당하기 때문에 foo의 값을 'string'으로 설정한다.
const foo = null ?? 'string';

// OR 연산자도 똑같이 baz의 값을 'string'으로 설정한다.
const bar = null || 'string';

// 오른쪽 값이 null이나 undefined가 아니기 때문에 foo는 0이 된다.
const foo = 0 ?? 'string';

// 0은 falsy값에 해당하기 때문에 bar는 'string'이 된다. 
const bar = 0 || 'string';