Booleans & truthiness

true and false

A boolean is a yes/no value. There are only two booleans: true means yes, and false means no. Booleans are primitive values: simple values, like numbers and strings.

You will often keep booleans in variables with names like isOpen, hasItems, isLoggedIn, and checked.

1const isOpen = true;2const hasItems = false;3console.log(typeof true);4console.log(isOpen);5console.log(hasItems);

Line 1 stores true in isOpen. Line 2 stores false in hasItems. Line 3 uses typeof, which gives the type of a value as text. It prints "boolean", because true is a boolean, not a string. Lines 4 and 5 print the two stored values.

You can give these variables any name. But names that start with is, has, or can read like yes/no questions, so the code is easy to read.

This lesson is about using booleans. To see how the engine stores them, read Booleans inside the engine. Later, the Booleans, null & undefined lesson puts booleans next to null and undefined, the two values that mean "nothing here".

You can write true and false yourself. But most booleans come from questions that your code asks:

• A comparison, such as 5 > 3, asks how two values compare.
• Some methods ask a yes/no question, such as "does this text contain ell?"
• The not operator, !, gives the opposite answer.

1const isOpen = true;Run2const hasItems = false;3const trueType = typeof true;4const bigger = 5 > 3;5const sameLetter = "a" === "A";6const hasEll = "hello".includes("ell");7const isArray = Array.isArray([]);8const isReallyNaN = Number.isNaN(NaN);9const startsWithC = "cat".startsWith("c");10const isClosed = !isOpen;11console.log(isOpen, hasItems, trueType);12console.log(bigger, sameLetter);13console.log(hasEll, isArray, isReallyNaN, startsWithC);14console.log(isClosed);

Read each variable name as a question:

• bigger asks: is 5 more than 3? Yes, so it holds true.
• sameLetter asks: is "a" the same as "A"? No, because small and capital letters are different. So it holds false.
• hasEll asks: does "hello" contain "ell"? Yes.
• isArray asks: is [] an array? Yes.
• isReallyNaN asks: is this value NaN, the "not a number" value? Yes.
• startsWithC asks: does "cat" start with "c"? Yes.
• isClosed uses ! to get the opposite of isOpen. isOpen is true, so isClosed is false.

Sometimes you have a value and want to know: will JavaScript treat it as true or as false? Finding out is called boolean conversion. There are two common ways to get the answer:

• Boolean(value) gives the answer as true or false. This is the clearest way.
• !!value gives the same answer. It uses the not operator ! two times.

1const value = "";Run2const explicit = Boolean(value);3const compact = !!value;4const flipped = !value;5if (value) {6  console.log("truthy branch");7} else {8  console.log("falsy branch");9}10console.log(explicit, compact, flipped);

An if (value) does the same conversion to choose which block of code to run. None of these change value itself. They only answer a yes/no question about it.

Why does !! work? One ! gives the opposite answer. A second ! gives the opposite of that, which is the plain answer again.

The eight falsy values

Only eight values are falsy. Learn this list by heart. Every other value is truthy.

• false
• 0
• -0
• 0n
• ""
• null
• undefined
• NaN

The surprises are all on the truthy side. These values look empty or false, but they are truthy:

• The strings "0", "false", and " " (one space).
• An empty array, [], and an empty object, {}.
• Functions and symbols.
• Wrapper objects, such as new Boolean(false). You'll meet them later in this lesson.

The quotes matter. "0" and "false" are strings with characters in them, so they are not empty. [] and {} are objects, and objects are truthy. JavaScript does not read the words inside a string. So Boolean("0"), Boolean("false"), Boolean([]), and Boolean({}) all give true.

Pick a value from the list and see how JavaScript treats it. The playground shows three results: Boolean(value), !!value, and which block if (value) runs.

The last group, "Computed expressions", holds common bugs. For example, "abc".indexOf("a") gives 0, because "a" is at position 0, and 0 is falsy. And 0.1 + 0.2 - 0.3 leaves a tiny number that is not quite zero, so it is truthy.

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

The table below lists every value from the playground, in the same groups. Read each row as: this value is truthy or falsy, and here is why. The middle column is worked out from the real value when the page is built, so it is always right.

Booleans in conditions and logic

An if uses truthiness to decide whether to run its block. The operators work like this:

• ! (not) always gives a real boolean: true or false.
• || (or) and && (and) are different. They don't always give a boolean. They give back one of the two values you gave them.

This is only a first look. The Logical operators lesson covers them in full.

1const name = "";2const fallback = name || "friend";3const subscribed = true;4const access = subscribed && "member area";5console.log(fallback);6console.log(access);7console.log(!subscribed);

• Line 2: name is the empty string, which is falsy. So || gives back the other value, "friend".
• Line 4: subscribed is true, so && gives back the second value, the string "member area". It does not give the boolean true.
• Line 7 uses !, so it prints a real boolean: false.

Boolean(x) without new gives a plain boolean. new Boolean(false) is different. It makes an object with false inside it. An object like this is called a wrapper object. Every object is truthy, so this object is truthy too. That makes it dangerous in an if.

1const boxed = new Boolean(false);2console.log(Boolean(boxed));3console.log(typeof boxed);4console.log(boxed.valueOf());5console.log(Boolean(false));

• Line 1 makes the wrapper object and stores it in boxed.
• Line 2 prints true, because the object is truthy.
• Line 3 prints "object", the type of boxed.
• Line 4 uses valueOf(), a method that takes out the value inside. It prints false.
• Line 5 converts the plain value false, so it prints false.

The second trap is writing == true or == false. The == operator is called loose equality: it changes the values before it compares them. When one side is a boolean, it turns that boolean into a number: true becomes 1 and false becomes 0. Then it turns the other side into a number too. That gives surprising results.

1console.log("1" == true);2console.log("true" == true);3console.log([] == false);4console.log(Boolean([]));

• Line 1: "1" becomes 1 and true becomes 1, so it prints true.
• Line 2: "true" is not a number, so it becomes NaN. NaN is not equal to 1, so it prints false.
• Line 3: [] becomes the empty string, then 0. false also becomes 0, so it prints true.
• Line 4 shows that [] is still truthy. So == false and "is it falsy?" are different questions.

The table asks three questions about each value. Read each row from left to right.

Write if (value) when you mean "is it truthy?". Write value === true when it must be the boolean true and nothing else. The === operator is strict equality: it never changes the values before it compares them.

Booleans in real code

Real code uses booleans in many places. Each place asks a different yes/no question.

Name boolean variables like questions: isOpen, hasItems, and isLoggedIn. Then if (isOpen) reads like plain English: "if it is open". Each variable should answer one clear question.

• Toggles, which switch between on and off: flip a boolean with isOpen = !isOpen.
• Form controls: a checkbox has a .checked property. It is true when the box is ticked.
• Arrays: if (items.length) asks whether the list has any items. A length of 0 is falsy.
• Cleanup: array.filter(Boolean) keeps only the truthy values. It also removes 0 and false.
• Text from web addresses or forms: it arrives as the string "true" or "false". Compare the exact text.

1let isOpen = false;2isOpen = !isOpen;3console.log(isOpen);4const checkbox = { checked: true };5console.log(checkbox.checked);6const cart = [];7const hasItems = cart.length > 0;8const user = { name: "Asha" };9const isLoggedIn = Boolean(user);10console.log(hasItems, isLoggedIn);

• Line 1: the toggle starts as false, which means closed.
• Line 2: !isOpen gives the opposite, so isOpen becomes true. Line 3 prints true.
• Line 5 prints the checkbox's checked property, true.
• Line 7: the cart is empty, so its length is 0 and hasItems is false.
• Line 9: user is an object, so Boolean(user) is true.
• Line 10 prints false true.

1const items = ["hat", "coat"];2if (items.length) {3  console.log("show cart");4}5const mixed = [0, 1, "", "Ada", null, false, true];6console.log(mixed.filter(Boolean).join("|"));

• Line 2: the list has 2 items. 2 is truthy, so line 3 prints show cart.
• Line 6: filter(Boolean) keeps only the truthy values. It removes 0, "", null, and false. Then join("|") puts the kept values into one string with | between them, so it prints 1|Ada|true.

1const fromUrl = "false";2console.log(Boolean(fromUrl));3console.log(fromUrl === "true");4console.log(fromUrl === "false" ? false : fromUrl === "true");

• Line 1: text from a web address is always a string. Here it is "false".
• Line 2 prints true, because the string is not empty. So Boolean() can't read this text for you.
• Line 3 compares the exact text and prints false.
• Line 4 uses ? :, a short if/else. If the text is "false", the answer is false. If not, the answer is whether the text is "true". Here it prints false.

Common misconceptions

• "The string "false" is false." It is a string with characters in it, so it is truthy.
• "A string of spaces is empty." " " and "\n" (a new line) contain characters, so they are truthy.
• "Empty arrays and objects are falsy." They are objects, and objects are truthy.
• "new Boolean(false) works like false." It is an object, so it is truthy.
• "== true checks truthiness." It turns both sides into numbers first, so it can give surprising answers.
• "filter(Boolean) only removes missing values." It removes every falsy value, including 0 and false.
• "if (value) only checks for a missing value." It also skips false, 0, "", and NaN.

Key takeaways

• There are exactly two booleans: true and false.
• Comparisons, yes/no methods, and ! give booleans.
• The eight falsy values are false, 0, -0, 0n, "", null, undefined, and NaN.
• Every other value is truthy. That includes "false", [], {}, and new Boolean(false).
• Don't write == true. Use if (value) to check truthiness, or value === true to check for the boolean true.
• In real code, pick the check that fits the question: items.length for "any items?", filter(Boolean) to drop falsy values, and raw === "true" to read text.

Final definition: a boolean is the yes/no value true or false. Truthiness is how JavaScript reads any other value as true or false when it needs a yes/no answer.

Up next: undefined, the value JavaScript uses when nothing has been given yet.