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
What is the difference between undefined and not defined in JavaScript?
In JavaScript, understanding the difference between "undefined" and "not defined" is crucial for debugging and writing clean code. While they may seem similar, they represent fundamentally different states in JavaScript.
What is Undefined?
undefined is a primitive value in JavaScript that indicates a variable has been declared but not assigned a value. It's also the default return value for functions that don't explicitly return anything.
Common Cases of Undefined
Variables declared without initialization
Object properties that don't exist
Array elements that haven't been assigned
Function parameters not provided
Example 1: Declared Variable Without Value
<html>
<head>
<title>Undefined Example</title>
</head>
<body>
<div id="result"></div>
<script>
var foo;
document.getElementById("result").innerHTML = "Value: " + foo + ", Type: " + typeof foo;
</script>
</body>
</html>
Value: undefined, Type: undefined
Example 2: Non-existent Object Property
<html>
<head>
<title>Undefined Property Example</title>
</head>
<body>
<div id="result"></div>
<script>
var myObj = {};
document.getElementById("result").innerHTML = "Property value: " + myObj.nonExistentProperty;
</script>
</body>
</html>
Property value: undefined
What is Not Defined?
"Not defined" refers to variables that have never been declared in the current scope. Attempting to access such variables throws a ReferenceError.
Example: Accessing Undeclared Variable
<html>
<head>
<title>Not Defined Example</title>
</head>
<body>
<div id="result"></div>
<script>
try {
// Note the typo: 'myOb' instead of 'myObj'
var result = myOb.someProperty;
} catch(err) {
document.getElementById("result").innerHTML = "Error: " + err.message;
}
</script>
</body>
</html>
Error: myOb is not defined
Key Differences
| Aspect | Undefined | Not Defined |
|---|---|---|
| Variable Status | Declared but no value assigned | Never declared |
| Type | Primitive value | ReferenceError |
| typeof Result | "undefined" | Throws ReferenceError |
| Common Cause | Uninitialized variables | Typos or scope issues |
Practical Example: Comparison
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<div id="result"></div>
<script>
var declaredButUndefined;
var output = "";
// Case 1: undefined
output += "Case 1 - Declared but undefined: " + declaredButUndefined + "<br>";
// Case 2: not defined (wrapped in try-catch)
try {
output += "Case 2 - Not defined: " + notDeclaredVariable;
} catch(err) {
output += "Case 2 - Not defined: " + err.name + " - " + err.message + "<br>";
}
document.getElementById("result").innerHTML = output;
</script>
</body>
</html>
Case 1 - Declared but undefined: undefined Case 2 - Not defined: ReferenceError - notDeclaredVariable is not defined
Best Practices
Always declare variables before using them
Use
typeofoperator safely:typeof someVar === 'undefined'Check for undefined properties before accessing nested objects
Use strict mode (
'use strict';) to catch undeclared variables early
Conclusion
undefined is a value representing declared but uninitialized variables, while "not defined" indicates undeclared variables that throw ReferenceError. Understanding this distinction helps in effective debugging and prevents common JavaScript errors.
7K+ Views
