FrontEndJavaScript

[JS] null과 undefined 비교

FrontEnd, JavaScript

null과 undefined 비교

null과 undefined는 비슷해보이지만 엄연히 다르다. 이 두 개의 개념 차이를 명확히 알아두자.

undefined

먼저 undefined에 대해 알아보자. undefined는 변수를 선언만 하고 값을 할당하지 않은 것. 즉, 자료형이 결정되지 않은 상태이다.

1
2
3
var a;
document.write(a); // 출력결과 > undefined
document.write(typeof a); // 출력결과 > undefined

위의 예시를 보면, a라는 변수를 선언만하고 값을 할당하지 않았기 때문에, 변수 a를 출력하면 undefined가 출력되고, 변수 a의 자료형이 결정되지 않은 상태이기 때문에, 변수 a의 type을 출력해도 undefined가 출력된다.


null

반면에 null은 변수를 선언하고, null이라는 빈 값을 할당한 것이다.

1
2
3
var b = null; // null이라는 빈 값을 할당했다.
document.write(b); // 출력결과 > null
document.write(typeof b); // 출력결과 > object

위의 예시를 보면 b라는 변수를 선언한 후, null이라는 값을 할당했다. null값은 객체로 취급되기 때문에, 변수 b를 출력하면 null이 출력되고, 변수 b의 type을 출력하면 object가 출력된다.


null == undefined의 결과는 true

아니, 지금까지 null과 undefined는 다른 것이라고 설명해 놓고 null == undefined의 결과는 왜 true인가?

1
2
document.write(null == undefined); // 출력결과 > true
document.write(null === undefined); // 출력결과 > false

비교 연산자 ==는 자료형이 다르면 자동 형변환으로 자료형을 강제로 맞춰서 비교한다. 따라서 undefined와 null은 자료형이 다르니 자바스크립트 엔진에서 자동으로 자료형을 강제로 맞춘 후, 둘 다 값이 없는 것이라는 사실을 확인하기 때문에 true를 반환한다.

반면에, 비교 연산자 ===는 자료형까지 동일한지 비교하기 때문에 null === undefined는 false를 반환한다.

Share