Undefined vs null vs NaN

목차

1. falsy들

2. null

3. undefined

4. NaN

---

1. falsy들

정확히 뭐가 다른지는 모르겠지만 아무튼 개발 중 만나고 싶지는 않은 Undefind, null, NaN이 있다.

 

0, null, undefind, NaN을 설명하는 걸로 유명한 밈인데 이것들에 대해서 더 잘 알아보자.

 

간단한 요약 설명

	null	undefined	NaN
의미	의도적으로 값이 없음	값이 아직 정의되지 않음(초기화x) 값이 존재하지 않음(미정)	숫자가 아님
자료형	object	undefined	number
주 사용 의도	'값 없음'을 명시적으로 표현	값이 '아직 설정되지 않음'을 표현	연산 결과가 '유효하지 않음'을 표현

 

---

2. null

null은 Null type의 유일한 값으로, 의도적인 객체의 부재를 나타낸다. (absence of any object value)

1. 발생 상황

개발자가 의도적으로 할당	let x = null;
DOM API 등에서 값 없음을 반환	document.querySelector('#id') → 해당 id가 가지는 요소가 없으면 null 반환
함수에서 의도적으로 반환	return null;

 

 

2. JS 엔진 구현

• 대부분의 JS엔진에서 특수 비트 패턴으로 표현
  • 타입 태그(상위 비트) : Null type
  • 실제 값(하위 비트) : 0x0 (null pointer)
• 내부적으로 null은 0x00(null pointer)과 유사하게 빈 참조로 처리됨
  → typeof에서 object로 분류되는 버그의 이유

 

---

3. undefined

undefined는 Undefined type의 유일한 값으로, 값이 아직 정의되지 않음, 존재하지 않는 값을 나타낸다.

 

1. 발생 상황

선언만 하고 값을 할당하지 않음	let a;
존재하지 않는 객체 프로퍼티에 접근	obj.noSuchKey
반환값이 없는 함수를 호출	function ex() { }; ex();
배열에서 존재하지 않는 인덱스에 접근	const arr[1, 2]; let x = arr[2];

 

2. JS 엔진 구현

• 대부분의 JS엔진에서 특수 비트 패턴으로 표현
  • 타입 태그(상위 비트) : Undefined type
  • 실제 값(하위 비트) : 0x0
• undefined를 전역적으로 단 하나의 상수 값으로 유지한다.
  • JS엔진이 실행될 때, undefined값은 오직 하나만 존재한다.
  • 매번 새로 만들어지는 값이 아니라, 미리 준비된 하나의 고정값이다.

let a;
let b;
console.log(a === b);	// true, a와 b는 같은 상수값 undefined를 가리킴

• undefined 식별자는 전역 객체(globalThis)의 읽기 전용 프로퍼티다.
  
  • 전역 객체 = 브라우저의 window = node.js의 global = globalThis(통일)로,
    JS 전역에서 접근 가능한 모든 builtin value(Array, Math, NaN, undefined 등)이 들어있다.

console.log(globalThis.undefined);    // undefined
console.log(undefined);    // undefined, 위의 접근과 같다

 

3. 변환/비교

변환/비교	결과
typeof undefined	"undefined"
Boolean(undefined)	false
Number(undefined)	NaN
String(undefined)	"undefined"
undefined == null	true
undefined === null	false
undefined.foo	typeEror

 

---

4. NaN

Not a Number의 약자로, 숫자가 아님을 나타낸다.

Number type에 속하는 특수한 숫자 값이다.

 

1. 발생 상황

0을 0으로 나눌 때	0 / 0
숫자가 아닌 값을 숫자로 변환 시	Number("abc")
부적절한 산술 연산	Math.sqrt(-1)
정의되지 않은 수학 함수 결과	parseInt("foo")
피연산자가 NaN일 때	NaN + 5

 

2. JS 엔진 구현

• 대부분의 JS엔진에서 특수 비트 패턴으로 표현
  • 타입 태그(상위 비트) : Number type
  • 실제 값(하위 비트) : IEEE 754 64비트 이중정밀도 부동소수점에 따른 NaN 비트 패턴
    → 11비트의 지수부가 모두 1이고, 52비트의 가수부가 0이 아님 (가수부가 0이면 Infinity)

 

 

3. 변환/비교

연산/변환 결과 설명

typeof NaN	"number"
Boolean(NaN)	false
Number(NaN)	NaN
String(NaN)	"NaN"
NaN == NaN	false
NaN === NaN	false
isNaN(NaN)	true
Number.isNaN(NaN)	true
NaN != NaN	true
NaN !== NaN	true

 

 

참고

https://velog.io/@ehrud1031/NaN-vs-null-vs-undefined

NaN vs null vs undefined

https://inpa.tistory.com/entry/%F0%9F%93%9A-null-undefined-NaN

[JS] 📚 재미있게 확실히 이해하는 null / undefined / NaN 차이

https://2ality.com/2013/10/typeof-null.html

The history of “typeof null”

https://2ality.com/2013/04/quirk-undefined.html

JavaScript quirk 2: two “non-values” – undefined and null

https://anstrengung-jh.tistory.com/103

null과 undefined에 관한 고찰