자바스크립트 null, undefined, NaN의 차이점 완벽 정리

이걸 알면 어떻게 해결할지 답이 나옵니다!

Null? Undefined? 차이가 뭔데?

자바스크립트에서 값을 명시적으로 "없다" 또는 "유효하지 않다"고 표현하는 데 사용하는 값들은 null, undefined, NaN입니다. 하지만 이들이 비슷하게 보일 수 있으나 각각의 의미와 사용되는 상황은 확연히 다릅니다. 특히, null과 undefined는 값이 "없음"을 나타낸다고 하지만 그 의미와 용도가 다르고, NaN은 수치 연산에서 "숫자가 아님"을 나타냅니다. 이 글에서는 null, undefined, NaN의 차이점과 사용 사례를 예제를 통해 자세히 살펴보겠습니다.

목차

Null-Undefined-NaN

null - 값이 없다

null은 명시적으로 값이 없거나 비어 있음을 나타내는 특별한 값입니다. 주로 객체나 변수가 의도적으로 값이 없음을 나타내기 위해 사용됩니다

let user = null;
console.log(user); // null

// 값을 일부러 Null을 준다.
let person = null;
if (person === null) {
  console.log("값이 없습니다.");
}

null은 객체를 가리키지 않거나 값이 없다는 것을 명시적으로 표현할 때 사용됩니다. 예를 들어, 데이터베이스에서 값을 찾을 수 없을 때 null을 반환할 수 있습니다.

undefined - 값이 정의되지 않았다.

undefined는 변수에 값이 할당되지 않았을 때 자바스크립트 엔진이 자동으로 할당하는 값입니다. 즉, 변수가 선언되었지만 초기화되지 않았을 때 undefined 값이 부여됩니다.

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

let b = 10;
console.log(b); // 10

undefined는 변수에 값이 할당되지 않았거나, 함수에서 명시적인 반환 값이 없을 때 자동으로 할당됩니다.
예를 들어, 함수에서 반환값이 없으면 undefined가 반환됩니다.

function helloWorld() {
  console.log("Hello!");
}
let result = helloWorld(); // undefined
console.log(result); // undefined

NaN - 숫자가 아니다.

NaN은 Not-a-Number의 약자로, 숫자 연산이 불가능한 결과로 반환되는 값입니다. 예를 들어, 숫자가 아닌 값을 숫자로 변환하려고 할 때, 혹은 수학적으로 정의되지 않는 연산(예: 0을 0으로 나누기)에서 발생합니다.

let NaN = "Hello" / 2;
console.log(NaN); // NaN

let result = 0 / 0;
console.log(result); // NaN

 

NaN은 숫자가 아닌 값을 숫자 연산하려 할 때 발생하며, 이 값은 숫자 타입에 속하지만, 실제로는 유효한 숫자가 아닙니다.

NaN과 비교

NaN은 다른 값과 비교할 때 항상 자기 자신과도 같지 않습니다. 즉, NaN === NaN은 false를 반환합니다.

console.log(NaN === NaN); // false

	정의	예제	타입
null	의도적으로 값이 없다.	let odin = null;	object
undefined	값이 할당되지 않은 변수 기본 값.	let odin; console.log(odin);	undefined
NaN	숫자 연산이 불가능한 값	"OdinBOX"/2	number

자주 발생하는 혼동

null과 undefined는 모두 값이 없다는 점에서 비슷해 보이지만, null은 의도적인 비어 있음을 나타내고 undefined는 값이 할당되지 않은 상태를 나타냅니다. NaN은 숫자가 아닌 값을 연산할 때 발생하는 특별한 값입니다. NaN은 수학적으로 정의되지 않은 값을 나타냅니다.

마무리

자바스크립트에서 null, undefined, NaN은 각기 다른 상황과 의미를 가집니다. 이 세 가지 값을 정확히 이해하고 적절하게 사용하는 것이 중요합니다. 혼동을 줄이고, 코드의 의도를 명확하게 전달하기 위해서는 각각의 차이점과 용도를 잘 파악해야 합니다.
 
null: 값이 없음을 명시적으로 표현할 때 사용
undefined: 값이 할당되지 않았을 때 자동으로 할당되는 값
NaN: 숫자 연산이 불가능할 때 반환되는 값
 
위와 같이 기억을 하고 있으면 실무나 개발을 할 때도 헷갈리는 일이 없습니다.