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 🇮🇳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 🇮🇳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)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
- 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!
