[Javascript] null과 undefined 차이

현재 운영 중인 사이트에서 아래와 같은 문법을 보게 되었습니다.

if(name != null && name != undefined){
	// 구문
}

'name이라는 변수에 값이 없으면 구문을 실행해라'라는 말은 알겠는데, 굳이 null과 undefined 둘다 조건을 걸 필요가 있을까요?

우선 null과 undefined는 무엇을 의할까요?

 

null과 undefined의 차이

let test_null = null;
let test_undefined;

console.log(typeof test_null);      // object
console.log(test_null);             // null

console.log(typeof test_undefined); // undefined
console.log(test_undefined);        // undefined

null은 변수가 선언되어있고 의도적으로 비어 있는 상태입니다. 
반면에 undefined는 선언 후에 값을 할당하지 않은 상태이죠.

typeof로 확인하면 null은 object type이고, undefined는 undefined 이라는걸 알 수 있습니다.

 

let test_null = null;
let test_undefined;

console.log(test_null == test_undefined);   // true
console.log(test_null === test_undefined);  // false

==으로 비교를 하게 되면 null이나 undefined나 같다(=true)고 인식을 하는 반면에
===으로 엄격한 비교를 하게 되면 둘은 같지 않다(=false)로 인식하게 됩니다.

 

let test_null = null;
let test_undefined;

console.log(1 + test_null);         // 1
console.log(1 + test_undefined);    // NaN

숫자형으로 계산을 하게 되면 둘은 또 다른 결과를 같게 됩니다.
null +1 은 계산이 되어서 1을 반환하는 반면
undefined + 1 은 계산을 할 수 없다(NaN)을 표기하게 됩니다.

 

언제 undefined 인가?

// 1. 변수 할당 안했을때 undefined
let test1;
console.log(test1);     // undefined


// 2. 인자값 할당 안했을때 undefined 
function fn_test(a, b=2, c){
    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
}
fn_test(1, 2, 3);      // number, number, number
fn_test(1);            // number, number, undefined


// 3. 함수 반환값 없을때 undefined
function fn_test2(){

}
console.log( fn_test2() );

소스에 보는 바와 같이 undefined되는 상황은 아래와 같습니다.

1. 변수 선언 시 값을 지정 안 한 경우. 
2. 함수의 인자값에 값을 넘기지 않은 경우
3. return 없는 함수의 결괏값을 사용할 경우

 

결론

if(name != null && name != undefined){
	// 구문
}

처음 null과 undefined 둘다 조건문을 건 경우를 문제로 들었었죠. 
위의 같은 경우에는 null 또는 undefined 둘중에 하나만 조건을 걸어도 되는 상황입니다. 
하지만 특수하게 값이 초기화되지 않은 상황 등 을 판단하려면 === 으로 엄격하게 조건을 걸면 됩니다.