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

I am by no means an expert at Javascript, but I have been reading Mark Pilgrim's "Dive into HTML5" webpage and he mentioned something that I would like a better understanding of.

He states:

Finally, you use the double-negative trick to force the result to a Boolean value (true or false).

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

If anyone can explain this a little better I would appreciate it!

Solution 1:

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

Solution 2:

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.