Sentry Answers>JavaScript>

Truthy and falsy values in JavaScript

Truthy and falsy values in JavaScript

David Y.

The problemJump To Solution

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:

Click to Copy
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.

Click to Copy
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:

Click to Copy
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).

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Loved by over 4 million developers and more than 100,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.

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