[JavaScript]null과 undefined 차이점

null과 undefined 차이점

이번 포스팅은 JavaScript에서 null과 undefined의 차이점을 소개합니다.

---

null

null은 변수에 "값이 없음"을 의미합니다. 개발자가 변수에 null을 할당할 수 있으며, 변수에 값이 없다는 것을 의도적으로 보여주기 위한 용도로 사용됩니다.

var name = null;

console.log(name); // null

---

undefined

이름에서 알 수 있듯이 undefined는 "정의되지 않음"을 의미합니다. 따라서, 변수를 선언하였지만 값을 할당하지 않으면 undefined입니다.

 

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

 

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

var name;

console.log(name); // undefined

[크기가 3인 배열에서 5번째 요소를 접근하는 경우]

var arr = [0, 1, 2];

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

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

var person = {
  name: '둘리',
  age: 20
};

console.log(person.name);    // 둘리
console.log(person.address); // undefined

 

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

 

[변수에 undefined를 할당]

var num = undefined;

console.log(num); // undefined

[객체의 프로퍼티에 undefined를 할당]

var person = {
  name: undefined,
  age: 20
};

console.log(person.name); // undefined

---

null 및 undefined의 타입

JavaScript에서 변수의 타입을 확인하기 위해 typeof 연산자를 사용할 수 있습니다.

 

다음 예제는 typeof 연산자를 사용하여 null로 할당된 변수 그리고 값이 할당되지 않은 변수의 타입을 확인합니다.

var strNull = null;
var strUndefined;

console.log(typeof strNull); // object
console.log(typeof strUndefined); // undefined

null로 할당된 변수 strNull의 타입은 객체(object)입니다.

 

값이 할당되지 않은 변수 strUndefined는 값이 존재하지 않으므로 타입도 존재하지 않습니다. 따라서, typeof 연산자는 변수 strUndefined의 타입을 모르므로 undefined를 반환합니다.

※ null의 타입은?
사실, null의 타입은 object가 아닙니다. null은 JavaScript의 기본 타입으로 null이라는 타입이 존재합니다.

null 타입이 존재하는데, typeof 연산자가 null의 타입을 object로 반환하는 이유는 typeof 연산자에서 null을 체크하는 로직이 누락되었으며, 변수를 기획하는 과정에서 문제가 발생했기 때문입니다.

Dr. Axel Rauschmayer는 typeof 연산자를 수정하는 경우 기존 코드가 손상될 수 있으므로 위 문제를 수정할 수 없다고 언급하였습니다.

The history of “typeof null”

---

null과 undefined 비교

JavaScript에서 두 변수의 값이 동일한지 확인하기 위해 동치 연산자(==) 또는 동등 연산자(===)를 사용할 수 있습니다. 동치 연산자(==)는 값만 비교하며, 동등 연산자는(===)는 값과 데이터 타입을 비교합니다.

 

동치 연산자(==)와 동등 연산자(===)의 차이점을 이해하기 위해 다음 간단한 예제를 살펴봅시다.

console.log(typeof(1));   // number
console.log(typeof('1')); // string

console.log(1 == '1');  // true
console.log(1 === '1'); // false

number 타입인 1과 string 타입인 '1'은 데이터 타입이 다르지만, 값은 동일합니다. 따라서, 동치 연산자(==)는 true를 반환하고 동등 연산자(===)는 false를 반환합니다.

 

다음 예제는 null과 undefined를 동치 연산자(==)와 동등 연산자(===)로 비교합니다.

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 + 10); // 10
console.log(num);      // null

 

하지만, 값이 할당되지 않은 변수 또는 undefined에 산술 연산을 수행하는 경우 결과는 NaN(Not a Number)입니다.

var num;

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