결론

• undefined : 초기화된적 없는 상태(var 키워드로 선언된 변수에 암묵적으로 할당하는 것도 포함)를 나타내는 데이터 타입이자 값
• null : 값이 없다는 것을 의도적으로 명시할 때 사용하는 데이터 타입이자 값
• NaN : JS에서만 존재하는 값으로 ‘숫자가 아니다’를 의미하는 값 (Not a Number)

설명

원시 타입 & 참조 타입에서 설명했듯이 undefined와 null은 원시 타입에 속하는 데이터 타입이고, NaN은 원시 타입 중 숫자 타입에 속하는 값이다. 즉, undefined와 null은 데이터 타입이고, NaN은 그저 값이다.

그러나 undefined 타입에 속하는 값은 undefined뿐이고, null 타입에 속하는 값도 null뿐이므로 undefined와 null은 데이터 타입이면서 값이기도 하다.

• undefined: 데이터 타입이자 값
• null : 데이터 타입이자 값
• NaN : 데이터 타입 중 숫자 타입에 속하는 값

NaN

NaN은 JS에만 존재하는 특이한 값으로, 주의해야 할 점이 몇 가지 있다.

console.log(1 + 'a') // 1a
console.log(1 - 'a') // NaN
console.log(1 * 'a') // NaN
console.log(1 / 'a') // NaN

일단 NaN을 어느 상황에 마주칠 수 있는지 알아보자. NaN은 숫자로 변환되지 않은 문자열과의 연산 등 잘못된 수식으로 인하여 발생한 값을 나타낸다. (+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작하므로 결과가 NaN이 아니다.)

NaN을 사용할시 주의해야 할 점은 자바스크립트는 대소문자를 구별하므로 NaN을 NAN, Nan, nan과 같이 표현하면 에러가 발생한다는 점이다. 예시와 같이 잘못 표기할 경우 값이 아닌 식별자로 해석한다.

또, Nan === NaN의 결과는 false인 점을 주의해야 한다. (NaN은 자신과 일치하지 않는 유일한 값이다.) NaN을 검사하기 위해서는 isNaN()이라는 함수를 사용해야 한다.

Type

console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof NaN) // number

첫 번째와 세 번째의 결과는 납득 가능하다. undefined의 데이터 타입은 undefined, NaN의 데이터 타입은 number이 맞으니까 말이다.

그런데 두 번째 결과, null의 타입이 object라는 것은 뭔가 이상하다. 분명 null은 객체 타입이 아닌 원시 타입 중 하나라고 했는데 이게 어찌된 일일까? 이는 자바스크립트의 버그이다. 그러나 기존 코드에 미치는 영향이 너무 커서 수정하지 않기로 결정했다고 한다. 그러므로 null은 === (일치 비교 연산자)를 통해 검사해야 한다.

Falsy

Truthy & Falsy에서 설명했듯이 undefined, null, NaN의 공통점은 모두 Falsy라는 점이다. 즉, boolean으로 형변환 시 false로 취급되는 값이다.

console.log(!!undefined) // false
console.log(!!null) // false
console.log(!!NaN) // false

추가 학습

• 원시 타입 & 참조 타입
• Truthy & Falsy
• == vs ===

참고

• [책] 모던 자바스크립트 Deep Dive (06_데이터 타입)