undefined vs null vs NaN

undefined

해당 변수가 비어있는 상태임을 나타낸다. boolean으로 형변환이 일어나는 경우 false가 된다.

const foo;
console.log(foo); // undefined
console.log(typeof foo); // "undefined"
console.log(!foo); // true

null

비어있음을 의미하는 값이다. boolean으로 형변환이 일어나는 경우 false가 된다.

const bar = null;
console.log(bar); // null
console.log(typeof bar); // "object"
console.log(!bar); // true

null의 type이 "object" 인 것은 javascript의 설계상 오류이다.
null은 object와 같은 수준의 원시타입이기 때문에 typeof의 결과값은 "null"이 좀 더 바람직해보인다. 그러나 이를 변경했을 때 기존 코드에 미치는 영향이 너무 커서 수정하지 않기로 했다고 한다.

NaN

Not a Number를 의미한다. 숫자로 변환되지 않는 문자열과의 나누기 연산 등 잘못된 수식으로 인하여 발생한 값을 나타낸다. null과 undefined와 마찬가지로 boolean 형변환 결과는 false이다

const baz = 1 / "a";
console.log(baz); // NaN
console.log(typeof baz); // "number"
console.log(!baz); // true

덧셈의 경우는 숫자가 문자열로 형변환이 일어나 결과가 NaN이 아님을 주의하자.

const able = 1 + "a";
console.log(able) // "1a"

null과 undefined와는 다르게 NaN의 경우 동치연산의 결과가 false 임을 주의하자.

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

NaN인지 아닌지를 구분하기 위해서는 isNaN() 함수를 활용하자.

console.log(isNaN(NaN)) // true
console.log(isNaN(0)) // false
console.log(isNaN('0')) // true

참조

https://twitter.com/ddprrt/status/1074955395528040448