null과 undefined를 단순히 ‘값이 없는’ 이라는 의미로 해석하여 교체 사용하려해서는 안된다. JavaScript에서 null과 undefined의 차이를 알아보고 적재적소에 사용하도록 해보자.
null
값이 없음, 비어있음, 0, invalid 라는 의미를 갖고 있다.
존재하고 있는 값을 지울때 사용한다.
null을 프로그래머가 의도적으로 특정 변수에 할당하여 ‘값이 없음’ 이라는 의미를 부여.
undefined
undefined는 global 객체에 속한 프로퍼티이다.
정의되지 않은 값을 의미한다.
예) 변수 선언은 하였지만 값을 아직 할당해 주지 않았을 때
자바스크립트를 쓰면서 undefined를 마주하게 되는 상황은 여러가지가 있다.
- 선언만 하고 초기화를 안한 상황
- 배열의 인덱스가 존재하지 않는 상황
- 객체의 프로퍼티가 존재하지 않는 상황
- 함수에 return 값이 존재하지 않는 상황
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*1번의 상황*/ var newValue; // undefined /*2번의 상황*/ var newObj = ['first', 'second', 'third']; newObj[3]; // undefined /*3번의 상황*/ var areaCode = {NJ: 201, NY: 212, UT: 435}; areaCode.SF // undefined /*4번의 상황*/ var calTotal = (function() { })(); // undefined | cs |
타언어를 접해본 사람이라면 undefined가 null과 같다고 생각하여 변수의 값에 undefined를 할당하는 경우가 있다. 그로인해 오류가 나지는 않지만 그렇게 하지 않는 것이 좋다. undefined는 자바엔진으로부터 자동으로 주어지는 값이다. ‘값이 아직 할당되지 않음’이라는 의미를 내포하고 있다.
만약 특정 변수에 undefined를 할당하게된다면 다른 개발자에게 혼돈을 줄 수 있다. ‘값이 없음’이라는 의미를 주기 위해서는 null을 사용하는 것이 좋다.
null과 undefined는 모두 원시타입데이터이며 falsy한 값을 갖고 있다. 그래서 둘의 값을 반전시켰을때 true 를 반환하게 된다.
1 2 | console.log(!null); // true console.log(!undefined); // true | cs |
’==’ 를 만난 null과 undefined는 boolean 으로 형변환 될 시 둘 다 false 가 되기 때문에 true 를 반환하게 된다. 형변환이 일어나지 않는 ’===’ 로 비교하였을시에는 false 를 반환환다.
1 2 | null == undefined; // true null === undefined; // false | cs |
Automatic Type Conversion
자동형변환이 발생할때 null 과 undefined 는 차이를 보인다.
null과 undefined가 숫자와 조합될 때 아래와 같은 형변환이 발생한다.
null → 0
undefined → NaN
1 2 3 4 5 | console.log(null + 2019); // 2019 console.log(undefined + 2019); // NaN console.log(null * 2019); // 0 console.log(undefined * 2019); // NaN | cs |
typeof
typeof 연산자를 사용하였을때 null은 object를 반환하여 의아할 수 있다.
object라고 반환되는 이유는 null은 빈객체를 가리키고 있기 때문이다. 반면, undefined는 그대로 undefined를 반환한다.
1 2 | typeof null; // "object" typeof undefined; // "undefined" | cs |