자바스크립트 null 값 – 개념 정리 및 올바른 이해

`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"로 반환하기 때문에 혼란스러울 수 있습니다.

그래서 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를 비교할 때에는 ==와 === 연산자의 차이점에 주의해야 합니다.