X things every JavaScript developer should know: Truthy and falsy

One thing that developers often confuses with JavaScript is Boolean logic. It seems to simple, you use for example an if statement and put a boolean expression in there and if it is true the block of code is executed other wise the else block is executed. Something like this:

   1: (function () {


   2:     var data = [];


   3:  


   4:     if (data.length > 0) {


   5:         console.log("The data array is not empty");


   6:     } else {


   7:         console.log("The data array is empty");


   8:     }


   9: }());

 

And if you run it it will do exactly what you would expect, so what is the big deal here?

 

There is more to Boolean logic in JavaScript

Well it turns out that most JavaScript developers don’t write the code like this. In fact the code would probably look more like this:

   1: (function () {


   2:     var data = [];


   3:  


   4:     if (data.length) {


   5:         console.log("The data array is not empty");


   6:     } else {


   7:         console.log("The data array is empty");


   8:     }


   9: }());

Instead of comparing the array length to a number the array length is used as the actual boolean operator. But that is a number so what gives?

 

Instead JavaScript uses Truthy and Falsy

Instead of just using booleans JavaScript actually uses truthy and falsy instead. The rules are actually quite simple, a few values are considered to be falsy and all others are truthy. The falsy ones are:

  • false (obviously)
  • The number 0.
  • The empty string “”.
  • null
  • undefined
  • NaN (Not a Number)

Everything else is considered to be truthy!

 

This is why the test if (data.length) actually works the same as the first example. If the data array is empty the length is 0 and therefore falsy. Otherwise the length is larger than 0 and it is truthy.

 

Common JavaScript logic

In JavaScript this falsy behavior is commonly for all sort of logic, for example:

   1: function doSomething(options) {


   2:     options = options || {};


   3:     // Do something usefull with the options object


   4: }


   5:  


   6: doSomething();


   7: doSomething({});

 

In the function doSomething we basically check if the options if truthy. If it is passed the way it is supposed to, like in the second call, it will be thruthy and the value will be used as is. On the other hand if it is not passed the value will be undefined, which is falsy, and the logic will default it to the empty object. This is what happens in the first call.

 

The double bang operator

One trick that sometimes baffles people when they first see it is the double bang operator !!. Just like with many other languages the ! operator inverts a boolean expression. In the case of JavaScript it’s effect is to turn a truthy/falsy expression into the equivalent opposite and then back into the equivalent boolean of the original expression. Often used if you need to pass a boolean value and want to make sure some other code can’t misbehave with the variable passed.

   1: (function () {


   2:     var data = [];


   3:     var noData = null;


   4:  


   5:     console.log(!!data); // true


   6:     console.log(!!data.length); // false


   7:     console.log(!!noData); // false


   8: }());



 



It might look weird the first time you see it but once you understand the way JavaScript works it makes perfect sense :-)



 



Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>