[Javascript] 콘솔창 undefined 의미 / null과 차이점

우리가 콘솔 창에서 어떠한 식을 입력 후, 결괏값이 무엇인지 알아보기 위해서 console.log 명령어를 사용하는 경우가 있다. 그런데 항상 맨 아래에 undefined가 뜨는데 그 이유는 무엇일까?

 

 

 

 

 

목차

1. 결괏값으로 undefined가 반환되는 이유
2. undefined와 null의 차이점
3. null 값 확인 방법
4. undefined와 null 정리

 

 

console 창 undefined

 

 

 

 

1. 결괏값으로 undefined가 반환되는 이유

undefined가 식의 결괏값으로 반환되는 이유는 간단하다. undefined는 반환할 결괏값이 없을 때 나오는 것인데, console.log 명령어는 어떠한 값이 보이도록 출력하는 역할만 할 뿐 그 자체의 결괏값은 없다. 때문에 undefined가 반환되는 것이다. 

 

 

 

 

2. undefined와 null의 차이점

그렇다면 undefined와 null의 차이는 무엇일까? 자바스크립트에서는 변수에 담기는 값에 따라 자료형이 결정된다. 따라서 어떠한 값도 담기지 않아 자료형을 알 수 없는 경우 undefined라는 상태로 나타나게 된다. 

null의 경우 null이라는 값이 담긴 것으로 typeof로 확인하면 자료형이 object라는 걸 알 수 있다. (자료형이  null이 아니라 object인 것은 자바스크립트의 오래된 버그이다.)

 

 

undefined, null

 

 

 

 

 

 

3. null 값 확인 방법

undefined와 null은 빈 값이라는 점에서 같기 때문에 == 연산자를 사용하면 true 결괏값이 나온다. 하지만 undefined와 null은 당연히 같지 않다. === 연산자를 사용했을 때는 두 값이 빈 값이더라도 자료형이 다르기 때문에 false 결괏값이 나온다.

 

undefined, null 값

 

 

아래 이미지에서 알 수 있듯이 typeof 연산자로 확인해 보았을 때, undefined의 경우 undefined 타입이지만 null의 경우 object 타입이다.

 

typeof undefined, null

 

사실 null은 null 타입이 나와야 한다. 하지만 자바스크립트의 대표적인 버그로 인해 object 타입이 되었다. 때문에 값이 null인지 확인해보고 싶을 때에는 아래와 같이 확인해야 한다.

 

 

null 값 확인

 

 

 

4. undefined와 null 정리

	변수 존재 유무	값 할당	자료형
undefined	O	X	undefined (값이 없으므로 자료형도 정해지지 않음)
null	O	O (null로 값이 할당됨)	object (값이 있으므로 자료형이 정해짐)