null 값의 개념

null 값은
변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값입니다.

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

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

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

주로 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 값을 반환합니다.

참고하세요!
jQuery에서 DOM을 다루는 API에서는 실제로 관련된 객체가 존재하지 않을 때 null을 반환하지 않습니다. jQuery에서 DOM을 다루는 API에는 해당하는 요소 객체의 개수를 반환하므로, length 프로퍼티를 사용하면, 숫자 0을 반환합니다.

HTML jQuery로 DOM을 다루는 API 사용 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>null 값</title>
    </head>
    <body>
        <h1>null 값</h1>
        <p>
            주로, API에서 객체를 반환할 것으로 예상되지만
            실제로 관련된 객체가 존재하지 않을 때
            null 값을 반환하지만
            jQuery에서는 jQuery 객체를 반환합니다.
            length 프로퍼티를 사용하면, 숫자 0을 반환합니다.
        </p>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            
            const ele = $(".get-class");

            console.log(ele); // jQuery 객체 반환
            console.log(ele.length); // 0
        </script>
    </body>
</html>

null 값의 데이터 타입

null 값의 데이터 타입은 null입니다.

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

typeof 연산자는
피연산자의 데이터 타입을 문자열로 반환하는 연산자입니다.

자바스크립트 typeof 연산자

typeof 연산자는 주어진 변수의 데이터 타입을 문자열로 반환하지만 null 값으로 확인하면 "null"로 반환하지 않고 "object"로 반환하기 때문에 혼란스러울 수 있습니다.

JavaScript 
let x = null;
console.log(typeof x); // "object"

그래서 typeof 연산자로 변수의 데이터 타입을 확인하면 "object"를 반환하기 때문에 null 값을 체크하려면 엄격한 비교 연산자( === )를 사용하여 null과 비교하는 것입니다.

JavaScript 
let x = null;

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

null 값을 boolean 타입으로 평가하면 false

null 값을 boolean 타입으로 평가하면 false입니다.

JavaScript 
let x = null;

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

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

주의할 점

null 값을 다룰 때에는 주의해야 할 점이 있습니다.

변수 자체가 선언되지 않았을 때

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

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("변수가 선언되지 않았습니다.");
}
// 출력: "변수가 선언되지 않았습니다."

null과 undefined의 차이점

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

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

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

null이나 undefined를 비교할 때에는 ==와 === 연산자의 차이점에 주의해야 합니다.

JavaScript 
typeof null; // "object"를 반환
typeof undefined; // "undefined"를 반환

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

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

JavaScript 
let x = undefined;
JavaScript 
let x = null;

null 값의 올바른 이해

변수를 참조할 때 null이 반환되면 변수에 값이 명시적으로나 의도적으로 없음을 쉽게 파악할 수 있습니다.
주로 API에서 활용되며, 객체를 반환할 것으로 예상되지만 실제로 관련된 객체가 존재하지 않을 때의 값으로 null을 사용합니다.

명세서

nul 값의 명세서 사양
명세서 사양
null ECMAScript Language Specification
#sec-null-value

브라우저 호환성

null 값의 브라우저 호환성
값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
null 1 12 1 1

참고 문헌

  • MDN - null
  • 모던 자바스크립트 Deep Dive(저자 이웅모) 2020 - 데이터 타입 - undefined 타입: 65~ 67쪽
  • 자바스크립트 완벽 가이드(저자 데이비드 플래너건) 2011 - 타입, 값, 변수 - null과 undefined: 51~52쪽

같이 보기