Understanding Falsiness and Optimizing Conditionals in JS

As developers, we are all too familiar with the challenges that arise when dealing with conditional statements. We spend hours meticulously crafting if-else blocks, only to discover missed conditions during code reviews. This can be frustrating and time-consuming.

To improve our coding standards, we incorporated falsy values and expressions. It allowed us to handle all scenarios comprehensively, ensuring that no scenario slips through the cracks.

In this blog, I will guide you through the practical usage of falsy values and expressions, showing you how they streamline conditional code and elevate the quality of your JavaScript programming. Let’s jump right in.

What are falsy values and expressions?

In JavaScript, falsy expression allows us to evaluate the truthiness or falseness of a value.

Certain values are considered either “falsy” or “truthy” when used in conditionals.

A falsy value is a value that is considered FALSE when evaluating conditionals. Falsy values include null, undefined, NaN, 0 (zero), and the empty string “”.

On the other hand, truthy values encompass everything else that is not falsy. Non-empty strings, non-zero numbers, and non-empty arrays and objects are all considered truthy.

Once you know the difference, you can streamline your conditionals and improve your code efficiency.

Let’s see three scenarios where we can leverage falsy values.

1. Simplifying Conditional Checks

Let’s say you need to check the status of a response payload. The status can be undefined, null, an empty string, or even a specific string like “success”.

Traditionally, we would write multiple if-else checks to handle each condition like below,

const payload = { status: undefined, name: "Ram" };

if (payload.status !== undefined) {
  console.log(payload.name);
}
if (payload.status !== null) {
  console.log(payload.name);
}
if (payload.status !== "") {
  console.log(payload.name);
}
if (payload.status == "some status") {
  console.log(payload.name);
}

Even though the above code serves the purpose, it is bulky and cumbersome.

With falsy expressions, your code will look like this,

if (payload.status) { // This single line can replace all the conditions above
  console.log(payload.name);
}

Now, isn’t that way more elegant than writing 13 lines of code?

In situations where the value of status is uncertain, an empty string “”, null, to a specific string like “success”, we can enhance code simplicity by implementing the above statement.

2. Streamlining Array Checks

Let’s say you want to check the length of an array. We write the following code.

const fruits = [];
if (fruits.length > 0) {
  console.log(fruits[0]);
}

While the above code gets the job done, using falsy values you can handle it way more efficiently.

if (fruits.length) {
  console.log(fruits[0]);
}

Instead of using fruits.length > 0, we can use the .length property directly in the conditional statement. Since zero is a falsy value, the code block won’t be executed when the array is empty.

3. Efficient Component Rendering

Let’s say you want to render a component based on the array length. We often display a message when the array is empty and we write the following,

{
  fruits.length > 0 ? fruits.map((fruit) => <p>{fruit}</p>) : "No Fruits found";
}

Using falsy values, your code gets simplified as,

{
  fruits.length ? fruits.map((fruit) => <p>{fruit}</p>) : "No Fruits found";
}

Exception case:

If ‘fruits’ has an initial value of undefined, null, or “”, we can handle it as follows:

{
  fruits && fruits.length
    ? fruits.map((fruit) => <p>{fruit}</p>)
    : "No Fruits found";
}

Explore further:

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

https://www.sitepoint.com/javascript-truthy-falsy/

Armed with these new insights, let your JavaScript projects thrive with unmatched efficiency and readability.