JS에서의 falsy

JS에서 거짓의 값으로 판별되는 것들에는 어떤 것들이 있을까?

1. 0 (숫자 0)
2. false
3. undefined
4. null
5. "" (빈 문자열)
6. NaN

이렇게 총 6개가 있다.

예시 1

예를 들면 이런 것이다.

// 어느것도 실행되지 않는다!!

if(0){
  console.log("true일 때 실행됩니다.");
}

if(false){
  console.log("true일 때 실행됩니다.");
}

if(undefined){
  console.log("true일 때 실행됩니다.");
}
if(null){
  console.log("true일 때 실행됩니다.");
}

if(""){
  console.log("true일 때 실행됩니다.");
}

if(NaN){
  console.log("true일 때 실행됩니다.");
}

조건이 모두 false이기 때문에 내부 코드는 그 어떤 것도 실행되지 않는다.

예시 2

예시를 하나 더 보자.
test라는 상수에 falsy한 값들을 넣어주면 if문을 만족해서 코드가 실행되는 코드이다.

const test = NaN;

if(test === 0 || test === false || test === undefined || test === null || test === "" || test === NaN){
  console.log("거짓일 경우 실행됩니다.");
}

위 코드는 실행될까?

정답은...안된다.
실행되지않는다.

??????

아니 조건에

test === NaN이라고 떡하니 있는데요?
그렇다. 예외적인 상황이다.

NaN 판별

아래 예시를 보자.

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

function valueIsNaN(v) { return v !== v; }
valueIsNaN(1);          // false
valueIsNaN(NaN);        // true
valueIsNaN(Number.NaN); // true

단순 비교를 통해 당연하게 true가 나올 것이라고 생각했던 곳에서,
false인 것을 확인 할 수 있다.

이유가 뭘까??

NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. NaN의 판별은 Number.isNaN() 또는 isNaN()을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다.
- MDN docs -

그렇다. 단순 비교로는 NaN을 판별할 수 없는 것이다.
isNaN()이라는 메서드를 사용할 필요가 있다.

따라서, 예시 2에서 봤던 코드를 올바르게 사용하고자한다면

test === NaN

이라는 부분을

// test가 NaN일 경우 true 반환
isNaN(test)

으로 바꿔줘야한다는 것이다.

참고 자료

NaN - MDN docs
isNaN - MDN docs