JavaScript 변수가 로드되었는지 확인하는 방법 (null·undefined·typeof 완벽 정리)

JavaScript 개발을 하다 보면 특정 변수나 객체가 아직 로드되지 않았는지 확인해야 하는 경우가 자주 발생합니다. 이때 가장 기본적인 방법은 변수의 값이 undefined인지 또는 null인지 직접 비교하는 것이며, 항상 문자열을 반환하는 typeof 연산자를 활용하면 더욱 안전하게 검사할 수 있습니다.

방법 1. null 및 undefined 직접 비교하기

변수에 값이 할당되기 전에는 자동으로 undefined가 들어가므로, 이 값을 검사하면 로드 여부를 판단할 수 있습니다. 아래 예제는 버튼을 클릭할 때마다 obj 객체의 로드 상태를 확인하고, 최초 클릭 시 객체를 생성하는 코드입니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>변수가 로드되었는지 확인하기</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">클릭</button>
<h3>
위 버튼을 클릭하면 obj 객체의 로드 여부를 확인할 수 있습니다.
</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj;
    BtnEle.addEventListener("click", () => {
        if (obj === null || obj === undefined) {
            resEle.innerHTML = "obj 객체가 아직 로드되지 않았습니다.";
            obj = { firstName: "Rohan", lastName: "Sharma" };
        }
        else {
            resEle.innerHTML = "obj 객체가 로드되었습니다.";
        }
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

JavaScript 변수가 로드되었는지 확인하는 방법 (null·undefined·typeof 완벽 정리)

'클릭' 버튼을 처음 눌렀을 때 −

JavaScript 변수가 로드되었는지 확인하는 방법 (null·undefined·typeof 완벽 정리)

'클릭' 버튼을 다시 한 번 눌렀을 때 −

JavaScript 변수가 로드되었는지 확인하는 방법 (null·undefined·typeof 완벽 정리)

방법 2. typeof 연산자 활용하기

typeof는 피연산자의 자료형을 항상 문자열로 반환하기 때문에, 변수가 아예 선언되지 않은 경우에도 ReferenceError 없이 안전하게 검사할 수 있다는 장점이 있습니다.

if (typeof obj === "undefined") {
    console.log("변수 obj가 아직 로드되지 않았습니다.");
}

다만 typeof null은 "object"를 반환하므로 null 값까지 구분하려면 앞서 소개한 직접 비교 방식과 함께 사용하는 것이 좋습니다. 두 방법을 적절히 조합하면 어떤 상황에서도 변수의 로드 상태를 정확하게 판별할 수 있습니다.