Write javascript conditionals like a pro with Truthy and Falsy values.
Tags: javascript, codelikeapro, techingrace
Published: 2021-09-29 22:14:37

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.
```javascript
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.
```javascript
if(getName()){
  // do something
}
```
You can pass in reference to variables, and the referred value will be coerced.
```javascript
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
```javascript
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:
```javascript
if(3 > 2 == true)
```
To:
```javascript
if(true == true)
```
To:
```javascript
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 💻.