Javascript : null과 undefined의 차이

자바스크립트에서 null과 undefined는 둘 다 값이 없음을 나타내는 특별한 값이다. 그러나 둘은 서로 다른 의미와 용도를 가지고 있다. 둘의 차이에 대해 알아보자.

null

null은 값이 없음을 의도적으로 나타내기 위해 사용되는 값이다.
즉, null은 개발자가 변수에 명시적으로 값을 할당하여 값이 없음을 나타내는 것이다.

var name = null;

console.log(name); // null

undefined

undefined는 변수가 선언되었지만 값이 할당되지 않았을 때 자동으로 할당되는 값이다. 예를 들어, 아래의 코드에서 x는 undefined로 할당된다.

null과 마찬가지로 변수 또는 객체의 프로퍼티에 직접 undefined를 할당할 수 있다. 하지만, 변수에 undefined를 할당하는 경우 애플리케이션 실행 도중 치명적인 문제가 발생할 수 있으므로 값이 없다는 것을 명시하려면, undefined보다 null을 할당하는 것이 낫다.

var x;

console.log(x); // undefined

값이 할당되지 않은 변수, 배열의 특정 요소에 값이 할당되지 않은 경우, 존재하지 않는 프로퍼티를 접근하는 경우이다.

[변수는 선언되었지만, 값이 할당되지 않은 경우]

let name;

console.log(name); // undefined

[배열의 특정 요소에 값이 할당되지 않은 경우]

 var arr = [0,1,2];

 console.log(arr[4]); //undefined

[존재하지 않는 프로퍼티를 접근하는 경우]

var obj = {
  name: "John",
  age: null
};

console.log(obj.name) // John
console.log(obj.age); // null

typeof 주의

또한 typeof null은 object 라는 것에 주의해야 한다.

동등연산자(==)를 사용하면 두 값이 같다고 간주하기 때문에 이를 구별하기 위해서는 엄격한 일치연산자(===)를 사용할 것을 권장한다.

console.log(null == undefined); // true
console.log(null === undefined); // false

null과 undefined는 값이 없다는 맥락에서 보면, 동일한 의미를 가지므로 동치 연산자(==)는 true를 반환합니다. 하지만, 동등 연산자(===)는 false를 반환한다.

null의 타입은 null이며, undefined의 타입은 undefined이다. 즉, null과 undefined의 데이터 타입은 다르기 때문에 동등연산자는 false를 반환한다.

산술 연산 차이

null과 undefined는 산술 연산에서 다르게 동작한다.

null로 할당된 변수 또는 null에 산술 연산을 수행하는 경우 null은 0으로 변환된다.

var num = null;

console.log(num + 30); // 30
console.log(num);      // null

하지만, 값이 할당되지 않은 변수나 undefined에서 결과는 NaN(Not a Number)이다.

var num;

console.log(num + 10); // NaN
console.log(num);      // undefined

null,undefined```