[JS] null과 undefined의 차이 그리고 처리 방식

null과 undefined 모두 변수에 값이 없는 것을 나타내기 위해 사용하지만 그 의미는 다르다.

• null : 의도적으로 변수의 값이 비어있음을 나타내기 위해 사용.
  null은 변수가 선언되고 'null'이라는 값이 할당되어 있는 것을 나타낸다. 즉, 아무런 의미가 없는 값이 할당되어있는 것을 말한다. 
   
• undefined : 변수에 값이 할당되지 않았을 때 사용.
  undefined는 변수가 선언되고 아무 값도 할당되어 있지 않은 것을 나타낸다. 즉 undefined는 자료형이 없는 상태를 말한다. 

Null

객체가 없음을 뜻한다.

typeof null //"object"

const foo = null; // 변수가 선언되고 `null` 값을 할당해야함

if(foo){
  //실행되지 않음
}

Undefined

함수가 명시적으로 값을 반환하지 않으면 undefined를 반환하는 것으로 처리된다.

typeof undefined //"undefined"

let foo; // 변수 선언 후 값을 할당하지 않았으므로 `undefined`

const obj = {};
obj.prop; // undefined

if(foo){
  // 실행되지 않음
}

Null과 Undefined의 비교

null == null //true
null === null //true
undefined == undefined //true
undefined === undefined //true
undefined === null //false

!null //true

undefined == null //true

위에서 볼 수 있듯이 == 연산자로 비교한 undefined와 null은 같다고 처리된다. 따라서 null과 undefined 체크를 동시에 하기 위해서는 변수를 == 연산자로 비교하는 것이 편하다.

null == false //false
null === false //false

undefined == false //false
undefined === false //false

빈 값을 표현하기 위해서 변수의 값에 null과 undefined 중 무엇을 할당하는 것이 좋을까?

let foo;
let bar = undefined;

위와 같은 경우 foo와 bar는 다르게 선언되었지만 모두 undefined를 나타낸다. 이렇게 되면 개발의 의도가 명확하지 않을 가능성이 있다. 따라서 명시적으로 변수에 값이 없는 것을 나타내고 싶을 때에는 null을 사용하는 것이 좋다.