undefined

What undefined means

undefined is a value. JavaScript uses it to mean "nothing has been put here yet." It is also its own type. The typeof operator tells you the type of a value, as text. So typeof undefined gives the text "undefined".

1let formField;2var oldStyle;3console.log(undefined);4console.log(typeof undefined);5console.log(formField);6console.log(oldStyle);

Lines 1 and 2 create two variables, formField and oldStyle. Neither one gets a value. So lines 5 and 6 print undefined. Line 3 prints the value undefined itself. Line 4 is different. It prints the type, which is the text "undefined". The console shows the same word for both.

1const needsValue;

let and the older var can start with no value. const cannot. A const must get its value on the same line. Without one, you get a SyntaxError: JavaScript refuses to run the code at all.

The hoisting lesson explains one more case. In classic scripts, a var reads as undefined even before the line that gives it a value.

Most undefined values are not mistakes. JavaScript gives you undefined when nothing was:

• put into a variable,
• found at a property or an index,
• passed in as an argument, or
• returned from a function.

Below, you can step through these cases one at a time.

1function greet(name) {2  console.log(name);3}4greet();

Line 1 makes a function, greet, with one parameter, name. A parameter is a variable that holds what the caller passes in. Line 4 calls greet but passes nothing. So on line 2, name is undefined. The function still runs. It just has no name to print.

1let draftTitle;Run2let oldCounter;3const profile = { name: "Ada" };4const tasks = ["learn"];5const sparse = [1, , 3];6const pantry = new Map([["tea", 2]]);7 8console.log(draftTitle);9console.log(oldCounter);10console.log(profile.age);11console.log(tasks[5]);12console.log(sparse[1]);13console.log("abc"[5]);14console.log(tasks.at(-10));15console.log(pantry.get("coffee"));16console.log([].pop());17console.log([1, 2].find((n) => n > 5));

The step-through shows each of these reads giving undefined:

• Two variables that never got a value (lines 8 and 9).
• A property the object does not have, profile.age (line 10).
• An index past the end of an array, tasks[5] (line 11).
• A hole in an array, sparse[1] (line 12). The next section explains holes.
• An index past the end of a string, "abc"[5] (line 13).
• tasks.at(-10) (line 14). With a negative number, at counts back from the end. Here it goes past the start.
• A key that a Map does not have, pantry.get("coffee") (line 15). A Map is a list of keys and values, and get looks up one key.
• [].pop() (line 16). pop removes the last item, but an empty array has none.
• find with no match (line 17). find returns the first item that passes the test. Here, no item does.

Missing properties, indexes, and holes

Reading a property that an object does not have is safe. You get undefined. But when a value in the middle of a chain like user.address.city is missing, the next read fails.

Arrays can also have holes. A hole is an empty spot with no item at all. Reading a hole gives undefined too, but nothing is stored there.

1const user = { name: "Ada" };2const scores = [10, 20];3const sparse = [1, , 3];4 5console.log(user.age);6console.log(scores[5]);7console.log(sparse[1]);8console.log(1 in sparse);9console.log("abc"[5]);10console.log(scores.at(-10));

Lines 5, 6, 7, 9, and 10 all print undefined. Line 7 reads the hole in sparse. Line 8 checks that spot with the in operator. in asks, "Is there an item at this index?" It prints false. So index 1 is a hole, not a stored value, even though reading it gives undefined.

1const user = {};2console.log(user.address.city);

When a step might be missing, use optional chaining, written ?.. If the value on its left is undefined or null, it stops and gives undefined instead of throwing. For example, user?.address?.city gives undefined here, not a TypeError.

1const user = { profile: {} };2console.log(user.profile?.city);3console.log(user.profile?.city ?? "Unknown");

Line 2 reads city, which profile does not have, so it prints undefined. Line 3 adds ??. It gives the value on its right when the left side is undefined or null. So the missing city becomes the text "Unknown".

A function's parameters are variables inside the function. If a call passes fewer arguments than there are parameters, the extra parameters start as undefined. A function that returns nothing also gives back undefined.

The step-through below uses default parameters. In name = "friend", the value after = is used when no argument comes in.

1function greet(name = "friend", punctuation = "!") {2  return "Hello, " + name + punctuation;3}4 5console.log(greet("Ada"));Run6console.log(greet());7console.log(greet(undefined, "?"));8console.log(greet(null));

A default is used only when the argument is missing or is undefined. Passing null is different. null is a real value that someone chose, so the default is not used. The later lesson Booleans, null & undefined compares null and undefined side by side.

1function showArgument(value) {2  console.log(value);3}4function noReturn() {5  const status = "saved";6}7function bareReturn() {8  return;9}10 11showArgument();12console.log(noReturn());13console.log(bareReturn());14const printed = console.log("console.log prints first");15console.log(printed);16console.log([1, 2].forEach((n) => n * 2));17console.log([1, 2].find((n) => n > 5));18console.log(new Map().get("missing"));19console.log([].pop());

• Line 11 passes no argument, so value is undefined.
• Line 12 calls a function that has no return.
• Line 13 calls a function with an empty return;.
• Lines 14 and 15 show a surprise. console.log prints its message, and then it returns undefined.
• Line 16 is similar. forEach runs a function once for each item, for the work it does. It returns undefined.
• Lines 17 to 19 are lookups that find nothing.

1const result = console.log("saved");2console.log(result);

Line 1 prints "saved" right away. Then it stores what console.log returned in result. Line 2 prints result. So the output is saved, then undefined.

undefined vs not defined

These two sound alike, but they mean different things:

• undefined: the variable exists, and its value is undefined.
• Not defined: JavaScript cannot find any variable with that name.

1let declared;2console.log(declared);3console.log(typeof declared);4console.log(typeof neverDeclared);

Line 2 reads declared. It exists, so it prints undefined. Line 3 prints its type, the text "undefined".

Line 4 uses typeof on neverDeclared, a name that was never created. typeof has a special rule for this. It gives the text "undefined" instead of throwing. So it is a safe way to check for a name that might not exist.

1console.log(neverDeclared);

Without typeof, reading neverDeclared throws a ReferenceError. That error means "there is no variable with this name."

Checking and defaults

Pick the check that fits your question:

• Is this variable undefined? Use value === undefined. The === operator checks that two values are exactly the same.
• Does this name exist at all? Use typeof name === "undefined".
• Do you need a fallback value? Use ?? and ?.. They keep 0, false, and "" (the empty string) as real values.

1const present = { key: undefined };2const missing = {};3 4console.log("key" in present);5console.log("key" in missing);6console.log(Object.hasOwn(present, "key"));7console.log(Object.hasOwn(missing, "key"));8console.log(Object.keys(present).join(","));9console.log(JSON.stringify(present));

Line 1 makes an object with a key, key, whose value is undefined. Line 2 makes an empty object. Reading key from either one gives undefined. To tell them apart, ask whether the key exists:

• "key" in obj (lines 4 and 5).
• Object.hasOwn(obj, "key") (lines 6 and 7).
• Object.keys(obj), which lists the keys (line 8).

Line 9 shows that JSON leaves the key out. The JSON section below explains why.

1function greet(name = "friend") {2  console.log("Hello, " + name);3}4greet(undefined);5greet(null);6 7const [first = "fallback", second = "backup"] = [undefined, null];8const { label = "Untitled", count = 0 } = { count: undefined };9console.log(first);10console.log(second);11console.log(label);12console.log(count);

Lines 4 and 5 call greet with undefined, then with null. Only the first call uses the default.

Lines 7 and 8 use destructuring: pulling values out of an array or an object into variables. A default after = works the same way there:

• first gets "fallback", because its value is undefined.
• second keeps null.
• label gets "Untitled", because the object has no label.
• count gets 0, because the object's count is undefined.

1const savedItems = 0;2const nickname = "";3console.log(savedItems ?? 3);4console.log(savedItems || 3);5console.log(nickname ?? "Guest");6console.log(nickname || "Guest");

Lines 3 and 5 use ??. It keeps 0 and the empty string, because it only replaces null or undefined.

Lines 4 and 6 use || (OR). It replaces any falsy value. A falsy value is one that if treats as false, such as 0 and "". So || throws away the real 0 and gives 3.

void and the global undefined

The void operator runs the expression after it, throws away the result, and gives undefined.

JavaScript also has a global property named undefined that holds this value. Global means you can use it anywhere. You cannot change it, and you cannot delete it.

1const descriptor = Object.getOwnPropertyDescriptor(globalThis, "undefined");2console.log(descriptor.writable);3console.log(descriptor.configurable);4console.log(void 0);5console.log(void "hello");

• Line 1 asks JavaScript for the settings of the global undefined property.
• Line 2 prints false: you cannot write a new value into it.
• Line 3 prints false: you cannot delete it or change its settings.
• Lines 4 and 5 show that void always gives undefined.

These settings have been in place since ES5, the 2009 version of JavaScript. Now see what happens when code tries to change the value.

1undefined = "changed";2console.log(undefined);

1"use strict";2undefined = "changed";

Strict mode is a stricter way to run JavaScript. You turn it on with "use strict" at the top. Without it, line 1 of the first block quietly does nothing, so line 2 still prints undefined. With it, the same change throws a TypeError.

Inside a function, you could make your own variable named undefined. Never do that. It makes code confusing, and JavaScript already gives you the real value. To see how the engine stores undefined, read undefined inside the engine.

undefined in math, text, and JSON

undefined is falsy, so if treats it as false. Other operations have their own rules:

• In math, it becomes NaN, which means "not a number".
• In text, it becomes the word undefined.
• In JSON, the result depends on where it is.

1console.log(undefined + 1);2console.log(`value: ${undefined}`);3console.log(String(undefined));4console.log(Number(undefined));5console.log(undefined == null);6console.log(undefined === null);7console.log(JSON.stringify({ a: undefined }));8console.log(JSON.stringify([undefined]));9console.log(JSON.stringify(undefined));

• Lines 1 and 4 give NaN.
• Lines 2 and 3 give the text undefined.
• Line 5 uses loose equality, ==. It counts null and undefined as equal, so it prints true.
• Line 6 uses strict equality, ===. It does not count them as equal, so it prints false.
• Lines 7 to 9 use JSON.stringify. It turns a value into JSON text. JSON is the text format web apps use to send data.

The last line is the surprise. JSON.stringify(undefined) does not give a string at all. It gives back the value undefined.

Pick a small program from the list. Then compare three things: the value, its type, and what the console prints. Most programs give undefined. One throws on purpose, because a value in the middle of a chain is missing.

1let x;2console.log(x);

Some expressions look alike but give different results: undefined, null, an error, or something else. Sort each card by what JavaScript really does.

Where you meet undefined in real code

In real projects, undefined often shows up in three places:

• settings objects, where the caller leaves some settings out,
• function parameters that the caller may skip, and
• data from a server (an API) where a field is missing.

The safe way is to read with care, use a fallback only for undefined or null, and keep real values like 0.

1function connect(options = {}) {2  const retries = options.retries ?? 3;3  return "retries: " + retries;4}5 6const apiUser = { profile: { name: "Ada" } };7console.log(connect({ retries: 0 }));8console.log(connect({}));9console.log(apiUser.profile?.address?.city ?? "Unknown city");

• Line 1 gives options a default, {}, an empty object. So a caller can leave out the whole settings object.
• Line 2 uses ??. So on line 7, retries: 0 stays 0.
• Line 8 passes no retries, so the fallback, 3, is used.
• Line 9 reads a city that is not there and prints "Unknown city".

Keep these habits:

• Write options = {} so callers may leave out the whole settings object.
• Use ?? so 0 stays a real setting.
• Use ?. before a field that may be missing.
• When data should say "empty on purpose", expect null. The null lesson covers it.

1const response = { user: { name: "Asha" } };2console.log(response.user?.name ?? "Guest");3console.log(response.user?.phone ?? "No phone");

The response has a name but no phone. ?. makes the read safe, and ?? turns the undefined into the text "No phone".

Common misconceptions

• "undefined means the variable does not exist." No. A variable that exists can hold undefined. Reading a name that was never created throws an error.
• "A missing property and a missing value in the middle behave the same." No. obj.missing is safe and gives undefined. obj.missing.x throws a TypeError.
• "Array holes store undefined." No. A hole is an empty spot with nothing stored. Reading it gives undefined, but index in array is false.
• "Defaults replace null." No. Defaults are used only for undefined and for missing arguments or properties.
• "JSON has an undefined value." No. JSON has null, but it has no undefined.

The table below compares four ways a value can be missing. Read each row from left to right: what you have, an example, what reading it gives, whether the key exists, and what JSON gives.

Key takeaways

• undefined is a value, and also its own type. typeof undefined gives "undefined".
• You get it when nothing was put into a place, found, passed in, or returned.
• Reading a name that was never created throws a ReferenceError. typeof neverDeclared is the safe way to check.
• Defaults are used for undefined, not for null.
• Choose ?., ??, Object.hasOwn, and the JSON rules on purpose. Don't rely on if (value) alone.

Final definition: undefined is JavaScript's built-in value, and type, for a place that exists but has nothing in it.

Up next: null, the value you write yourself when you want to say "nothing here, on purpose."