What is the double bang !! operator in Javascript ?

May 24, 2020

#Javascript

Let’s start by saying that is not an operator, it is just the NOT (!) operator called twice.
The first result will be the conversion to Boolean, than the second one will be the evaluation of the variable.

Example please! 😆

Let’s suppose to have a User object coming from a Backend API.

If the user has been already registered it will have a registered property, containing a registration code. Something like this:

User {
    username: "Bill",
    registered: 9278
}

If the user has NOT been already registered it will have only the username field:

User {
    username: "Frank"
}

On the frontend part we are manipulating this users and we have a function to determine if the user has been already registered:

function isRegistered(user){

    return !! user.registered;
}

// users is the variable containing the users fetched from backend : Bill and Frank

users.forEach( user => console.log(isRegistered(user)) );  // true, false  (Bill, Frank)

What is happening here ?

If we separate the operation in two steps it will be easier to understand!

When the property registered exists (Bill) :

// the first NOT will check if the property "registered" is undefined
var firstResult  = !user.registered; // false  -- the property is defined for Bill
var secondResult = !(firstResult); // true

When the property registered does not exist (Frank) :

// the first NOT will check if the property "registered" is undefined
var firstResult  = !user.registered; // true  -- the property is undefined for Frank
var secondResult = !(firstResult); // false

Does is it work with boolean property ?

Yeah, sure ! You will simply convert the boolean into its opposite and then perform an “undo” operation.

Supposing the registered property is a boolean:

var user = {
    username: "Bill",
    registered: true
}

var firstResult  = !user.registered; // false
var secondResult = !(firstResult); // true

Summary

Double Bang Operator:

  • The first NOT will convert to Boolean
  • The second NOT will give you the boolean result

Next time you will find it, if you can’t understand what is happening: split the problem into two steps!

For further details check the official documentation for Javascript Logical Operator.

Pingu 🐧


Written by Pingu who lives and works in Genoa building useful modern applications.

Something to share ?