JavaScript undefined

undefined is JavaScript's way of saying "there is no value here yet." You will see it constantly, usually by accident. Knowing every place it comes from, and how it differs from null, makes a whole category of bugs easy to diagnose.

// Where undefined Comes From

// 1. A variable declared but never assigned
let score;
score                            // undefined

// 2. A property that does not exist
const user = { name: "Ava" };
user.age                         // undefined

// 3. An array position with nothing in it
[10, 20][5]                     // undefined

// 4. A parameter that was not passed
function greet(name) { return name; }
greet()                          // undefined

// 5. A function with no return value
function log(x) { console.log(x); }
log(1)                           // undefined (after printing 1)

// 6. Searching and not finding
[1, 2, 3].find(n => n > 5)       // undefined

// Empty Is Not undefined

An empty string is a real value with a real type. It only looks empty:

let text = "";
console.log(text === undefined);
console.log(typeof text, text.length);

// Emptying a Variable

You can clear a variable by assigning undefined or null. Both its value and its typeof change:

let car = "Volvo";
car = undefined;
console.log(car, typeof car);

let person = { firstName: "John", lastName: "Doe" };
person = null;
console.log(person, typeof person);

Prefer null for "I emptied this on purpose" (see the convention below). Either way, this only works with let: a const can never be reassigned.

// undefined vs null

Both mean "no value," but they signal different intentions:

null == undefined    // true   loosely equal
null === undefined   // false  different types

JSON.stringify({ a: undefined, b: null })   // '{"b":null}'

// Checking for undefined

if (value === undefined) { }   // exactly undefined
if (value == null) { }         // undefined OR null: the one good use of ==
if (value === undefined || value === null) { }   // same as above, spelled out

// Handling It Gracefully

const settings = { volume: 0 };

// ?? supplies a fallback only for undefined / null
settings.volume ?? 50          // 0   (kept: 0 is a real value)
settings.theme ?? "dark"       // "dark"

// ?. stops safely when something along the way is undefined
settings.user?.name            // undefined, no crash
settings.user?.name ?? "Guest"  // "Guest"

// Default Parameters Only Trigger on undefined

function greet(name = "friend") {
  return `Hi, ${name}`;
}

greet()            // "Hi, friend"
greet(undefined)   // "Hi, friend"
greet(null)        // "Hi, null"   null is a value you passed on purpose

// The Classic Crash

The most common runtime error in JavaScript comes from reading a property of undefined:

const data = {};
data.user.name;
// TypeError: Cannot read properties of undefined (reading 'name')

Read the message closely: it tells you the property it was trying to read (name), so the thing before it (data.user) is the one that was undefined.

// Quick Check

const settings = { volume: 0 };
console.log(settings.volume || 50, settings.volume ?? 50);

// Try It

▶ Open Playground

1. Click Open Playground. Produce undefined in all six ways from the first example
2. Compare undefined + 1 with null + 1
3. Stringify an object with one undefined property and one null property
4. Trigger the "Cannot read properties of undefined" error on purpose, then fix it with ?. and ??