What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?

TL;DR

Undeclared

An undeclared identifier has no binding in the visible scope chain. Reading it directly throws ReferenceError. In sloppy-mode scripts, assigning to an unresolvable identifier can create a property on the global object; strict mode throws instead. Avoid relying on either behavior. typeof identifier is the one operation that returns 'undefined' for an undeclared identifier, though that same result cannot distinguish it from a declared value containing undefined.

function foo() {
  x = 1; // Throws a ReferenceError in strict mode
}

foo();
console.log(x); // 1 (if not in strict mode)

Using the typeof operator on undeclared variables will give 'undefined'.

console.log(typeof y === 'undefined'); // true

undefined

A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined. If a function does not return a value, and its result is assigned to a variable, that variable will also have the value undefined. To check for it, compare using the strict equality (===) operator or typeof which will give the 'undefined' string. Note that you should not be using the loose equality operator (==) to check, as it will also return true if the value is null.

let foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true. Wrong, don't use this to check if a value is undefined!

function bar() {} // Returns undefined if there is nothing returned.
let baz = bar();
console.log(baz); // undefined

null

A variable that is null will have been explicitly assigned to the null value. It represents no value and is different from undefined in the sense that it has been explicitly assigned. To check for null, simply compare using the strict equality operator. Note that like the above, you should not be using the loose equality operator (==) to check, as it will also return true if the value is undefined.

const foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true. Wrong, don't use this to check if a value is null!

Notes

• Do not introduce a placeholder merely to avoid undefined; use null only when the application's data model intentionally distinguishes “no value” from “not provided.”
• Always explicitly declare variables before using them to prevent errors.
• Using some static analysis tooling in your workflow (e.g. ESLint, TypeScript Compiler), will enable checks that you are not referencing undeclared variables.

Practice

Practice implementing type utilities that check for null and undefined on GreatFrontEnd.

Further reading

• MDN Web Docs: null
• MDN Web Docs: undefined
• MDN Web Docs: ReferenceError

Exercises

let missing;
const empty = null;

console.log(
  missing === undefined,
  empty === null,
  typeof neverDeclared,
  typeof empty,
);