Falsy값 중 undefined, null, NaN에 대해 알아보고 비교해보려한다.

Falsy

boolean 형식으로 변환했을 때 false가 되는 값이다.
아래 나열된 값들이 Falsy이며 이 외 값은 모두 Truthy이다.

• undefined
• null
• NaN
• 0, -0
• "", '', ``
• false

undefined

"값이 없음, 초기화한 적 없음"
선언은 되었으나 값이 할당 되지 않은 상태
객체에서 존재하지 않는 속성을 접근하는 경우

Number(undefined) // NaN
Boolean(undefined) // false
undefined === undefined // true
typeof undefined // undefined

적용예시

// 초기값이 할당되지 않은 변수
let x;
console.log(x); // undefined

// 초기값이 할당되지 않은 매개변수
function foo (x, y) {
  console.log(x); // 1
  console.log(y); // undefined
}
foo(1);

// 객체에서 존재하지 않는 속성을 접근하는 경우
const obj = {
  name: 'gomi'
};
console.log(obj.age); // undefined

null

"값이 없음"
명시적으로 값이 비어있음을 나타내는데 사용
아무것도 참조하고 있지 않다라는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용
초기화 해주어야 가질 수 있는 상태 (null이라는 값을 할당)

Number(null) // 0 
Boolean(null) // false
null === null // true
typeof null // object

• typeof null 결과가 object인 것은 자바스크립트의 초기버전에서부터 이어진 버그 참고자료
  null 검사 시 typeof를 사용하지 않도록 주의해야 한다.

📌 undefined과 null

차이점

둘 다 없음을 나타내는 값이지만
undefined는 대입한 적 없는 변수 혹은 속성에 사용되고
null은 명시적으로 값이 없음을 나타내고자 할 때 의도를 갖고 변수에 null을 할당한다.

주의점

• 동등 연산자를 이용해 비교하여야 한다.
  undefined과 null은 둘 다 false이므로 undefined과 == null 실행 시 true가 반환된다.
  undefined과 === null 동등 연산자를 사용해야 false가 반환된다.
  
• NaN생성의 가능성이 있다면 비교연산을 행해서는 안된다.
  NaN과의 비교연산에서 모두 false를 반환한다.

console.log(NaN==undefined);//false
console.log(NaN==null);//false
console.log(undefined==null);//true

---

NaN

"Not A Number"
주로 숫자가 아닌 값을 숫자로 치환하거나 나누기 연산 등에서 발생하곤 한다. ex) Number("str")

Number(undefined | string) // NaN 
Boolean(NaN) // false 
NaN === NaN // false
typeof NaN // number

• NaN === NaN으로 비교할 수 없다. isNaN()이라는 전용함수를 사용해 검사해야 한다.

isNaN(NaN) // true
isNaN(0) // false
isNaN('0') // true

주의점

• isNaN함수는 문자열이나 객체를 입력해도 true를 반환한다.

참고자료
RyuK 성장 일지
Web Club