null

null means "empty on purpose"

null is a special value in JavaScript. It means "empty on purpose". When a variable holds null, someone chose to leave it empty. Nobody forgot it, and it is not a mistake. It is a clear sign that says: there is no value here right now.

The undefined lesson showed the value JavaScript gives you when something was never set. This lesson is about null, the value you choose when "nothing" is the right answer.

Use null for a value that is allowed to be empty. Here are some everyday examples from web pages:

• No item is selected.
• Nobody is logged in.
• The game has no winner yet.
• You no longer need a big object that you were keeping.

1let selectedItem = { id: "lesson-1", title: "Variables" };2console.log(selectedItem.title);3selectedItem = null;4console.log(selectedItem);

Line 1 stores a selected item: an object with an id and a title. Line 2 prints its title, Variables. Line 3 clears the selection by storing null. Line 4 prints null.

1let selectedItem = { id: "course", title: "JavaScript basics" };Run2let session = { user: "Ada" };3let winner = null;4 5function clearSelection() {6  selectedItem = null;7}8 9function logout() {10  session = null;11}12 13console.log(selectedItem?.title ?? "nothing selected");14clearSelection();15logout();16console.log(selectedItem === null);17console.log(session === null);18console.log(winner ?? "no winner yet");

The replay uses a longer program with the first three examples. Line 3 sets winner to null, because there is no winner yet. Line 6 clears the selected item. Line 10 empties the session after the user logs out. None of these null values is a bug. Each one tells the rest of the code: "this is empty on purpose".

1let cachedReport = { rows: new Array(1000).fill("data") };2console.log(cachedReport.rows.length);3cachedReport = null;4console.log(cachedReport);

Line 1 stores a big object that holds a list of 1000 rows. Line 2 prints 1000. Line 3 sets cachedReport to null. Now this variable no longer points at the big object. Line 4 prints null.

This does not delete the object right away. JavaScript has a cleaner called the garbage collector. It frees the memory of objects that nothing points at any more. If no other variable points at the big object, the garbage collector can free it later. The Stack & heap lesson shows how this memory works.

An API is a set of ready-made functions that you call, like the browser's document.getElementById(). Many APIs return null to say "I looked, and I found nothing".

The first examples use the DOM. The DOM is the browser's model of the page, and DOM functions find elements on it. These examples run on a tiny page:

• It has one button with the id save.
• No element has the id missing.
• No element has the class none.
• No element with the class panel is around the button.

1const missingById = document.getElementById("missing");2const missingBySelector = document.querySelector(".none");3const button = document.querySelector("#save");4const missingAncestor = button.closest(".panel");5 6console.log(missingById);7console.log(missingBySelector);8console.log(missingAncestor);

Line 1 looks for an element with the id missing. Line 2 looks for the first element with the class none. Line 3 finds the Save button. On line 4, closest() looks at the button and the elements around it for the class panel. None of the three searches finds anything. So lines 6, 7, and 8 each print null.

1console.log("abc".match(/z/));2console.log(/z/.exec("abc"));3console.log(localStorage.getItem("missing"));4console.log(JSON.parse("null"));5console.log(Object.getPrototypeOf(Object.prototype));

Every line prints null:

• Line 1: match() searches text with a pattern. The pattern is called a regular expression. /z/ looks for the letter z, and "abc" has no z.
• Line 2: exec() does the same search, starting from the pattern.
• Line 3: localStorage is storage in the browser that keeps text under a name. Nothing is saved under the name missing.
• Line 4: JSON text can hold null too. JSON.parse() turns it into JavaScript null.
• Line 5: an object can borrow methods from another object, called its prototype. Object.prototype is the last one in that line, so its own prototype is null. You'll see more near the end of this lesson.

1const answer = prompt("Pick a name");2console.log(answer);

prompt() opens a small box that asks the user to type something. If the user types text and presses OK, you get that text as a string. If the user presses Cancel, you get null. You can't run this example here, because the result depends on which button you press.

1console.log([1, 2, 3].find((n) => n > 5));2console.log(new Map([["name", "Ada"]]).get("age"));3console.log("abc".indexOf("z"));

• Line 1: find() looks through an array. It gives undefined when nothing matches.
• Line 2: a Map is a list of keys and values. Its get() gives undefined for a missing key.
• Line 3: indexOf() gives -1 when the text isn't found.

So before you check for null, look up what that API really returns.

A safe way to work with null has three steps:

1. A function returns the value it found, or null.
2. You store the result in a variable.
3. You check for null before you read any property.

Two short operators help with this. You'll see both below:

• ?. is called optional chaining. It reads a property only if the value is not null or undefined. Otherwise it gives undefined, with no error.
• ?? is called nullish coalescing. It picks a backup value when the left side is null or undefined.

There are also two ways to compare a value with null. == is loose equality: it may convert values before it compares them. === is strict equality: it never converts.

1const selectedItem = null;2const missingItem = undefined;3console.log(selectedItem == null);4console.log(missingItem == null);5console.log(0 == null);6console.log(selectedItem === null);

Lines 3 and 4 use the loose check, value == null. It is true for both null and undefined. Line 5 shows that it is false for 0. Line 6 uses the strict check, value === null. Use it when only null should match.

1const users = [Run2  { id: 1, name: "Ada", photo: null },3  { id: 2, name: "Linus", photo: "linus.png" },4];5 6function findUser(id) {7  const match = users.find((user) => user.id === id);8  return match ?? null;9}10 11function describeUser(id) {12  const user = findUser(id);13  const name = user?.name ?? "Guest";14  if (user === null) {15    return name + ": no account";16  }17  const photo = user.photo ?? "default.png";18  return name + ": " + photo;19}20 21console.log(describeUser(3));

Pick "Missing user 3" first. Line 7 searches the list and gets undefined. Line 8 turns that undefined into null, so the meaning is clear. Line 14 checks for exactly null. So line 15 returns early, before any property of null is read. Then pick Ada. Ada is a real user, but her photo is null on purpose, because she has no photo.

typeof null says "object"

typeof is an operator that tells you the type of a value, as text. typeof null gives "object". This is a mistake from the first version of JavaScript, in 1995. It was never fixed, because the fix would break old websites. null is still not an object, and you can't use it like one. The full story is in Null inside the engine.

1const value = null;2console.log(typeof value);3console.log(value === null);4console.log(Object.prototype.toString.call(value));

Line 2 prints object, the old mistake. Line 3 is the check you should write: value === null. It prints true. Line 4 uses an older helper, Object.prototype.toString.call(), that names the kind of a value. It correctly prints [object Null].

Reading a property of null fails

When you read a missing property from a real object, you get undefined. Reading a property from null is different. There is no object to read from, so JavaScript stops and throws an error. Chrome and Node run JavaScript with the V8 engine. V8 shows this message for the next example: TypeError: Cannot read properties of null (reading 'name').

1const profile = null;2console.log(profile.name);

1const profile = null;2if (profile === null) {3  console.log("No profile");4}5console.log(profile?.name ?? "No name");

Line 2 checks for null first, so line 3 prints No profile. This is the clearest way for a beginner. Line 5 does the same job in one line:

• profile?.name stops at null and gives undefined, not an error.
• ?? "No name" then picks the backup text. So line 5 prints No name.

null in math and comparisons

When JavaScript needs a number, it turns null into 0. But == has its own rule for null. So null == 0 is false, even though null becomes 0 in math.

1console.log(null + 1);2console.log(undefined + 1);

Line 1 turns null into 0, then adds 1. It prints 1. Line 2 turns undefined into NaN. NaN means "not a number": a result that is not a usable number. So line 2 prints NaN.

1console.log(Number(null));2console.log(Number(undefined));3console.log(null + 1);4console.log(null * 3);5console.log(null == 0);6console.log(null >= 0);7console.log(null > 0);8console.log(null == undefined);9console.log(null === undefined);10console.log(null < 1);

Read this code in three parts:

• Lines 1 to 4 do math. null becomes 0, and undefined becomes NaN.
• Lines 6, 7, and 10 use >=, >, and <. These turn null into 0 first. So null >= 0 is true, null > 0 is false, and null < 1 is true.
• Lines 5, 8, and 9 check if two values are equal. == does not turn null into a number. It treats null as equal only to null and undefined. So line 5 prints false, and line 8 prints true. Line 9 uses ===, which keeps them apart, so it prints false.

Pick a value and an operation. The code shows the exact line that runs. The result comes from real JavaScript, and the note under it names the rule that was used.

1const value = null;2console.log(value + 1);

null in JSON and defaults

JSON is a text format for sending data, for example from a server to a web page. JSON has its own null, so it keeps null values.

A default is a backup value that you write in two places:

• In a function's parameters, like name = "friend". This is a default parameter.
• In destructuring, which copies properties of an object into variables. Line 4 below does this, with the default "avatar.png".

Defaults only replace undefined. They do not replace null. To replace null, use ?? or ||.

1function greet(name = "friend") {2  return `Hi, ${name}`;3}4const { photo = "avatar.png" } = { photo: null };5 6console.log(JSON.stringify({ photo: null }));7console.log(greet(null));8console.log(greet(undefined));9console.log(photo);10console.log(null ?? "fallback");11console.log(null || "fallback");

• Line 6 prints {"photo":null}. JSON keeps the null.
• Line 7 prints Hi, null. The default "friend" is not used.
• Line 8 prints Hi, friend. The default replaces undefined.
• Line 9 prints null. The default on line 4, "avatar.png", is not used either.
• Lines 10 and 11 both print fallback. ?? replaces only null and undefined. || also replaces 0, "", and false. Try both in the playground above.

The prototype chain ends at null

An object can borrow properties from another object, called its prototype. That prototype can have its own prototype, and so on. This line of objects is the prototype chain. For a normal object, the chain reaches Object.prototype. The prototype of Object.prototype is null, so the chain ends there. You can also make an object with no prototype at all, with Object.create(null).

1const chainEnd = Object.getPrototypeOf(Object.prototype);2console.log(chainEnd);3 4const dictionary = Object.create(null);5dictionary.answer = 42;6console.log("toString" in dictionary);7console.log(dictionary.answer);

Line 1 asks for the prototype of Object.prototype, and line 2 prints null. Line 4 makes dictionary, an object with no prototype. Line 5 gives it its own property, answer.

On line 6, "toString" in dictionary asks: does this object have, or borrow, a property called toString? Normal objects borrow it. This one borrows nothing, so line 6 prints false. Line 7 prints 42, because its own properties still work.

Different APIs say "not found" in different ways. Sort each card by the value that API gives when it finds nothing.

Where null shows up in real code

Use null when "empty" is a normal state in your app. For example:

• A search result is null before the user picks anything.
• A session becomes null after the user logs out.
• A server sends { "photo": null } to say the user has no photo.
• A page search returns null when no element matches.

The habit is always the same. Make it clear that the value can be empty. Then check it before you read its properties. If both null and undefined should get a backup value, use ??. If only null should match, use value === null.

1const apiResponse = { displayName: "Asha", photo: null };2console.log(apiResponse.photo);3console.log(apiResponse.photo === null);

Line 1 is the data a server sent back. It has photo: null to say Asha has no photo. Line 2 prints null. Line 3 checks for exactly null and prints true.

Common misconceptions

• “null is an object.” It isn't. typeof null says "object" because of an old mistake. null is a primitive value.
• “Defaults replace null.” They don't. Default parameters and destructuring defaults only replace undefined.
• “null == 0 is true, because Number(null) is 0.” It's false. == has its own rule: null is equal only to null and undefined.
• “Reading a missing property and reading from null are the same.” They aren't. A missing property gives undefined. Reading any property from null throws an error.
• “Every API returns null when it finds nothing.” Some return undefined, -1, or an empty list.

The table below compares four values that can all look "empty". Each row runs one piece of code on all four. Read across a row to see how the four values differ.

Key takeaways

• null is a primitive value that means "empty on purpose".
• Your code, or an API, puts null in a place on purpose.
• Check for exactly null with value === null.
• typeof null gives "object" because of an old mistake. Don't treat null like an object.
• Reading a property of null throws an error. Check first, or use ?..
• In math, null becomes 0. But null == 0 is still false.
• JSON keeps null. Default parameters and destructuring defaults don't replace it.

Final definition: null is the JavaScript value for something that is empty on purpose.

Up next: Booleans, null & undefined compares all three side by side. To see how the engine stores null, visit Null inside the engine.