[JavaScript] 자바스크립트 null과 undefined의 차이

undefined란?

undefined는 자바스크립트의 원시 값(primitive type) 중 하나로, 값을 할당하지 않은 변수는 모두 undefined 자료형이다. 

 

또한 메서드나 선언에서 평가할 변수가 값을 할당받지 않은 경우, 값이 주어지지 않은 인수(parameter), 함수가 값을 명시적으로 반환하지 않는 경우에도 undefined를 반환한다.

 

 

 

[그림 1] undefined

 

 

typeof undefined의 결과는 'undefined'이다.

 

 

let x;
if( x === undefined) {
	// 실행 O
}else{
	// 실행 X
}

 

 

 

null이란?

null은 자바스크립트의 원시 값(primitive type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다.

 

 null 값은 참조 변수에(reference variable)만 할당할 수 있다. null 값은 참조 변수의 주소값이 없는 것을 표현하기 때문이다.

 

 

[그림 2] null

 

 

typeof null의 결과는 'object'이다. 

하지만 null은 객체가 아닌 원시 값임을 주의하자. 자바스크립트는 이를 구현 버그로 간주한다.

 

 

null과 undefined의 차이

let x;	// undefined

 

undefined는 개발자의 의도와 상관없이 변수가 선언되고 초기화되지 않았다면 자동으로 할당된다.

 

let x; // undefined
x = null; // null

 

반면 null은 개발자가 의도적으로 해당 변수의 값이 비어있음을 나타내기 위해 할당한다.

 

따라서 의도적으로 값이 비어있음을 나타내기 위해서는 undefined가 아닌 null 값을 할당해주는게 적절하다.

 

 

 

[그림 3]

 

 

null == undefined는 참이지만 null === undefined는 거짓이다. 

따라서 둘을 비교할 때는 '==' 연산이 아닌 '===' 연산을 해야한다.

 

if(!null){
	// 실행 O
}

if(!undefined){
	// 실행 O
}

 

null과 undefined 둘 다 boolean 연산에서는 false 로 취급한다.

 

따라서 어떤 변수가  비어있는지를 확인할 때는 둘 모두를 활용할 수 있다.

하지만 앞서 말했듯이 의도적으로 값이 비어있음을 나타내기 위해서는 null을 사용하는게 낫다.

 

 

 

 

---

참고

 

1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined

2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/null