자바스크립트를 배우다 보면 선언되지 않음(Undeclared)과 정의되지 않음(Undefined)이라는 두 가지 개념을 자주 접하게 됩니다. 이름이 비슷해 혼동하기 쉽지만, 두 개념은 발생 원인과 의미가 완전히 다릅니다.
선언되지 않음(Undeclared)이란?
Undeclared는 var, let, const 키워드로 선언된 적이 없는 변수에 접근하려고 할 때 발생하는 상태입니다. 이 경우 자바스크립트는 ReferenceError를 발생시키며 프로그램 실행이 중단될 수 있습니다.
정의되지 않음(Undefined)이란?
Undefined는 var, let, const로 변수를 선언했지만 아직 값을 할당하지 않은 상태를 의미합니다. 선언만 된 변수에는 기본적으로 undefined라는 값이 자동으로 할당됩니다.
예제 코드
다음은 자바스크립트에서 undeclared와 undefined의 차이를 확인할 수 있는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Undeclared vs Undefined</h1>
<div class="result"></div>
<div class="result"></div>
<button class="Btn">Click here</button>
<h3>위 버튼을 클릭하면 선언되지 않은 변수와 정의되지 않은 변수에 접근합니다</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelectorAll(".result");
let a;
BtnEle.addEventListener("click", () => {
resEle[0].innerHTML += "Accessing undefined variable = " + a;
try {
resEle[1].innerHTML = b;
} catch (err) {
resEle[1].innerHTML = "Accessing undeclared variable = " + err;
}
});
</script>
</body>
</html>실행 결과
코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 결과는 다음과 같습니다.
핵심 정리
- Undefined: 변수는 선언되었지만 값이 없는 상태로, 에러가 발생하지 않습니다.
- Undeclared: 변수 자체가 선언되지 않은 상태로, 접근 시 ReferenceError가 발생합니다.
따라서 예제에서 선언만 하고 값을 할당하지 않은 변수 a는 undefined를 출력하지만, 한 번도 선언되지 않은 변수 b에 접근하면 에러 메시지가 출력되는 것을 확인할 수 있습니다.