JS Double Bang — or “The Not Operator Part !!”

exclamation mark, exclamation point, bang, shriek, or pling

Although not the most common use of a logical operator in JavaScript, the “double bang” or double exclamation mark “!!” recently caught my attention. Let’s dive into its mechanics, complications, and potential uses.

Single “!”

In the printing world, the exclamation mark can be called a screamer, a gasper, a slammer, or a startler. — from Lynn Truss Eats, Shoot & Leaves: The Zero Tolerance Approach to Punctuation.

To start, we can quickly cover the three logical operators used in JS:

&& AND || OR ! NOT

For our purposes, I’m going to explore the single exclamation mark ! NOT operator. The ! is the only logical operator in JS which has the important distinction of always evaluating to a boolean. Since the && AND and || OR operators can return non-boolean values, the ! NOT operator is the only logical operator that will always returns a value of true or false.

You will create devilishly clever combinations of these operators in your code. I recommend getting to know and appreciate the logical short-circuit.

Implementation of True vs. False

How can we use ! to our logical advantage in JS?

All values are considered truthy in JS unless they are a defined falsy value. The falsy values in JS are:

false, 0, empty string(""), null, undefined, and NaN

So every other value will be a truthy value if it doesn’t fall into the above list. In a boolean context, a truthy value will translate to true and a falsy value will translate to false.

Here is a single ! expression in action.

!true === false // NOT true equals false
!false === true // NOT false equals true

Simple enough. Let’s abstract this beyond operating on boolean values.

!(X) === ? = // the result depends if X is a falsy value or not

What is happening above is X gets converted to a boolean value first, then the ! operator will negate/invert that boolean value. So as long as X is not one of the falsy values listed a few paragraphs earlier, X will convert to true, then the ! operator will negate it and evaluate the expression to false.

Double “!!”

Various sources theorize the origin of the exclamation mark is from the Latin of ‘joy’ written with an ‘i’ over the ‘o’, but this is unconfirmed.

This post is about !! NOT NOT, so let’s get on to it. First things first, there is no !! operator in JS... there is only the single !.

!!true === true // a NOT NOT true equals true
!!false === false // a NOT NOT false equals false
// again... the double bangs !! is not a native JS logical operator
// we're just chaining two NOT operators together...why stop at two?
!!!true === false // a NOT NOT NOT true equals false
!!!!true === true // a NOT NOT NOT NOT true equals true

Now, the above expressions should make total sense. true equals true, so the ! of !true (i.e.,false )will also equal true and so on. I can’t think of a use for three or four NOT operators, but logical creativity is for squares.

Should You Use It In the Wild ?

Depending on your experience, the whole idea of using !! may seem unnecessary. Yet, it does show up in code occasionally and is even listed as a “best” practice for Booleans in the Type Casting & Coercion section of the excellent Airbnb JavaScript Style Guide.

One of the benefits of using the !! is to convey that your design decision was to only return a true or false value. When you or someone else looks at that code and a !! is encountered, the only possible return values are true or false. It is a matter of contention if readability is improved with the use of this logical tool.

The most common criticism of using !! is its seemingly added complexity that can be simplified with slightly more code that may have more flexibility. Another criticism relates to zero being a falsy value, so a lot of use cases related to numbers come with extra concerns.

Examples

To be honest, I had some difficulty thinking up some good examples for !!. The most interesting instance that I saw it in code was as a base case for a recursive function that needed to return a boolean. But, after searching through some JS in node_modules I found an impressive amount of !! used.

In research for this post, I also came across a SitePoint article which has good examples and even speed tests which show specific performance comparisons. Here are a few of my examples at a much simpler, more demonstrative level.

const array = [1,2];
!!array[0]; // true
!!array[1]; // true
!!array[2]; // false
const obj = {
  value: 5,
  node: null
};
!!obj.value; // true
!!obj.node;  // false

Imagine a case where a function’s purpose is to return true or false from working with various primitive data types. The variables in the function could be assigned to numbers, strings, undefined, or even null — this function probably needs a design overhaul, but we’re in example land.

const executeTradeOrNot = function() {
  ...
  return !!MultiplePrimitiveTypeOptions; 
  // return true or false
  ...
}

So, whatever complicated or simple function is used, only a boolean value of true or false is returned when using the !!. What if there was a lot going on in the return of a function like below?

const discoDance = function() {
  ...
  return !!(this.dance().routine && this.dance().moves.length > 0);
  // return true or false with different evaluations occurring
  ...
}

How about using the !! to short-circuit an if statement?

const releaseTheGlitter = function() {
  ...
  if (!!this.thing && this.otherThing < this.thing.length) {
  // return true or false and could short-circuit if statement
  ...
}

Burn After Reading came to mind, but that may be jumping to conclusions

Greater Appreciation for the Double Bang

Personally, I have only used the double bang a couple of times, but I recognize its benefit of converting values into booleans when necessary — especially when a lot of evaluations are going on and I only want to return a boolean or short-circuit without extra work. It’s a logical tool to know about and use judiciously with an awareness that it may cause instant clarity to some or confusion to others depending on who is looking at your code.

In closing, if you want some random funny names for these ‘lines above dots’, check out this Atlantic article. I will finish this with a single admiration mark (yeah that’s a name for them too)!