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

 

자바스크립트는 데이터 타입이 무척이나 자유분방하다. 모든 변수를 var(es6에서는 const, let 추가)로 선언된다. 그리고 데이터 타입은 이 선언 시점이 아닌 할당 시점에 결정이 된다.

 

하지만 개발을 하다보면 이러한 자바스크립트의 특징으로 인해 여러가지 문제가 발생할 때가 있다. 콘솔창에 변수값이 undefined와 null으로 찍히는 경우가 대표적이다. 비슷한듯한 이 둘의 차이를 명확히 인지하고 있어야 빠른 문제해결이 가능하다.

 

 

❙ undefined

 

변수가 선언되었지만 어떤 값도 할당되지 않은 상태이다. 할당이 되지 않았으므로 자료형이 결정되지 않았다. 따라서 'undefined'인 것이다.

 

var a;

console.log(a);

 

 

위 코드를 직접 실행해보면 결과는 다음과 같다.

 

 

 

❙ null

 

변수가 선언되었지만 비어있는 값인 'null'이 할당된 상태이다. 변수에 null이 할당되면 자바스크립트는 해당 변수의 타입을 object로 결정한다. string 타입의 경우에는 빈값이 "", number 타입은 0이 빈값의 역할을 한다. 따라서 선언과 동시에 자료형을 결정해주기 위해서는 다음과 같은 빈값들을 할당해주면 된다.

 

var a = ""; //type : string
var b = 0; //type : number
var c = null; //type : object​

 

 

❙ (null == undefined)는 true?

 

실제로 위 코드를 실행해보면 true가 찍힌다. 분명 null과 undefined는 다르다고 했던 위의 설명을 뒤엎는 결과이다. 하지만 비밀은 비교연산자 == 에 있다. 자바스크립트는 데이터 타입에 있어 자유분방한 언어라고 했다. 그리고 필요할 때면 알아서 자료형을 변환해버리기도 한다. == 연산자가 바로 그러한 특징을 가지고 있는데, 비교하는 양쪽 변수의 자료형이 다르면 강제로 형변환을 해 '변수의 값'만을 비교한다. 따라서 아래의 비교 결과도 true이다.

 

var num = 1; //number type
var str = '1'; //str type

console.log(num == str); //true

 

 

이러한 자동형변환 없이 데이터의 타입까지 비교를 하고싶다면 === 연산자를 활용하면 된다. === 연산자는 값이 같더라도 데이터의 타입이 다르다면 false를 리턴한다. 상황에 따라 적절한 비교 연산자를 사용하자.