undefined와 null 값

자바스크립트에서 undefined는 변수가 값이 할당되지 않았다는 의미로 자바스크립트 엔진에서 자동으로 할당하는 초깃값이며, null은 변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값입니다. undefined는 '할당된 값 자체가 없다'라는 뜻으로 null과는 차이가 있습니다.

언뜻 보기에 비슷해 보이는 이 두 값은 원시 값(primitive values)이라는 공통점이 있지만,
값의 정의와 활용 등에서 많은 차이점이 있습니다.

원시 값(primitive values)이란
객체가 아니면서 메서드나 속성을 가지지 않는 데이터를 말합니다. 원시 값 자체는 메모리에서 변형할 수 없다는 특징이 있습니다. (원시 값을 할당한 변수와 혼동하지 마세요.)

undefined와 null 값 비교

undefined와 null 값의 주요 차이점을 표로 비교해 보겠습니다.

undefined와 null 값의 주요 차이점 비교
특징 undefined null
데이터 타입 undefined 타입
(undefined 타입의 유일한 값임)		 null 타입
(null 타입의 유일한 값임)
정의 변수가 값이 할당되지 않았다는 의미로
자바스크립트 엔진에서 자동으로 할당하는 초깃값		 변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값
값이 의미 변수는 선언되었지만
'할당된 값 자체가 없다'라는 의미		 변수가 선언될 당시
'값이 없음'을 명시적, 혹은 의도적으로 가리킨다는 의미
값의 해석 변수를 참조할 때 undefined가 반환되면 해당 변수의 값이 초깃값으로 할당되지 않았음을 쉽게 파악할 수 있음 변수를 참조할 때 null이 반환되면 변수에 값이 명시적으로나 의도적으로 없음을 쉽게 파악할 수 있습니다.
변수에 값으로 할당 let x = undefined;처럼 undefined 값을 변수에 할당하는 것은 권장하지 않음: undefined 값은 '변수에 값이 할당되어 있지 않다라는 의미로 자바스크립트 엔진에서 할당하는 값'이라는 취지와 어긋날 뿐만 아니라 혼란을 줄 수 있음 let x = null;처럼 개발자가 변수에 값이 없다라는 것을 명시하고자 할 때에는 null 값을 사용하는 것을 권장함: 나중에라도 변수나 프로퍼티에 값을 할당할 필요가 있다면 undefined 보다는 null이 더 적절함
의미론적 사용
(주요 차이점)		 undefined 값은 자바스크립트에서 값이 할당되지 않은 변수를 나타내는데 사용되어야 함. 이는 undefined 값을 도입한 이유임 주로 API에서 활용되며, 객체를 반환할 것으로 예상되지만 실제로 관련된 객체가 존재하지 않을 때의 값으로 null을 사용함
typeof 연산자로 변수의 데이터 타입을 확인하면 "undefined"를 반환 "object"를 반환
boolean 타입으로 평가하면 false false

undefined와 null 값의 주요 차이점을 코드 예시로 보겠습니다.

한마디로 비교하자면

JavaScript undefined와 null 값의 주요 차이점 
/* 변수에 값을 할당하지 않음 */
let x;
console.log(x); // 변수가 값이 할당되지 않았다는 의미로 undefined를 반환

/* (개발자가 의도적으로) 변수에 값이
   명시적으로나 의도적으로 없음을 나타내는 값 */
let y = null;
console.log(y); // null

typeof 연산자로 변수의 데이터 타입을 확인하면

typeof 연산자로 변수의 데이터 타입을 확인하면 undefined는 "undefined"를 반환하고, null은 "object"를 반환합니다.

JavaScript typeof 연산자로 변수의 데이터 타입을 확인 
let x; // undefined 값
console.log(typeof x); // "undefined"

let y = null; // null 값
console.log(typeof y); // "object"

boolean 타입으로 평가하면

boolean 타입으로 평가하면 undefined과 null 값 모두 false입니다.

JavaScript 
/* 값이 undefined인 변수 x */
let x;

if (x) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "false로 평가됩니다."

// Boolean() 함수를 사용해서 평가
console.log(Boolean(x)); // false

/* 값이 null인 변수 y */
let y = null;

if (y === null) {
    console.log("변수는 null입니다.");
} else {
    console.log("변수는 null이 아닙니다.");
}
// 출력: "변수는 null입니다."

변수에 값으로 할당

간혹, 변수에 값이 없다라는 의미로 undefined를 할당하는 경우가 있습니다.

개발자가 의도적으로 변수에 undefined 값을 할당하는 것은 권장하지 않습니다.
undefined 값은 '변수에 값이 할당되어 있지 않다라는 의미로 자바스크립트 엔진에서 할당하는 값'이라는 취지와 어긋날 뿐만 아니라 혼란을 줄 수 있습니다.

개발자가 변수에 값이 없다라는 것을 명시하고자 할 때에는 null 값을 사용하세요.
null 값은 자바스크립에서 객체뿐 아니라 숫자와 문자열에서 '값이 없음'을 명시적, 혹은 의도적으로 가리킬 때 사용됩니다. undefined는 '할당된 값 자체가 없다'라는 뜻으로 null과는 차이가 있습니다.

JavaScript 권장하지 않음 
let x = undefined;
JavaScript 권장함 
let x = null;

나중에라도 변수나 프로퍼티에 값을 할당할 필요가 있다면 undefined 보다는 null이 더 적절합니다.

의미론적 사용

undefined와 null 값의 의미론적 사용은 이 두 값의 가장 큰 차이점입니다.

undefined

변수를 참조할 때 undefined가 반환되면 해당 변수의 값이 초깃값으로 할당되지 않았음을 쉽게 파악할 수 있습니다.
undefined 값은 자바스크립트에서 값이 할당되지 않은 변수를 나타내는데 사용되어야 합니다. 이는 undefined 값을 도입한 이유입니다.

JavaScript 
/* 변수에 값이 할당되었는지 확인하는 함수 */
let validationVar = (v) => {
    if (v === undefined) {
        return "변수에 값이 할당되지 않았습니다.";
    }
    return v;    
}

let x;

console.log(validationVar(x)); // 출력: "변수에 값이 할당되지 않았습니다."

null

명세서에서는 null 값을 의도적으로 객체 값이 없음을 나타내는 기본 값으로 정의하고 있지만,
객체뿐 아니라 숫자와 문자열에서도 '값이 없음'을 명시적, 혹은 의도적으로 가리킬 때 사용됩니다.

주로 API에서 활용되며,
객체를 반환할 것으로 예상되지만 실제로 관련된 객체가 존재하지 않을 때의 값으로 null을 사용합니다.

다음은 DOM API에서 null 값이 반환되는 예제입니다.

자바스크립트 DOM 다루기
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>null 값</title>
    </head>
    <body>
        <h1>null 값</h1>
        <p>
            주로, API에서 객체를 반환할 것으로 예상되지만
            실제로 관련된 객체가 존재하지 않을 때
            null 값을 반환합니다.
        </p>
        <script>
            const ele = document.querySelector(".get-class");

            /* HTML 문서에
               get-class라는 클래스 이름을 가진 요소가 없으면
               null을 반환 */
            console.log(ele); // null
        </script>
    </body>
</html>
querySelector() 함수 사용법

위 예제를 보면 알 수 있듯이 DOM을 다루는 API에서는 객체를 반환할 것으로 예상되지만 실제로 관련된 객체가 존재하지 않을 때 null 값을 반환합니다.

주의할 점

변수 자체가 선언되지 않았을 때에는 undefined이나 null 값을 반환하지 않습니다.
Uncaught ReferenceError: ...is not defined 예외가 발생합니다.

undefined

JavaScript 
/* 값이 undefined인 변수 x */
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 */
if (y === undefined) { // Uncaught ReferenceError: y is not defined

}

변수가 선언되었는지 여부를 확인하는 좀 더 안전한 방법은 try...catch 문을 사용하는 것입니다.

JavaScript 
/* 값이 할당되지 않은 변수 x */
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 y */
try {
    y; // 변수에 접근 시도
    console.log('변수가 선언되었습니다.');

} catch (error) {
    console.log('변수가 선언되지 않았습니다.'); 
}
// 출력: "변수가 선언되지 않았습니다."

null

JavaScript 
/* 값이 null인 변수 x */
let x = null;

if (x === null) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 y */
if (y === null) { // Uncaught ReferenceError: y is not defined

}

이럴 경우 다음과 같이 null 값을 체크할 수 있습니다.

JavaScript 
/* 값이 null인 변수 x */
let x = null;

if (x === null) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* y 변수가 선언되었는지 확인 */
if (typeof y !== "undefined") {
    // 변수가 선언되었을 때 null 값인지 확인
    if (myVariable === null) {
        console.log("변수는 null입니다.");
    } else {
        console.log("변수는 null이 아닙니다.");
    }
} else {
    console.log("변수가 선언되지 않았습니다.");
}
// 출력: "변수가 선언되지 않았습니다."

같이 보기