"TypeError: 'undefined'는 객체가 아닙니다" 오류는 값이 정의되지 않은(undefined) 객체의 속성에 접근하거나 해당 객체의 메서드를 호출하려고 할 때 발생합니다. 특히 이 오류 메시지는 Safari 브라우저에서만 이러한 형태로 표시됩니다. Chrome이나 Firefox에서는 동일한 상황에서 "Cannot read properties of undefined"처럼 약간 다른 문구가 출력되기 때문에, Safari에서 개발 중이라면 이 문구를 익혀두는 것이 도움이 됩니다.
아래는 이 오류가 실제로 어떻게 발생하는지 보여주는 JavaScript 예제 코드입니다.
예제 코드
<!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>TypeError: 'undefined' is not an object 예제</h1>
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 person 객체의 name 속성에 접근합니다</h3>
<script>
var resEle = document.querySelector('.result');
var BtnEle = document.querySelector('.Btn');
var person;
BtnEle.addEventListener('click', function(){
try {
alert(person.name);
}
catch(err){
resEle.innerHTML = err;
}
});
</script>
</body>
</html>
코드 설명
위 예제에서 person 변수는 선언만 되고 값이 할당되지 않았으므로 undefined 상태입니다. 버튼을 클릭하면 person.name을 통해 정의되지 않은 객체의 속성에 접근하게 되고, 바로 이 시점에 TypeError가 발생합니다. try...catch 블록이 이 오류를 잡아 화면에 오류 내용을 출력해 줍니다.
실행 결과
'클릭하세요' 버튼을 누르면 다음과 같이 오류 메시지가 표시됩니다.
오류 방지 방법
이러한 오류를 예방하려면 객체에 접근하기 전에 값이 실제로 존재하는지 확인하는 습관을 들이는 것이 좋습니다.
if (typeof person !== 'undefined')처럼 타입 검사 후 접근하기- 옵셔널 체이닝(
person?.name)을 사용해 안전하게 속성에 접근하기 - 변수 선언 시 기본값을 할당해 두기 (예:
var person = {};)