[Javascript] null / undefined 차이점에 대해 알아보자.

 

제목을 정하면서,

헷갈리다 / 헛갈리다 중에 어떠한 것이 맞는지 먼저 찾아봤다.

정답은 두 개 모두 표준어이니 참고하자.

 

다시 Javascript로 돌아와서,

예전에 null / undefined에 대해 누군가에게 설명해줄 기회가 생겼다.

가르쳐야 할 상대는 개발을 막 입문한 사람이었기 때문에 정확하고 간단하게 알려주어야 했다.

 

null / undefined에 대한 정의는 한 줄로 요약하면,

null 은 어떠한 공간에 null이라는 값이 설정되어 있는 것이고

undefined는 어떠한 값도 설정되어 있지 않다는 것이다.

무슨소리인지 이해가 잘 안 된다면, 아래 코드를 보면서 다시 이해해보자.

var value;
console.log("value Type : " + typeof value)
value = 1;
console.log("value Type : " + typeof value)
value = null;
console.log("value Type : " + typeof value)

value라는 변수를 선언.

1번째 라인에서 value 변수를 선언하면서 아무런 값도 할당하지 않았다. 그렇기 때문에 현재 value의 type은 "undefined"이다.

3번째 라인에서 value 변수에 1이라는 숫자를 할당해주면, value의 type는 "number"가 된다.

5번째 라인에서 다시 한번 value 변수에 null이라는 값을 할당하면, value의 type은 "object"가 된다.

(type은 문자열로 조회된다.)

 

위 코드의 결과값

하지만 null의 type은 "object"가 아닌데...라고 생각할 수 있다.

맞는 말이다. null의 type은 "object"가 아니다. (Javascript의 버그라고 생각하는 것이 정신 건강에 좋다.)

 

지금까지, value라는 변수를 이용해 null / undefined에 대해 알아봤다.

 

하지만 이러한 기초적인 null / undefined에 대해 설명하려고 포스팅을 하는 것은 아니다.

우리는 Javascript를 이용하여 개발할 때, 재사용성을 이용하기 위해서 함수를 만들어서 사용하는 경우가 많다.

그때 함수 내부에서 매개변수 값의 null / undefined 체크를 아래처럼 하게 된다.

function fnTest (value) {
// undefined 체크
// 방법1.
if (value === undefined) {
console.log("undefined 입니다.")
}
// 방법2.
if ((typeof value) === "undefined") {
console.log("undefined 입니다.")
}
}
var param;
fnTest(param);

value의 값이 undefined 인지 체크하는 방법 1과 value의 type을 체크하는 방법 2를 쉽게 생각할 수 있다.

하지만 해당 매개변수가 null인지 체크를 하려면.. 아래처럼 코드의 양이 늘어나게 된다.

function fnTest (value) {
 
// undefined 체크
if (value === undefined) {
console.log("undefined 입니다.")
}
if ((typeof value) === "undefined") {
console.log("undefined 입니다.")
}
 
// null 체크
if (value === null) {
console.log("null 입니다.")
}
if ((typeof value) === "object") {
console.log("null 입니다.")
}
}
var param = null;
fnTest(param);

이러한 코드의 양을 한 번에 줄이기 방법을 소개한다.

function fnTest (value1, value2) {
 
if (!value1) {
console.log("undefined 혹은 null 입니다.")
}
if (!value2) {
console.log("undefined 혹은 null 입니다.")
}
}
var param1 = null;
var param2;
fnTest(param1, param2);

if문 조건절에 체크할 매개 변수의 논리 부정 연산자(!)를 넣어준다.

null / undefined 인지 하나의 if문 조건절로 체크할 수 있다.

 

Javascript에서 함수를 많이 만들어서 사용하고, 매개변수에 대한 확인 작업이 필요하다.

간단한 내용이지만, 불필요한 코드를 줄여서 효율적인 프로그래밍을 할 수 있도록 하자.