➕ NaN, undefined, null 완전 정리 – 차이점과 주의사항

➕ NaN, undefined, null 완전 정리 – 차이점과 주의사항

자바스크립트에서는 값이 없음을 표현하는 방식으로 NaN, undefined, null이 자주 사용됩니다.
비슷해 보이지만 의미와 사용처가 전혀 다르며, 비교할 때 주의가 필요합니다.
이번 글에서는 각각의 개념과 차이, 비교 시 주의점까지 상세히 정리합니다.

---

1. undefined란?

undefined는 자바스크립트 엔진이 자동으로 할당하는 값입니다.
즉, 초기화되지 않은 변수, 존재하지 않는 속성, 반환이 없는 함수 등이 undefined를 가집니다.

let a;
console.log(a); // 👉 undefined

const obj = {};
console.log(obj.key); // 👉 undefined

function noReturn() {}
console.log(noReturn()); // 👉 undefined

• 시스템이 기본적으로 부여하는 값
• typeof 결과: "undefined"

---

2. null이란?

null은 개발자가 의도적으로 비어 있음을 명시하기 위해 사용하는 값입니다.
즉, "값이 없음을 명시적으로 표현"하는 데 사용합니다.

const user = {
  name: "Alice",
  age: null // 아직 나이를 설정하지 않음
};

• 의도적 "빈값"을 나타냄
• typeof 결과: "object" ← 버그성 결과 (주의!)

---

3. NaN이란?

NaN (Not-a-Number)는 숫자 연산 결과가 유효하지 않을 때 발생합니다.

 **“숫자형 값으로 계산했지만 결과가 숫자가 될 수 없는 경우”**에 발생합니다. (오류 값이긴 하지만 계산 도중 생긴 "숫자형 결과"이기 때문)
숫자처럼 보이지만 계산 결과가 잘못된 경우를 나타냅니다.

console.log("abc" * 2); // 👉 NaN
console.log(0 / 0);     // 👉 NaN

console.log(typeof NaN); // 👉 "number"
// 자바스크립트에서 Number 타입은 정상적인 수 + 이상한 수 전부 포함합니다:
// NaN은 Number 타입 안의 특수 값
typeof 123            // "number"
typeof NaN            // "number"
typeof Infinity       // "number"
typeof "hello"        // "string"
typeof undefined      // "undefined"

console.log(NaN === NaN);        // false ❗
console.log(Number("abc"));      // NaN
console.log(Math.sqrt(-1));      // NaN
console.log("abc" * 3);          // NaN

const a = Number("abc");
const b = Math.sqrt(-1);
if (value === NaN) { ... }     	 // false ❗
if (Number.isNaN(value)) { ... } // true ✅

console.log(a === b);            // false
console.log(Number.isNaN(a));    // true ✅

• typeof 결과: "number" (숫자지만 유효하지 않음)
• NaN === NaN은 false입니다! (유일하게 자기 자신과 같지 않은 값)
  NaN은 정확히 어떤 값인지를 알 수 없기 때문에 서로 비교해서도 같다고 할 수 없다.
  "비정의된 결과" === "또 다른 비정의된 결과" → ❌ 비교 불가능

✅ NaN 판별할 땐 typeof가 아니라 isNaN / Number.isNaN

방법	설명	예시
isNaN(value)	느슨한 검사 (자동 형 변환)	isNaN(NaN) → true isNaN("abc") → true
Number.isNaN(value)	엄격한 검사 (정확한 NaN만)	Number.isNaN(NaN) → true, Number.isNaN( "abc") → false

---

4. 비교 정리: null vs undefined vs NaN

항목	undefined	null	NaN
정의	값이 지정되지 않음	값이 없음을 명시	유효하지 않은 숫자
typeof	"undefined"	"object" (버그)	"number"
== 비교	undefined == null 👉 true	null == undefined 👉 true	NaN == NaN 👉 false
=== 비교	undefined === null 👉 false	null === null 👉 true	NaN === NaN 👉 false

---

5. NaN 비교는 isNaN 또는 Number.isNaN

isNaN("abc");           // 👉 true (문자열도 NaN으로 변환 후 체크)
Number.isNaN("abc");    // 👉 false (엄격하게 NaN만 true)
Number.isNaN(NaN);      // 👉 true

Number.isNaN은 ES6 이후 추가된 안전한 NaN 검사 방법입니다.

---

6. 실무 팁

• undefined: 내부에서 자동으로 사용됨 → 명시적으로 사용하지 않는 것이 좋음
• null: "값이 비어 있음"을 명확히 표현하고 싶을 때 사용
• NaN: 숫자 계산 결과를 검사할 때 Number.isNaN()으로 비교

---

📌 마무리

undefined, null, NaN은 자바스크립트에서 모두 "값이 유효하지 않음"을 나타내지만,
각각의 의미와 발생 시점은 다릅니다. 이들 차이를 명확히 이해하면 조건 분기나 에러 방지에서 큰 도움이 됩니다.

다음 챕터에서는 프로토타입과 클래스 구조에 대해 다루며, 첫 글은 프로토타입 체인과 __proto__, prototype의 차이입니다.