Article Categories

Selected Reading

Undeclared vs Undefined? In JavaScript

Javascript Web Development Object Oriented Programming

In JavaScript, undeclared and undefined are two different concepts that developers often confuse. Understanding the distinction is crucial for debugging and writing reliable code.

Key Differences

Undeclared occurs when you try to access a variable that hasn't been declared using var, let, or const. This results in a ReferenceError.

Undefined occurs when a variable has been declared but hasn't been assigned a value. The variable exists but contains the special value undefined.

Example: Undefined Variable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Undefined Variable</title>
</head>
<body>
    <h2>Undefined Variable Example</h2>
    <div id="result1"></div>
    <button onclick="checkUndefined()">Check Undefined</button>

    <script>
        let declaredButUndefined;
        
        function checkUndefined() {
            document.getElementById('result1').innerHTML = 
                'Declared but undefined variable: ' + declaredButUndefined + 
                ' (type: ' + typeof declaredButUndefined + ')';
        }
    </script>
</body>
</html>

Example: Undeclared Variable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Undeclared Variable</title>
</head>
<body>
    <h2>Undeclared Variable Example</h2>
    <div id="result2"></div>
    <button onclick="checkUndeclared()">Check Undeclared</button>

    <script>
        function checkUndeclared() {
            try {
                document.getElementById('result2').innerHTML = neverDeclaredVariable;
            } catch (error) {
                document.getElementById('result2').innerHTML = 
                    'Error accessing undeclared variable: ' + error.message;
            }
        }
    </script>
</body>
</html>

Complete Comparison Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Undeclared vs Undefined</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .result { 
            margin: 10px 0; 
            padding: 10px; 
            background-color: #f0f0f0; 
            border-radius: 5px;
        }
        button { padding: 10px 15px; margin: 5px; }
    </style>
</head>
<body>
    <h1>Undeclared vs Undefined in JavaScript</h1>
    
    <div class="result" id="undefined-result"></div>
    <div class="result" id="undeclared-result"></div>
    
    <button onclick="demonstrateDifference()">Show Difference</button>

    <script>
        let definedButUndefined; // Declared but not assigned
        
        function demonstrateDifference() {
            // Undefined variable example
            document.getElementById('undefined-result').innerHTML = 
                'Undefined variable: ' + definedButUndefined + ' (type: ' + typeof definedButUndefined + ')';
            
            // Undeclared variable example
            try {
                document.getElementById('undeclared-result').innerHTML = undeclaredVariable;
            } catch (error) {
                document.getElementById('undeclared-result').innerHTML = 
                    'Undeclared variable error: ' + error.name + ' - ' + error.message;
            }
        }
    </script>
</body>
</html>

Comparison Table

Aspect	Undefined	Undeclared
Declaration Status	Variable is declared	Variable is not declared
Value	`undefined`	N/A (throws error)
Error Type	No error	ReferenceError
typeof Result	"undefined"	ReferenceError (can't check)

Key Points

Undefined variables are declared but not assigned, returning undefined
Undeclared variables don't exist and throw ReferenceError when accessed
Use typeof to safely check if a variable is undefined: typeof variable === 'undefined'
Always declare variables with let, const, or var to avoid undeclared errors

Conclusion

Understanding the difference between undeclared and undefined variables is essential for JavaScript development. Undefined variables exist but lack values, while undeclared variables don't exist at all and cause reference errors.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next