Booleans, null & undefined

Yes, no, and no value

Programs often need a plain yes or no. Is the menu open? Did the user fill in the form? Should this message show? JavaScript has two values for this, called booleans:

• true means yes.
• false means no.

1const subscribed = true;2const muted = false;3console.log(subscribed);4console.log(muted);

Line 1 stores true in subscribed. Line 2 stores false in muted. Lines 3 and 4 print them. These are real booleans, not the text "true" or "false".

Most of the time you don't type true yourself. You ask a question, and JavaScript answers with a boolean. A comparison, like 3 >= 2, is one such question.

1const hasEnoughTea = 3 >= 2;2const hasEnoughMilk = 1 >= 2;3 4console.log(hasEnoughTea);5console.log(hasEnoughMilk);

Line 1 asks "is 3 at least 2?" The answer is yes, so hasEnoughTea holds true. Line 2 asks "is 1 at least 2?" The answer is no, so hasEnoughMilk holds false. Lines 4 and 5 print true, then false. A name like hasEnoughTea reads like a question. That makes the code easy to read later.

This lesson also looks at two other values: null and undefined. They are not booleans. But they often show up next to yes/no checks, because code must also ask, "Do I have a value at all?" Each of the three has its own lesson:

• Booleans & truthiness
• undefined
• null

Here you put them side by side and learn which check to use for each job.

This lesson uses tiny if statements, because they show truthiness most clearly. An if runs its code only when its condition counts as yes. You'll learn if fully in a later lesson. For now, read if (value) as "if this value counts as true".

The condition of an if does not have to be true or false. It can be any value. JavaScript first turns the value into a boolean, then decides. Only eight values turn into false. They are the falsy values, and the list is short enough to learn by heart:

• false
• 0, the number zero
• -0, negative zero
• 0n, zero as a BigInt (a whole-number type you'll meet in the next lesson)
• "", the empty string (text with no characters)
• null
• undefined
• NaN, which means "not a number"

Every other value is truthy. That includes values that look empty or false: "0", "false", " ", [], , -1, and Infinity.

So if (value) is handy for asking "is there something here?" But be careful when 0 or an empty string is a real answer. The check treats them as "nothing".

1const price = Number("tea");2 3console.log(Number.isNaN(price));4console.log(Boolean(price));

Line 1 asks Number("tea") to turn the text "tea" into a number. It can't, so it gives NaN. Line 3 uses Number.isNaN(price), which asks "is this NaN?" It prints true. Line 4 prints false, because NaN is falsy.

A falsy check only tells you "this counts as no". It can't tell NaN apart from 0 or null. When you need to know that a number failed, use Number.isNaN.

Pick a value. The code below tests it in three ways, and all three always agree:

• Boolean(value) turns the value into true or false.
• !!value does the same thing. One ! gives the opposite boolean. A second ! flips it back.
• if (value) runs the truthy branch or the falsy branch. A branch is the block of code that runs.

1const value = false;2console.log(Boolean(value));3console.log(!!value);4if (value) {5  console.log("truthy branch");6} else {7  console.log("falsy branch");8}

Try [] and . An empty array is still an array, and an empty object is still an object. Every array and object is truthy, even with nothing inside. To ask "does this list have items?", check its length, the number of items. Don't test the array itself.

null and undefined both mean "there is no useful value here". But they mean it in different ways:

• null means the value is empty on purpose. Some code chose to put null there.
• undefined means no value was given yet. Usually JavaScript gives you undefined by itself.

The table compares the two values. Read each row as a question, then the answer for null and for undefined.

You saw typeof null in the Data types lesson. typeof tells you the type of a value, and for null it gives "object". This is an old mistake that was never fixed. null is not an object, and you can't read properties from it.

1const profile = {2  nickname: undefined,3  photoUrl: null,4};5 6console.log("nickname" in profile);7console.log(profile.nickname === undefined);8console.log("age" in profile);9console.log(profile.age === undefined);10console.log(profile.photoUrl === null);

Lines 1 to 4 make a profile object. It has a nickname property that holds undefined, and a photoUrl property that holds null. It has no age property at all.

The in operator asks "does this object have a property with this name?" Line 6 prints true: nickname is there, even though its value is undefined. Line 8 prints false: age was never added. But lines 7 and 9 both print true, because reading nickname or age gives undefined either way. So reading a property can't tell you whether it is there. Use in for that.

1const profile = {2  nickname: undefined,3};4 5console.log(Object.hasOwn(profile, "nickname"));6console.log(Object.hasOwn(profile, "age"));

Object.hasOwn(profile, "nickname") asks the same question in another way: "does profile itself have a property called nickname?" Line 5 prints true, and line 6 prints false. For plain data, like data from a form or a server, Object.hasOwn is often the clearer choice.

1const profile = {2  nickname: undefined,3  photoUrl: null,4};5 6console.log(JSON.stringify(profile));7console.log(JSON.stringify([undefined, null]));8console.log(JSON.stringify(undefined));

JSON is a text format for sending data, for example to a server. JSON.stringify turns a value into JSON text. Here is what each line prints:

1. Line 6 prints {"photoUrl":null}. JSON keeps a property that holds null, but leaves out a property that holds undefined.
2. Line 7 prints [null,null]. An array must keep every position, so JSON writes undefined as null there.
3. Line 8 prints undefined. There is no JSON text for undefined on its own, so the call gives back undefined instead of text.

1function greeting(name = "friend") {2  return "Hi, " + name;3}4 5console.log(greeting());6console.log(greeting(null));

On line 1, name = "friend" is a default value. It is used when the caller gives no name. Line 5 calls greeting() with nothing, so name is undefined, the default fills in, and it prints "Hi, friend". Line 6 passes null. A default value only fills in for undefined, so it prints "Hi, null". If null should get "friend" too, use ?? inside the function. You'll meet ?? later in this lesson.

You get undefined in many everyday places. Here are five of them:

• a variable made with let but given no value,
• an object property that doesn't exist,
• a function that has no return,
• a function argument the caller left out,
• an array position past the end of the array.

null shows up when code puts it there on purpose. Some browser tools also give null when they find nothing. For example, document.querySelector(".missing") searches the page for an element. When nothing matches, it gives null. In the Talking to the user lesson, prompt also gives null when the user clicks Cancel.

Step through the code below. Watch each line make an undefined, and the last one make a null.

1let notFilled;Run2const profile = { name: "Ada" };3function noReturn() {4  const message = "done";5}6function echo(nickname) {7  return nickname;8}9const list = ["first"];10const deliberatelyEmpty = null;11 12console.log(notFilled);13console.log(profile.age);14console.log(noReturn());15console.log(echo());16console.log(list[3]);17console.log(deliberatelyEmpty);

1const todos = ["tea", "milk"];2const missingTodo = todos.find((todo) => todo === "bread");3 4console.log(missingTodo);

Line 1 makes a list of two to-dos. On line 2, find looks for the item "bread". It isn't in the list, and find gives undefined when nothing matches. So line 4 prints undefined. Other tools, like querySelector, give null instead. Don't guess. Look up what a tool gives when it finds nothing, then write a check for that value.

A common beginner bug is to treat "falsy" as if it meant "missing". Say a quantity can be 0, or a name can be an empty string. Then if (value) catches too much: it treats 0 and "" as missing too.

The step-through below runs four checks on the same value. Pick a value, then step through the lines:

• Line 2, Boolean(name), is the truthy check.
• Line 3, name === undefined, is true only for undefined.
• Line 4, name == null, is true for null and undefined, and nothing else.
• Line 5, name ?? "friend", uses "friend" only when name is null or undefined.

1const name = undefined;Run2console.log(Boolean(name));3console.log(name === undefined);4console.log(name == null);5console.log(name ?? "friend");

Two of these checks are the ones to remember:

• Use value == null when null and undefined should both count as missing, and nothing else should.
• Use value ?? fallback when you want a backup value only for null or undefined. ?? is called the nullish coalescing operator. "Nullish" means "null or undefined".

The Operators module has full lessons on comparisons, ??, and the related ?. operator.

Choose a fallback carefully

A fallback is a backup value. Your program uses it when the real value isn't there. Two operators can give a fallback, and they decide differently:

• || uses the fallback for every falsy value.
• ?? uses the fallback only for null and undefined.

1const savedValue = "";2const withOr = savedValue || "guest";3const withNullish = savedValue ?? "guest";4 5console.log(withOr);6console.log(withNullish);

Line 1 stores an empty string in savedValue. In a form, an empty name might be a real choice. Line 2 uses ||. The empty string is falsy, so withOr gets "guest", and line 5 prints guest. Line 3 uses ??. The empty string is not null or undefined, so withNullish keeps it. Line 6 prints the empty string, so the console shows a blank line.

The table tries five saved values. Read each row as: "when savedValue is this, each line gives that."

Use || when every falsy value should mean "use the backup". For example, a search box where empty text should never count. Use ?? when 0, an empty string, or false is real data that the page should keep.

Where you'll use this

Real web pages use these checks all the time. Some examples:

• form fields the user may leave empty,
• how many of an item are in a shopping cart,
• settings that are on or off,
• search filters,
• data sent back from a server.

Each time, ask yourself one question: "Am I checking yes or no? Or am I checking whether a value is missing?"

1const quantityText = "";2 3console.log(quantityText === "");4console.log(Number(quantityText));

A form field in the browser always gives you text, called a string. Line 1 stands for an empty quantity field: quantityText is "". Line 3 prints true, so the field is empty. Line 4 prints 0, because Number("") turns an empty string into zero. So check the text first. Otherwise an empty field looks the same as a quantity of zero.

1function labelQuantity(quantity) {2  if (quantity == null) {3    return "missing";4  }5  return quantity + " selected";6}7console.log(labelQuantity(0));

Line 2 checks quantity == null. That is true only for null and undefined. So labelQuantity(0) skips the "missing" line and returns "0 selected".

1const response = {2  displayName: "",3  photoUrl: null,4};5 6const name = response.displayName ?? "Guest";7const photo = response.photoUrl ?? "default-photo.png";8 9console.log(name === "");10console.log(photo);

Lines 1 to 4 stand for data sent back from a server. The displayName is an empty string. The photoUrl is null, which means there is no photo. Line 6 keeps the empty name, because "" is not null or undefined. Line 7 uses the backup photo, because photoUrl is null. Line 9 prints true, and line 10 prints default-photo.png.

1const isMenuOpen = false;2const buttonLabel = isMenuOpen ? "Close menu" : "Open menu";3 4console.log(buttonLabel);

Line 1 stores one fact: the menu is closed. Line 2 uses ? :, which picks one of two values. If isMenuOpen is truthy it picks "Close menu". Otherwise it picks "Open menu". So line 4 prints Open menu. A boolean is a good fit when something has exactly two states. If it can be in three or more states, use a value with more choices, like a string.

Common mistakes

• "Empty arrays are falsy." They are truthy, like every array. Check array.length instead.
• "The string "false" is false." It is text with five characters. Only the empty string is falsy, so it is truthy.
• "null and undefined are the same." null == undefined is true, but null === undefined is false. They also mean different things.
• "typeof null shows that null is an object." It is an old mistake in JavaScript. null has no properties to read.
• "if (value) is a safe check for a missing value." It also treats 0, "", false, and NaN as missing.

The code below shows the first mistake. Line 3 tests the array itself. Line 7 tests how many items it has.

1const cartItems = [];2 3if (cartItems) {4  console.log("cart exists");5}6 7if (cartItems.length === 0) {8  console.log("cart is empty");9}

cartItems is an empty array. Line 3 asks if (cartItems). An array is always truthy, so line 4 prints cart exists. Line 7 asks whether cartItems.length is 0. It is, so line 8 prints cart is empty.

Key takeaways

• There are exactly two booleans: true and false.
• There are exactly eight falsy values: false, 0, -0, 0n, "", null, undefined, and NaN.
• Every object is truthy. That includes [] and .
• Use null to say "empty on purpose". Expect undefined when no value was given.
• When you mean "missing" and not just "falsy", use == null or ??.

In one line: Truthiness is how JavaScript reads any value as yes or no. null and undefined are its two ways to say "no value here".

Up next: BigInt, a type for very large whole numbers.