All falsey values in JavaScript

Understanding truthy and falsey values in JavaScript is crucial for writing effective and bug-free code. These values determine how JavaScript evaluates conditions, playing a vital role in conditional statements like if and else blocks, as well as in logical operations. While JavaScript is known for its flexibility, this can sometimes lead to unexpected behavior if you’re not clear on how it treats different data types in a boolean context. Mastering the concept of falsey values helps you write more predictable, robust, and maintainable JavaScript code. In this guide, we’ll explore each of the falsey values in detail, provide examples, and explain why understanding them is essential for any JavaScript developer. By the end, you’ll have a clear understanding of how JavaScript handles these values and how to avoid common pitfalls related to them. We will also touch on related concepts like type coercion and the importance of strict equality (===) to ensure accurate boolean evaluations.

What are Falsey Values in JavaScript?

In JavaScript, a falsey value is a value that evaluates to false when encountered in a Boolean context. This means that when JavaScript expects a Boolean (true or false), it will implicitly convert certain values to false. There are only eight falsey values in JavaScript: false, 0, -0, 0n, "" (empty string), null, undefined, and NaN. Understanding these values is essential because they directly impact how your conditional statements and logical operations behave. When you use an if statement, for example, the expression inside the parentheses is evaluated. If the result is one of these falsey values, the code inside the if block will not execute. Similarly, in logical operations like && (AND) and || (OR), JavaScript uses these values to determine the final result. For example, false || ‘hello’ will evaluate to ‘hello’ because false is a falsey value.

It’s important to distinguish between falsey values and values that are simply “falsish” in a colloquial sense. Only the eight values listed above are officially considered falsey by the JavaScript engine. All other values, including objects, arrays (even empty ones), and non-empty strings, are considered “truthy.” This distinction is crucial for avoiding unexpected behavior in your code. Knowing the specific falsey values allows you to write more precise and reliable conditional logic. For example, using if (myVariable) without understanding the potential falsey values that myVariable might hold could lead to bugs that are difficult to track down.

Type coercion plays a significant role in how JavaScript handles falsey values. Type coercion is the automatic or implicit conversion of values from one data type to another. JavaScript often coerces values to booleans in conditional contexts. For instance, when you use a value in an if statement, JavaScript attempts to convert that value to a boolean using its internal ToBoolean operation. This operation returns false for falsey values and true for all other values. Understanding type coercion helps you predict how JavaScript will evaluate different expressions and allows you to write code that behaves as expected. As Douglas Crockford, author of “JavaScript: The Good Parts,” notes, “JavaScript’s automatic type conversion is a mixed blessing. It can be convenient, but it can also be a source of confusion and errors.” ^[1]

The Specific Falsey Values

Let’s dive into each of the falsey values in JavaScript and explore how they behave in different scenarios. Understanding the nuances of each value is key to mastering conditional logic. This section will provide examples and context for each value, illustrating how they can affect your code’s behavior.

• false: The Boolean value false is, unsurprisingly, a falsey value. It directly represents the logical false state.
• 0: The number zero is a falsey value. This applies to both integer and floating-point zero values (e.g., 0 and 0.0).
• -0: Negative zero is also a falsey value. Although it’s rarely encountered, it’s important to know that JavaScript treats it as falsey.
• 0n: This is the BigInt zero, introduced in ES2020. BigInt is a data type that can represent integers larger than the maximum safe integer that JavaScript can reliably represent with the Number type. Zero as a BigInt is also a falsey value.
• "" (Empty String): An empty string, represented by two single or double quotes with nothing in between, is a falsey value. It’s important to note that a string with any characters, even a single space, is not falsey.
• null: null is a special value that represents the intentional absence of any object value. It’s often used to indicate that a variable has no value or that a function did not return anything meaningful. null is a falsey value.
• undefined: undefined is a value automatically assigned to variables that have been declared but not initialized. It also represents the absence of a value, but in a different context than null. undefined is a falsey value.
• NaN: NaN stands for “Not a Number.” It’s a special numeric value that results from an operation that cannot produce a valid number, such as dividing zero by zero or attempting to parse a string that is not a valid number. NaN is a falsey value.

Here’s an example demonstrating how these values behave in conditional statements:

javascript if (false) { console.log(“This won’t execute.”); } if (0) { console.log(“This won’t execute.”); } if (-0) { console.log(“This won’t execute.”); } if (0n) { console.log(“This won’t execute.”); } if ("") { console.log(“This won’t execute.”); } if (null) { console.log(“This won’t execute.”); } if (undefined) { console.log(“This won’t execute.”); } if (NaN) { console.log(“This won’t execute.”); } Understanding these falsey values is essential for writing robust JavaScript code. Being aware of their behavior allows you to avoid common pitfalls and write more predictable conditional logic. For instance, checking if a variable is defined can be done using if (myVariable), which will evaluate to false if myVariable is undefined. Similarly, checking if a string is empty can be done using if (myString), which will evaluate to false if myString is “”. More resources on JavaScript concepts can be found here.

Practical Examples and Use Cases

Understanding falsey values isn’t just theoretical; it has practical applications in everyday JavaScript development. Let’s look at some real-world examples and use cases where knowledge of these values can help you write better code. These scenarios demonstrate how falsey values can impact conditional logic and how to handle them effectively.

1. Checking for Empty Strings: Imagine you’re building a form validation system. You want to ensure that required fields are not empty. You can use the falsey nature of empty strings to simplify your code:

javascript function validateForm(name, email) { if (!name) { console.log(“Name is required.”); return false; } if (!email) { console.log(“Email is required.”); return false; } return true; } validateForm("", “test@example.com”); // Output: Name is required. In this example, the if (!name) condition works because an empty string "" is a falsey value. If name is an empty string, the condition evaluates to true, and the error message is displayed. This is a concise and efficient way to check for empty strings in form validation.

2. Handling Null or Undefined Values: When working with APIs or external data sources, you often need to handle situations where a value might be null or undefined. Knowing that these are falsey values allows you to write code that gracefully handles these scenarios:

javascript function displayUsername(user) { const username = user && user.name; // Using short-circuit evaluation if (username) { console.log(“Welcome, " + username); } else { console.log(“User not found.”); } } displayUsername(null); // Output: User not found. displayUsername({ name: “John” }); // Output: Welcome, John In this example, the user && user.name expression uses short-circuit evaluation. If user is null or undefined (both falsey values), the expression immediately returns user (which is falsey), and the username variable is not assigned. The if (username) condition then evaluates to false, and the “User not found” message is displayed. If user has a value and contains a name property, the username variable is assigned the value of user.name, and the welcome message is displayed.

3. Checking for Zero Values: In some cases, you might need to differentiate between a zero value and the absence of a value. However, it’s important to remember that 0 is a falsey value. Here’s how you can handle this:

javascript function processScore(score) { if (score === null || score === undefined) { console.log(“Score not available.”); } else if (score === 0) { console.log(“Score is zero.”); } else { console.log(“Score: " + score); } } processScore(null); // Output: Score not available. processScore(0); // Output: Score is zero. processScore(50); // Output: Score: 50 In this example, we use strict equality (===) to explicitly check if the score is null or undefined before checking if it’s zero. This allows us to differentiate between the absence of a score and a score that is actually zero. If we simply used if (!score), the zero value would be treated as falsey, and the “Score not available” message would be displayed incorrectly.

Best Practices for Handling Falsey Values

To effectively manage falsey values in JavaScript, it’s crucial to adopt best practices that promote code clarity and prevent unexpected behavior. Here are some guidelines to follow:

1. Use Strict Equality (=== and !==): Strict equality operators check for both value and type without performing type coercion. This helps avoid unexpected results when comparing values that might be falsey. For example, 0 == false evaluates to true because of type coercion, but 0 === false evaluates to false because the types are different.
2. Be Explicit in Your Checks: Instead of relying on implicit type coercion, be explicit in your conditional checks. For example, instead of if (myString), use if (myString !== “”) to check if a string is empty. This makes your code more readable and less prone to errors.
3. Understand the Context: Consider the context in which you’re using a variable. Is it possible for the variable to be null or undefined? If so, handle these cases explicitly. Is it important to differentiate between zero and the absence of a value? If so, use strict equality to check for null and undefined before checking for zero.

Here are some additional tips to keep in mind:

• Avoid Common Pitfalls: Be aware of the common pitfalls associated with falsey values. For example, don’t assume that an empty array is falsey (it’s truthy). Don’t assume that a string containing only whitespace is falsey (it’s truthy).

• Use Linters and Code Analysis Tools: Linters and code analysis tools can help you identify potential issues related to falsey values. These tools can flag implicit type coercions and other potential errors, helping you write cleaner and more reliable code. ESLint, for example, can be configured to warn against implicit type conversions. [^{[ Question & Answer :
  What are the values in JavaScript that are ‘falsey’, meaning that they evaluate as false in expressions like if(value), value ? and !value?}

  ---

  There are some discussions of the purpose of falsey values on Stack Overflow already, but no exhaustive complete answer listing what all the falsey values are.

  I couldn’t find any complete list on MDN JavaScript Reference, and I was surprised to find that the top results when looking for a complete, authoritative list of falsey values in JavaScript were blog articles, some of which had obvious omissions (for example, NaN), and none of which had a format like Stack Overflow’s where comments or alternative answers could be added to point out quirks, surprises, omissions, mistakes or caveats. So, it seemed to make sense to make one.

  Falsey values in JavaScript

  • false
  • Zero of Number type: 0 and also -0, 0.0, and hex form 0x0 (thanks RBT)
  • Zero of BigInt type: 0n and 0x0n (new in 2020, thanks GetMeARemoteJob)
  • "", '' and ```` - strings of length 0
  • null
  • undefined
  • NaN
  • document.all (in HTML browsers only)
    • This is a weird one. document.all is a falsey object, with typeof as undefined. It was a Microsoft-proprietory function in IE before IE11, and was added to the HTML spec as a “willful violation of the JavaScript specification” so that sites written for IE wouldn’t break on trying to access, for example, document.all.something; it’s falsy because if (document.all) used to be a popular way to detect IE, before conditional comments. See Why is document.all falsy? for details

  “Falsey” simply means that JavaScript’s internal ToBoolean function returns false. ToBoolean underlies !value, value ? ... : ...; and if (value). Here’s its official specification (2020 working draft) (the only changes since the very first ECMAscript specification in 1997 are the addition of ES6’s Symbols, which are always truthy, and BigInt, mentioned above:

  | Argument type | Result | |---|---| | Undefined | Return `false`. | | Null | Return `false`. | | Boolean | Return *argument*. | | Number | If argument is `+0`, `-0`, or `NaN`, return `false`; otherwise return `true`. | | String | If argument is the empty `String` (its length is zero), return `false`; otherwise return `true`. | | BigInt | If argument is `0n`, return `false`; otherwise return `true`. | | Symbol | Return `true`. | | Object | Return `true`. |

  ---

  Comparisons with == (loose equality)

  It’s worth talking about falsy values’ loose comparisons with ==, which uses ToNumber() and can cause some confusion due to the underlying differences. They effectively form three groups:

  • false, 0, -0, "", '' all match each other with ==
    • e.g. false == "", '' == 0 and therefore 4/2 - 2 == 'some string'.slice(11);
  • null, undefined match with ==
    • e.g. null == undefined but undefined != false
    • It’s also worth mentioning that while typeof null returns 'object', null is not an object, this is a longstanding bug/quirk that was not fixed in order to maintain compatibility. It’s not a true object, and objects are truthy (except for that “wilful violation” document.all when Javascript is implemented in HTML)
  • NaN doesn’t match anything, with == or ===, not even itself
    • e.g. NaN != NaN, NaN !== NaN, NaN != false, NaN != null

  With “strict equality” (===), there are no such groupings. Only false === false.

  This is one of the reasons why many developers and many style guides (e.g. standardjs) prefer === and almost never use ==.

  ---

  Truthy values that actually == false

  “Truthy” simply means that JavaScript’s internal ToBoolean function returns true. A quirk of Javascript to be aware of (and another good reason to prefer === over ==): it is possible for a value to be truthy (ToBoolean returns true), but also == false.

  You might think if (value && value == false) alert('Huh?') is a logical impossibility that couldn’t happen, but it will, for:

  • "0" and '0' - they’re non-empty strings, which are truthy, but Javascript’s == matches numbers with equivalent strings (e.g. 42 == "42"). Since 0 == false, if "0" == 0, "0" == false.
  • new Number(0) and new Boolean(false) - they’re objects, which are truthy, but == sees their values, which == false.
  • 0 .toExponential(); - an object with a numerical value equivalent to 0
  • Any similar constructions that give you a false-equaling value wrapped in a type that is truthy
  • [], [[]] and [0] (thanks cloudfeet for the JavaScript Equality Table link)

  ---

  Some more truthy values

  These are just a few values that some people might expect to be falsey, but are actually truthy.

  • -1 and all non-zero negative numbers

  • ' ', " ", "false", 'null'… all non-empty strings, including strings that are just whitespace

  • Anything from typeof, which always returns a non-empty string, for example:

    • typeof null (returns a string 'object' due to a longstanding bug/quirk)
    • typeof undefined (returns a string 'undefined')

  • Any object (except that “wilful violation” document.all in browsers). Remember that null isn’t really an object, despite typeof suggesting otherwise. Examples:

    • {}
    • []
    • function(){} or () => {} (any function, including empty functions)
    • Error and any instance of Error
    • Any regular expression
    • Anything created with new (including new Number(0) and new Boolean(false))

  • Any Symbol

  true, 1, "1" and [1] return true when compared to each other with ==.

  ](https://eslint.org/docs/latest/rules/no-implicit-coercion)