Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
TypeError: 'undefined' is not an object in JavaScript
The "TypeError: 'undefined' is not an object" error occurs when you try to access properties or call methods on an undefined variable. This error message is specific to Safari browser, while other browsers show similar but differently worded errors.
What Causes This Error
This error happens when:
- A variable is declared but not assigned a value
- An object property doesn't exist
- A function returns undefined and you try to access its properties
Example: Accessing Property of Undefined Variable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeError Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 10px 0;
}
button {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>TypeError: 'undefined' is not an object example</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the button to access the name property of undefined person object</h3>
<script>
var resEle = document.querySelector('.result');
var BtnEle = document.querySelector('.Btn');
var person; // Declared but not assigned - undefined
BtnEle.addEventListener('click', function() {
try {
alert(person.name); // This will throw an error
} catch (err) {
resEle.innerHTML = err.name + ": " + err.message;
}
});
</script>
</body>
</html>
How to Fix This Error
Here are common solutions to prevent this error:
Method 1: Check if Variable is Defined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Example</title>
</head>
<body>
<div id="output"></div>
<script>
var person;
var output = document.getElementById('output');
// Safe way to access properties
if (person && person.name) {
output.innerHTML = "Name: " + person.name;
} else {
output.innerHTML = "Person object is not defined or has no name property";
}
</script>
</body>
</html>
Method 2: Initialize Objects Properly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Proper Initialization</title>
</head>
<body>
<div id="result"></div>
<script>
// Properly initialize the object
var person = {
name: "John Doe",
age: 30
};
// Now it's safe to access properties
document.getElementById('result').innerHTML = "Name: " + person.name;
</script>
</body>
</html>
Browser Compatibility
| Browser | Error Message |
|---|---|
| Safari | TypeError: 'undefined' is not an object |
| Chrome/Firefox | TypeError: Cannot read property of undefined |
| Edge | TypeError: Unable to get property of undefined reference |
Best Practices
- Always check if an object exists before accessing its properties
- Initialize variables with default values when possible
- Use optional chaining (?.):
person?.namein modern browsers - Handle undefined cases gracefully with try-catch blocks
Conclusion
The "TypeError: 'undefined' is not an object" error occurs when accessing properties of undefined variables. Always validate objects exist before accessing their properties to prevent this error.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements