JavaScript – Why Use !! to Coerce a Variable to Boolean

javascript

!!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?

Best Answer

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.

Related Question