[Javascript] null vs undefined

척척 프로그래밍, 인프준

 

 

 

 

 

 

 

 

 

 

들어가며

자바스크립트에서 null과 undefined는 값이 없음을 나타내는 데 사용됩니다. 이 두 가지 값은 자바스크립트 프로그래밍에서 매우 일반적이며, 개발자들은 이 두 값이 어떤 차이가 있는지 이해해야 합니다. 따라서 이번 글에서는 null과 undefined의 차이에 대해 자세히 알아보려 합니다.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

Null

null은 의도적으로 값이 없음을 나타내는 특별한 값입니다. 변수에 null 값을 할당하면 변수의 이전 값이 제거되고 null 값이 할당됩니다. 이러한 방식으로 null 값을 사용하여 객체의 속성을 삭제하는 것이 일반적입니다.

 

let x = null;
console.log(x); // null

 

 

 

 

---

 

 

 

 

 

Undefined

undefined는 변수가 값이 없는 경우 자동으로 할당되는 기본값이라는 점에 대해 설명할 수 있습니다. 이 경우 변수는 선언되었지만 초기화되지 않은 상태입니다. 함수에서 반환 값이 지정되지 않은 경우, 함수의 인수 중 값이 지정되지 않은 경우 등등에서 발생할 수 있습니다. 이러한 경우에는 변수가 undefined 값을 가지게 됩니다.

 

let y;
console.log(y); // undefined

 

 

 

 

---

 

 

 

 

비교

아래 예시에서 myVar1 변수는 선언되었지만 초기화되지 않았기 때문에 undefined 값을 가지고 있습니다. myVar2 변수는 의도적으로 null 값을 할당받았으며, typeof 연산자를 사용하여 데이터 타입을 확인하면 "object"를 반환합니다.

 

또한, 객체 obj의 prop1 속성은 delete 키워드를 사용하여 삭제되었기 때문에 undefined 값을 가지게 됩니다. 반면 prop2 속성은 null 값을 할당받았기 때문에 null 값을 가지고 있습니다.

 

let myVar1;
let myVar2 = null;

console.log(typeof myVar1); // "undefined"
console.log(typeof myVar2); // "object"

let obj = {
  prop1: "value1",
  prop2: "value2"
};

console.log(obj.prop1); // "value1"

delete obj.prop1;
console.log(obj.prop1); // undefined

obj.prop2 = null;
console.log(obj.prop2); // null

!null // true
null == null // true
null === null // true
null == undefined // true
isNaN(1 + undefined) // true

isNaN(1 + null) // false
null === undefined // false

 

 

 

 

---

 

 

 

 

정리

특징	null	undefined
값	의도적으로 값이 없음을 나타내는 값	변수가 초기화 되지 않았을 때 할당되는 기본 값
typeof 결과	"object"	"undefined"
사용 예시	객체의 속성을 삭제한 경우, 의도적으로 값이 없음을 나타내는 경우	함수의 인수 중 값이 지정되지 않은 경우, 변수 초기화 되지 않은 경우

 

 

 

 

 

---

 

 

 

 

마치며

결론적으로, 자바스크립트에서 null과 undefined는 모두 값이 없음을 나타내지만, 이 둘 사이에는 중요한 차이점이 있습니다. undefined는 변수가 값이 없는 경우 자동으로 할당되는 기본값이며, null은 의도적으로 값이 없음을 나타내는 특별한 값입니다. null은 변수에 할당할 수 있으며, 변수에 null값을 할당하면 이전에 할당된 값이 제거됩니다. 또한, typeof 연산자를 사용하여 값을 확인하면 undefined는 "undefined"를 반환하고 null은 "object"를 반환합니다. 이러한 차이점들은 자바스크립트 개발자들이 이 두 값 사이의 차이를 이해하고 올바르게 사용할 수 있도록 도와줍니다.

 

 

 

 

 

 

 

 

 

 

[Javascript] 원시타입 vs 참조타입