Difference between undefined, null and undeclared in JavaScript

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

javascript

let country;
console.log(country); // Output → undefined

country = "India 🇮🇳";
console.log(country); // Output → India 🇮🇳

Information

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

javascript

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

javascript

let country = null;
console.log(country); // Output → null
console.log(typeof country); // Output → object (Historical JS Bug)

country = "India 🇮🇳";
console.log(country); // Output → India 🇮🇳

JavaScript Quirk

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

javascript

// 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)

Critical

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

Engineering Advice

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 undefined assignments: Don’t manually set x = undefined. Use null instead.
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 both null and undefined simultaneously (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!

Deepen your understanding with these curated continuations.

View All Articles

Tutorial 5 min read

Convert array to an object in JavaScript

This article explains simplest and quickest way to convert array to an object in JavaScript. Using widely accepted spread operator `...` makes easy to do it.

Vishnu Jan 21, 2021

Tutorial 5 min read

How to Update an Array Element in JavaScript

Learn the simplest ways to update array elements in JavaScript. This guide explains how to use assignment operators and modern methods to modify array values.

Vishnu Nov 19, 2020