Truthy and falsy values in JavaScript

David Y.

The problem

Let’s say we have an online store that has recently introduced a loyalty points system. We store users as JSON objects, and only newly created users have the loyaltyPoints field. Consider the following code:

const user1 = { name: "Jane Doe", email: "jane.doe@example.com" }; // old user const user2 = { name: "John Smith", email: "john.smith@example.com", loyaltyPoints: 0 }; // new user function displayLoyaltyPoints(user) { if (user.loyaltyPoints) { console.log(`User has ${user.loyaltyPoints} loyalty points`); } else { console.log("Field 'loyaltyPoints' not defined for user."); } } displayLoyaltyPoints(user1); displayLoyaltyPoints(user2);

Based on a cursory reading of this code, we might expect the function displayLoyaltyPoints to follow the else path for our first user and the if path for our second user. However, if we run this code, we’ll see that it follows the else path in both cases, even though loyaltyPoints is defined for the second user.

Why does this happen and how can we fix our code?

The solution

When non-boolean values are used in a boolean context, such as the condition of an if statement, they will be coerced into either true or false. Values that are coerced into true are called truthy and values that are coerced into false are called falsy.

JavaScript contains the following falsy values:

  • false
  • 0, -0 and 0n
  • "", '' (empty strings)
  • null, undefined and NaN
  • document.all

All other values are truthy.

Because 0 is a falsy value, the if condition in our displayLoyaltyPoints() function will evaluate to false when provided with a user whose loyaltyPoints property is set to 0. The if condition will also evaluate to false if the loyaltyPoints field does not exist (making it undefined).

We can fix our code by explicitly checking that user.loyaltyPoints does not equal undefined instead of evaluating the value’s truthiness.

function displayLoyaltyPoints(user) { if (user.loyaltyPoints !== undefined) { console.log(`User has ${user.loyaltyPoints} loyalty points`); } else { console.log("Field 'loyaltyPoints' not defined for user."); } }

Some values can be truthy without also being loosely equal to true or falsy without being loosely equal to false. For example, both if statements in the code below will evaluate to true:

if ([]) { console.log("[] is truthy"); } if ([] == false) { console.log("[] is loosely equal to false"); }

To avoid the pitfalls associated with boolean coercion, constructions such as if (variableName) should only be used when variableName is known to be a boolean value. For variables of other types, an explicit comparison is preferred. For example, if (variableName > 0) or if (variableName != undefined).

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.112.1/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.