JavaScript Double Negation (!!) Trick or Trouble?

Key Takeaways

• Double negation in JavaScript (!!expr) is a trick used to convert any value to a Boolean, effectively providing the original Boolean value of the object. This can be useful to ensure a value is either true or false.
• The use of double negation in JavaScript is a matter of debate among developers. While some consider it a clever trick for more concise code, others argue it can make code harder to read and understand, especially for those unfamiliar with this trick. It’s crucial to prioritize code readability and maintainability over clever tricks.
• If you want to convert a value to a Boolean in JavaScript, an alternative to double negation is using the Boolean() function. This function works the same way as double negation, but it is more explicit and easier to understand for those unfamiliar with the double negation trick.

So I was being asked to include some double negation comparison operators in my JavaScript Shorthands Techniques post and decided to have a closer look at whether or not we could be using it more often in our code. See speed tests below.

!! is not an operator. It’s just the ! operator twice

Examples:

success = !!what()&&that()
return !!value
var x = "somevalue"var isNotEmpty = !!x.length;
Let's break it to pieces:
x.length   // 9
!x.length  // false
!!x.length // true

The following values are equivalent to false in conditional statements:

	* false
	* null
	* undefined
	* The empty string "" ( '')
	* The number 0
	* The number NaN

All other values are equivalent to true.

     !!false === false
           !!true === true
              !!0 === false!!parseInt("foo") === false // NaN is falsy
              !!1 === true
             !!-1 === true  // -1 is truthy
             !!"" === false // empty string is falsy
          !!"foo" === true  // non-empty string is truthy
        !!"false" === true  // ...even if it contains a falsy value
     !!window.foo === false // undefined is falsy
           !!null === false // null is falsy
             !!{} === true  // an (empty) object is truthy
             !![] === true  // an (empty) array is truthy; PHP programmers beware!

You can also use the constructor functions corresponding to the primitive types (without using new) to explicitly cast values, ie

Boolean(foo) === !!foo
Number(foo)  === +foo
String(foo)  === ''+foo

And more examples!

return !!window; //Returns true
return !!null; //Returns false
return !!undefined; //Returns false
return !!false; //Returns false
return !!true; //Returns true
return !!""; //Returns false
return !!"Hi"; //Returns true
return !!0; //Returns false
return !!1; //Returns true

The first negation converts the data (whatever it data type it may be) to a boolean. The second negation changes the boolean again to give the desired result. Negative caseIf the value is null/undefined/false/””/0, then the first negation converts it to true. The second negation changes it to false.

Positive Case

If the value is object/true/”Value”/1, then the first negation converts it to false. The second negation changes it to true.

Is double negation !!(expr) the same as Typecasting Boolean(expr)

Yes.

Boolean(5) === !!5; Same casting, fewer characters.

But saying that look at this one! Brain hurty?

!!new Boolean(false) // true
!!Boolean(false) // false

Voila, explanations:

new Boolean(false) is an object and an object is truthy even if it contains a falsy value!
Boolean(false)returns the primitive false.

Speed tests!

Reasons for using Double Negation

Some people call it the “Javascript double negative trick”. Essentially it converts a value (null, undefined, objects etc…) to a primitive Boolean value. Similar to typecasting explicitly using Boolean(value) except this converts the value to a Bololean Object and is not a true boolean. The double negation trick could be used to ensure that a return value is always boolean type in methods that returns a boolean value based on some condition.

Reasons against using Double Negation

Harder to read and understand. It’s a horribly obscure way to do a type conversion. ! is NOT. So !true is false, and !false is true. !0 is true, and !1 is false.

// Maximum Obscurity:
val.enabled = !!userId;
// Partial Obscurity:
val.enabled = (userId != 0) ? true : false;
// And finally, much easier to understand:
val.enabled = (userId != 0);

Double Negation in the real world

Google Closure compiler
Worth noting that some minifiers (such as Google’s Closure Compiler) turn true into !0 and falseinto !1 to save characters (note that the order looks awkward but is correct, !0 === true && !1 === false).

Detecting HTML5 Feature Support
We want to write a function that returns true if a user’s browser supports the HTML5

// this won't tell us anything about HTML5 `` as a featurevar foo = function(tag, atr) { return document.createElement(tag)[atr]; }
// this won't return true if the feature is detected (although it works just fine)var bar = function(tag, atr) { return !document.createElement(tag)[atr]; }
// this is the concise, feature-detecting solution we wantvar baz = function(tag, atr) { return !!document.createElement(tag)[atr]; }
foo('audio', 'preload'); // returns "auto"
bar('audio', 'preload'); // returns false
baz('audio', 'preload'); // returns true

Further reading:
Javascript double negative trick
Double bitwise NOT (~~)
http://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript

Frequently Asked Questions (FAQs) about JavaScript Double Negation