JavaScript null 과 undefined

JavaScript null 과 undefined

 

JavaScript에서 null은 값이 없음을 명시하기 위해 사용하고 undefined는 값이 할당되지 않았음을 명시하기 위해 사용합니다.

 

 

1. null 과 undefined 의 차이

---

• null
  값이 없음을 표현하기 위한 값
  의도적으로 값이 없음을 표현하려고할 때 사용
  변수에 null을 할당하면 값이 해제됨
  
  
• undefined
  값이 할당되지 않은 상태를 표현하기 위한 값 
  변수 선언 이후 값이 할당되지 않은 경우에 JavaScript 엔진이 초기화한 값
  존재하지 않는 객체 프로퍼티에 접근한 경우 반환되는 값
  undefined 값을 갖는 변수는 할당을 통해 값을 갖게 됨

let name;
console.log(name); // undefined
console.log(typeof name); // undefined
 
name = 'Harry';
console.log(name);    // 'Harry'
 
name = null;
console.log(name);    // null

 

명시적으로 값의 없음을 나타내고 싶을 때는 undefined 보다는 null을 사용하는 것이 좋습니다. 다음과 같이 값의 없음을 나타내기 위해 undefined를 사용하면 의미가 불분명해지게 됩니다.

 

let val1;
let val2 = undefined;
 
console.log(val1); // undefined
console.log(val2); // undefined
 
let obj1 = {};
let obj2 = { property: undefined };
 
console.log(obj1.property); // undefined
console.log(obj2.property); // undefined

 

 

2. null 과 undefined check

---

null 과 undefined 를 검사할 때는 동등 연산자(==)와 일치 연산자(===)의 사용에 주의해야 합니다. 동등 연산자(==)를 사용할 경우엔 값만 비교하기 때문에 null 과 undefined 모두 같은 결과를 반환하지만 일치 연산자(===)를 사용할 경우엔 값과 타입을 비교하기 때문에 항상 같은 결과가 반환되지는 않습니다.

 

let val1;
let val2 = null;
 
console.log(typeof val1); // undefined
console.log(typeof val2); // object
 
console.log(val1 == null);  // true
console.log(val1 == undefined);  // true
 
console.log(val2 == null);  // true
console.log(val2 == undefined);  // true
 
console.log(val1 === null); // false
console.log(val1 === undefined);  // true
 
console.log(val2 === null);  // true
console.log(val2 === undefined);  // false

 

따라서 null 과 undefined 를 검사할 때는 다음과 같이 동등 연산자(==)를 사용해줍니다. 동등 연산자(==)를 사용하면 피연산자로 null 또는 undefined가 왔을 때 true를 반환합니다.

 

let val1;
let val2 = null;
 
if (val1 == null && val1 == undefined) {
    console.log('val1 is null and undefined');
}
 
if (val2 == null && val2 == undefined) {
    console.log('val2 is null and undefined');
}

 

이상으로 JavaScript의 null 과 undefined 에 대해 알아봤습니다.

 

※ Reference

 

• helloworldjavascript.net, null과 undefined, https://helloworldjavascript.net/pages/160-null-undefined.html
• insanehong.kr, Javascript기초 - 데이터타입, http://insanehong.kr/post/javascript-datatype/
• velog.io/@surim014, JavaScript - 데이터 타입(Data Type)에 대해 알아보자, https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part.2