Can someone explain this 'double negative' trick? [duplicate]

Question

A logical NOT operator ! converts a value to a boolean that is the opposite of its logical value.

The second ! converts the previous boolean result back to the boolean representation of its original logical value.

From these docs for the Logical NOT operator:

Returns false if its single operand can be converted to true; otherwise, returns true.

So if getContext gives you a "falsey" value, the !! will make it return the boolean value false. Otherwise it will return true.

The "falsey" values are:

• false
• NaN
• undefined
• null
• "" (empty string)
• 0

Javascript has a confusing set of rules for what is considered "true" and "false" when placed in a context where a Boolean is expected. But the logical-NOT operator, !, always produces a proper Boolean value (one of the constants true and false). By chaining two of them, the idiom !!expression produces a proper Boolean with the same truthiness as the original expression.

Why would you bother? Because it makes functions like the one you show more predictable. If it didn't have the double negative in there, it might return undefined, a Function object, or something not entirely unlike a Function object. If the caller of this function does something weird with the return value, the overall code might misbehave ("weird" here means "anything but an operation that enforces Boolean context"). The double-negative idiom prevents this.

In javascript, using the "bang" operator (!) will return true if the given value is true, 1, not null, etc. It will return false if the value is undefined, null, 0, or an empty string.

So the bang operator will always return a boolean value, but it will represent the opposite value of what you began with. If you take the result of that operation and "bang" it again, you can reverse it again, but still end up with a boolean (and not undefined, null, etc).

Using the bang twice will take a value that could have been undefined, null, etc, and make it just plain false. It will take a value that could have been 1, "true", etc. and make it just plain true.

The code could have been written:

var context = document.createElement('canvas').getContext;
var contextDoesNotExist = !context;
var contextExists = !contextDoesNotExist;
return contextExists;

Using !!variable gives you a guarantee of typecast to boolean.

To give you a simple example:

"" == false (is true)
"" === false (is false)

!!"" == false (is true)
!!"" === false (is true)

But it doesn't make sense to use if you are doing something like:

var a = ""; // or a = null; or a = undefined ...
if(!!a){
...

The if will cast it to boolean so there is no need to make the implicit double negative cast.

! casts "something"/"anything" to a boolean.

!! gives the original boolean value back (and guarantees the expression is a boolean now, regardless to what is was before)

The first ! coerces the variable to a boolean type and inverts it. The second ! inverts it again (giving you the original (correct) boolean value for whatever you are checking).

For clarity you would be better off using

return Boolean(....);

document.createElement('canvas').getContext may evaluate to either undefined or an object reference. !undefined yields true, ![some_object] yields false. This is almost what we need, just inverted. So !! serves to convert undefined to false and an object reference to true.