In JavaScript, understanding how variables are handled by the engine is crucial for writing bug-free code. Almost everything in JavaScript is an object (or behaves like one), but how we declare and initialize them determines their state.
Let’s break down the differences between undefined, null, and undeclared with industrial examples.
1. Undefined
undefined means a variable has been declared but has not yet been assigned a value. It’s the default value the JavaScript engine gives to variables.
Example: Variable Declaration
let country;
console.log(country); // Output → undefined
country = "India 🇮🇳";
console.log(country); // Output → India 🇮🇳When you log a variable that is only declared (using let or var), the engine returns undefined because no memory has been allocated for a specific value yet.
Example: Object Property
let person = {
firstName: undefined,
};
console.log(person.firstName); // Output → undefined
person.firstName = "Krishna 🙏";
console.log(person.firstName); // Output → Krishna 🙏2. Null
null is an assignment value. It is used to represent the intentional absence of any object value. It must be explicitly assigned by the developer.
Example: Explicit Initialization
let country = null;
console.log(country); // Output → null
console.log(typeof country); // Output → object (Historical JS Bug)
country = "India 🇮🇳";
console.log(country); // Output → India 🇮🇳typeof null returns "object". This is a well-known bug in JavaScript that dates back to its first version. It wasn’t fixed to avoid breaking the existing web.
3. Undeclared
A variable is undeclared when it has not been defined using var, let, or const. Accessing an undeclared variable (except with typeof) will throw a ReferenceError.
Example: Accessing Undeclared Variables
// This will throw an error immediately
try {
console.log(planet);
} catch (e) {
console.log(e.name); // Output → ReferenceError
}
console.log(typeof planet); // Output → undefined (Safe check)Never use variables before declaring them. While var allows hoisting, let and const live in the Temporal Dead Zone (TDZ) until they are declared, leading to crashes if accessed early.
Quick Comparison Table
| Feature | Undefined | Null | Undeclared |
|---|---|---|---|
| Meaning | Declared, no value | Explicitly empty | Not declared at all |
| Type | undefined | object | undefined (via typeof) |
| Error? | No | No | Yes (ReferenceError) |
| Best Use | Default state | Resetting a value | Avoid at all costs |
Best Practices
Always explicitly initialize your variables. If you don’t have a value yet, use null. This makes it clear to other developers that the variable is intentionally empty, rather than accidentally uninitialized.
- Avoid
undefinedassignments: Don’t manually setx = undefined. Usenullinstead. - Use Strict Mode: Always use
'use strict';or modern ES Modules to prevent accidental undeclared variable assignments to the global scope. - Check for existence: Use
if (variable == null)to check for bothnullandundefinedsimultaneously (due to type coercion).
Hope you learned something new! If this article was helpful, feel free to share it with your fellow engineers.
Happy coding!