[JavaScript] Nullish값이란?

Nullish값이란?

이전 글에서 자바스크립트의 모든 값은 Truthy와 Falsy로 나누어 진다고 했다.

그렇다면, Nullish값은 무엇인가?

Nullish: ‘값이 없음’ 을 반환하는 값들

• null
• undefined

Nullish의 개념은 [ES2020]에서 새롭게 추가되었는데, Falsy값에 포함된 'null'과 'undefined'를 false가 아닌 '값이 없음'으로 판별하기 위해 사용된다.

Nullish값은 Nullish coalescing operator(??) 와 Logical nullish assignment(??=), 이 두 연산자와 함께 쓸 수 있다.

Nullish coalescing operator(??)

Nullish coalescing operator는 왼쪽 피연산자가 Nullish(null or undefined)값이면 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환한다.

참고: Logical OR operator(||)는 왼쪽 피연산자가 Falsy값이면 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환한다. 또한, || 연산자는 null과 undefined를 Falsy값으로 판별한다.

아래 예시를 통해 알아보자.

console.log(null || 'falsy'); //returns 'falsy'
console.log(undefined || 'falsy'); //returns 'falsy'
console.log('' || 'falsy'); //returns 'falsy'
console.log(0 || 'falsy'); //returns 'falsy'

console.log(null ?? 'nullish'); //returns 'nullish'
console.log(undefined ?? 'nullish'); //returns 'nullish'
console.log('' ?? 'nullish'); //returns ''
console.log(0 ?? 'nullish'); //returns 0

Logical nullish assignment(??=)

Logical nullish assignment(??=)는 왼쪽 피연산자가 Nullish값이면 오른쪽 피연산자를 할당하고, 그렇지 않으면 왼쪽 피연산자를 할당한다.

참고: Logical OR assignment(||=)는 왼쪽 피연산자가 Falsy값이면 오른쪽 피연산자를 할당하고, 그렇지 않으면 왼쪽 피연산자를 할당한다.

아래 예시를 통해 알아보자.

var arr = [null, undefined, '', 0];

for(var i = 0; i < arr.length; i++){
  arr[i] ||= 'falsy';
  console.log(arr[i]);
}
// Expected Output:
// "falsy"
// "falsy"
// "falsy"
// "falsy"

var arr2 = [null, undefined, '', 0];

for(var i = 0; i < arr2.length; i++){
  arr2[i] ??= 'null';
  console.log(arr2[i]);
}
// Expected Output:
// "null"
// "null"
// ""
// 0