Why use !! to coerce a variable to boolean for use in a conditional expression?

Question

!!x coerces the type of variable x to a boolean, whilst maintaining its truthiness or lack thereof - see this question - I have a question about the use of this in conditional expressions.

A few times in JS code I've seen !! used to coerce a variable to boolean type in an if condition like so

if(!!x) {
    x.doStuff();
}

Where the idea is to test if x is defined before calling methods on it.

But, in my own code I've always just used

if(x) {
    x.doStuff();
}

On the premise that if x is defined, the condition will pass, and if x is undefined, it will not pass.

So my question is what is the point of coercing x to a boolean using !! in this scenario? What does this code do that this code doesn't?

Answer 1

In that specific context, I would say that there is no difference between explicitely converting to boolean using !! or let the if expression being converted to a boolean naturally. What I mean by this is that if (x) will be interpreted as if (Boolean(x)) , which is the same as if (!!x) .

However, if you are returning a value from a function, for instance if you want to implement a arrayHasItems function, you could implement it this way:

function arrayHasItems(arr) {
    return arr.length;
}

Using the function in a if statement as is would work because the numerical value returned from the function would be converted to a boolean value. However, the client code expects the function to return a boolean value, so he might be checking the condition by doing:

if (arrayHasItems(arr) === true) {}

In this case it would fail, because the returned result from arrayHasItems was a number. Therefore, it would have been better to implement the function by returning a boolean like expected.

function arrayHasItems(arr) {
    return !!arr.length;
}

EDIT:

This brings up a new question: why !!arr.length and not just arr.length > 0

There isin't any difference between both in the result produced and you are not even saving bytes since both statements take the same amount of characters. However I created a test case and the double negation seems to perform better, but it might not be consistent across all browsers.

Answer 2

As stated it converts a value to a boolean value and is therefore not much different from if(x) . However, both are tricky as it will also convert 0 to false and other such things.

Answer 3

It has to do with JavaScript type coersion.

Often you want to check if an object is not null, not undefined, not 0, etc. The common way to check for that is

if (obj) {
  ...
}

However, if you want the condition to be equal to true or false the ! can be used on non-boolean object instances. Here is an example that uses an equality operator === that does not do type coersion.

var obj = {};

console.log(obj === true); // returns false
console.log(!obj === false); // returns true
console.log(!!obj === true); // returns true