JavaScript의 undefined는 변수가 아직 선언되지 않았거나 값이 할당되지 않았음을 나타내는 특수한 값입니다. 변수를 선언만 하고 초기화하지 않으면, 해당 변수에는 자동으로 undefined가 할당됩니다.
undefined가 발생하는 경우
undefined는 주로 다음과 같은 상황에서 나타납니다.
- 변수를 선언했지만 값을 할당하지 않은 경우
- 객체에 존재하지 않는 속성에 접근한 경우
- 함수가 명시적인 return 문 없이 종료된 경우
예제 코드
다음은 undefined를 활용해 변수 age의 정의 여부를 확인하는 예제입니다. 버튼을 클릭하면 age 변수가 정의되어 있는지 검사하고 그 결과를 화면에 출력합니다.
<!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;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript undefined property</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 age 변수의 정의 여부를 확인할 수 있습니다</h3>
<script>
let sampleEle = document.querySelector(".sample");
let age;
document.querySelector(".Btn").addEventListener("click", () => {
if (age === undefined) {
sampleEle.innerHTML =
"The variable age has not been defined yet or no value is given to it";
} else
sampleEle.innerHTML =
"The variable age is defined and its value = " + age;
});
</script>
</body>
</html>코드 설명
이 예제에서 let age;로 변수를 선언만 하고 값을 할당하지 않았습니다. 따라서 age는 undefined 상태입니다. 버튼 클릭 시 age === undefined 조건문을 통해 일치 연산자(===)로 변수의 상태를 정확하게 판별합니다.
조건이 참이면 age가 아직 정의되지 않았다는 메시지를, 거짓이면 변수의 값과 함께 정의되었다는 메시지를 화면에 출력합니다.
실행 결과
페이지 로드 직후의 초기 화면입니다.
'CLICK HERE' 버튼을 클릭하면 age 변수에 값이 없으므로 아래와 같이 정의되지 않았다는 메시지가 표시됩니다.
정리
undefined는 에러가 아니라 JavaScript의 기본 데이터 타입 중 하나입니다. 변수의 상태를 확인할 때는 느슨한 동등 비교(==)보다 자료형까지 엄격하게 비교하는 일치 연산자(===)를 사용하는 것이 안전합니다. 이를 통해 null과 undefined를 구분하고, 의도치 않은 형 변환 오류를 예방할 수 있습니다.