<aside> 📌

</aside>

📚 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
   

   • truthy한 값 예시

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

   • 사용 예시

     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