nullish와 falsy의 차이

 

노션🔗에 작성한 글을 옮긴 것입니다. 노션이 더 보기 편합니다.

📚 nullish와 falsy란?

nullish

• 오직 null과 undefind만 nullish 값으로 취급한다.
• nullish 값은 모두 falsy하다. (nullish ⊂ falsy)

관련 연산자

1. Nullishing coalescing operator(??)

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

const ex1 = 1 ?? 0;          // 1
const ex2 = null ?? 0;       // 0
const ex2 = undefined ?? 0;  // 0

 

2. optional chaing(?.)

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish하다면 에러가 발생하는 것 대신에 표현식이 undefined를 리턴하게 된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면 undefined를 리턴한다.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

 

3. Non-null assertion(!)

접미에 붙는 !(단언 연산자)는 피연산자가 nullish(null 또는 undefined)하지 않음을 단언할 때 사용한다.

// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
  // Throw exception if e is null or invalid entity
}
function processEntity(e?: Entity) {
  validateEntity(e);
  let s = e!.name; // e가 null이 아니고 확실히 존재한다고 단언
}

null이나 undefined가 될 수 있는 값에 이 연산자를 사용하면 런타임 에러가 발생할 수 있으므로 조심히 사용해야 한다. 이걸 쓰면 타입스크립트의 타입 체크 이점도 활용하지 못하는 셈이니 웬만하면 쓰지 말자.

falsy

• boolean 문맥에서 false로 평가되는 값
• Javascript에서는 조건절, 반복절 등 boolean 값이 필요한 곳에서 형 변환을 통해 특정 값을 boolean 값으로 변환한다.
• Javascript에서 falsy한 값들

값	타입	설명
null	Null	null 키워드는 아무런 값도 없음을 의미.
undefined	Undefined	undefined는 원시값을 의미.
false	Boolean	false 키워드.
NaN	Number	NaN은 숫자가 아님을 의미.
0	Number	The Number 0, 0.0, 0x0 등도 포함.
-0	Number	The Number 음수 0, -0.0, -0x0 등도 포함.
0n	BigInt	- The BigInt 0, 0x0n 등도 포함.
""	String	비어있는 string 값, also ''도 포함.
document.all	Object	JavaScript의 유일한 falsy한 객체는 내장 document.all이다.

관련 연산자

1. Logical OR(||)

논리적 OR는 피연산자 중 하나 이상이 참인 경우에만 참이다. 일반적으로 boolean 값과 함께 사용되며, 이 경우에는 boolean 값을 반환한다. 그렇지만 boolean이 아닌 값과 함께 사용하면 boolean이 아닌 값이 반환된다.

true || true; // t || t returns true
false || true; // f || t returns true
true || false; // t || f returns true
false || 3 === 4; // f || f returns false
"Cat" || "Dog"; // t || t returns "Cat"
false || "Cat"; // f || t returns "Cat"
"Cat" || false; // t || f returns "Cat"
"" || false; // f || f returns false
false || ""; // f || f returns ""
false || varObject; // f || object returns varObject

 

2. Double Bang(!!)

!! 연산자는 피연산자를 boolean 값으로 변환해주는 연산자이다. truthy한 값은 true, falsy한 값은 false를 리턴한다.

!!true  // returns true
!!false  // returns false

 

2-1) truthy한 값 예시

• Object: {}
• Array: []
• 비지 않은 문자열: “anything”
• 0이 아닌 숫자: 3.14
• Date: new Date()

2-2) 사용 예시

isLoggedIn: !!localStorage.getItem('accessToken')
// localStorage에 'accessToken'이라는 아이템이 있으면 true, 없으면 false

🔗 참고 자료

• https://developer.mozilla.org/ko/docs/Glossary/Nullish
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
  • https://ko.javascript.info/nullish-coalescing-operator
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
  • https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator
• https://developer.mozilla.org/ko/docs/Glossary/Falsy
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Logical_OR
  • https://dev.to/sanchithasr/what-is-the-double-bang-operator-in-javascript-4i3h