undefined vs. not defined in JavaScript

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. The Tale of Two Errors

Beginners often confuse undefined with not defined. While they sound identical in everyday English, they represent two completely different engine states in JavaScript!

2. Why It Matters

Understanding this distinction makes diagnosing runtime ReferenceError crashes instant and painless.

3. The Mental Model

• undefined: Memory HAS been allocated for the variable by the JS Engine during Phase 1 (Memory Creation), but no real value has been assigned yet. It is a legitimate primitive value and type in JavaScript.
• not defined: No memory was ever allocated for the variable name in the current scope. Trying to read a non-existent variable throws an uncaught ReferenceError!

// Declared variable without an explicit initial value
let currentUser;
console.log(currentUser); // undefined (Memory allocated, no value assigned)

// Trying to read a variable that was never declared
console.log(totalScore); // Uncaught ReferenceError: totalScore is not defined

4. Visual Engine Lifecycle

Phase 1 (Memory Creation)  -> Variable 'currentUser' allocated -> Set to undefined
Phase 2 (Code Execution)    -> Reading 'currentUser' -> Output: undefined
                            -> Reading 'totalScore'  -> ReferenceError: not defined!

5. Common Mistakes

• Manually Assigning user = undefined: Avoid manually writing user = undefined to clear a variable. Use null instead to signal an intentional empty state, leaving undefined exclusively for uninitialized engine defaults.
• Loosely Checking for Undefined: Checking if (x === undefined) can throw a ReferenceError if x is undeclared. Use typeof x === "undefined" for safe checks on potentially undeclared globals!

6. Next Steps

Remember: undefined means declared without a value, while not defined means undeclared in memory. Next, let's master how functions encapsulate reusable logic!