Write javascript conditionals like a pro with Truthy and Falsy values.

Hi dev 😉, in this post I'll show you how to cut the length of your conditional statements by leveraging the power of javascript truthy and falsy values. Let's get this broken.

Before discussing truthy and falsy values, let's dig in a bit on how javascript handles conditional statements.

In javascript, the condition passed to any conditional statement is first coerced (transformed) to it's Boolean context.

It's based on the result of this coercion/transformation that javascript knows if it should execute the statement's body or skip it.

Take for example.

if(1+1 == 2){
  console.log('passed');
}else{
  console.log('failed');

when javascript encounters that conditional statement above, it first evaluates 1+1 == 2 and the result of that evaluation can only be true or false because 1+1 (which will result to 2) can only be equal to 2 (true), or not (false).

The result of that evaluation is what determines whether javascript would execute console.log('passed')
or console.log('failed').

And in our case it will end up logging "passed" to the console because the result of that evaluation will be true (1+1 is 2).

That is how javascript and pretty much other languages work. Just know that anything passed into the condition block of a statement will be coerced to true or false by evaluating it. And here comes the interesting part, i said anything and I mean anything. Any valid expression.

You can pass in function calls, and the return value of that function will be coerced.

if(getName()){
  // do something
}

You can pass in reference to variables, and the referred value will be coerced.

if(localStorage.todos){
  // do something
}

Now you may be wondering how data types like strings, arrays, objects, will be coerced. Now let's see how javascript decides what is true or false.

Truthy and Falsy Values

A truthy value is a value that is considered true when encountered in a Boolean context.

A falsy value is a value that is considered false when encountered in a Boolean context.

1. Falsy values

false, 0, -0, 0n, "", null, undefined,
and NaN).

2. Truthy values

Every other thing not listed above is considered truthy. e.g [], {a:1}, 1, etc.

The beauty of this is that javascript would evaluate your expression before determining if it's Truthy or Falsy. So you can do something like

if([]){...}
if(null){...}
if({a:1}){...}

So that gives you a powerful shorthand to checking conditions.
if(3 > 2 == true) can be shortened to if(3>2).

Here's a quick flow of how the execution will be performed for if(3 > 2 == true)

From:

if(3 > 2 == true)

To:

if(true == true)

To:

if(true)

Summary

having this knowledge gives you the power to write conditionals like a pro, it reduces your lines of codes and makes execution faster.

I hope you learnt something, I would love to know your thoughts on this. Happy coding 💻.