DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sanchithasr
Sanchithasr

Posted on

What is the Double bang (!!) operator in JavaScript?

Every value has truth or false values in JavaScript. For example, a null value has an associated boolean value of false. Similarly 34 has an associated value of true. We can use this to cast a variable to true or false using the double bang operator.

Let’s dive deep into what it is and how it works.

The ! in JavaScript, also called β€œbang”, is the logical β€œnot” operator. If you place this operator in front of a boolean value, it will reverse the value, returning the opposite.

!true // returns false
!false // returns true

isTrue = true // variable which is boolean
!isTrue // returns false
Enter fullscreen mode Exit fullscreen mode

If the single bang returns the opposite boolean value, imagine what double-bang would return?

The associated boolean value. In other words, true or false according to whether it is truthy or falsy values.

Values that are associated with boolean true are said to be truthy. Values that are associated with boolean false values are said to be falsy.

!!true // returns true
!!false // returns false

isTrue = true // variable which is boolean
!!isTrue // returns true
Enter fullscreen mode Exit fullscreen mode

We can take advantage of this using double-bang on non-boolean values as well which is pretty cool.

isNumber = 34 // variable which is not boolean
!!isNumber // returns true
Enter fullscreen mode Exit fullscreen mode

Truthy values:

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context.

The following values are few examples that are considered by JavaScript to be truthys:

  • Object: {}
  • Array: []
  • Not empty string: "anything"
  • Number other than zero: 3.14
  • Date: new Date();

In the below example, variable something has the non-empty string value which has truthy value in JavaScript so the console will print the first message.

var something = β€˜string’;
 if (!!something) {
   console.log('This is truthy')
 } else {
   console.log('This is falsey') 
 }
Enter fullscreen mode Exit fullscreen mode

You can find more about it in the link here.

Falsy values:

A falsy value is a value that is considered false when encountered in a Boolean context.

The following values are few of the examples that are considered by JavaScript to be falsey:

  • Empty string: ""
  • 0
  • null
  • undefined
  • NaN and the list of falsy values below.

In the below example, variable nothing has the 0 which has falsy value in JavaScript so the console will print the second message.

var nothing = 0;
 if (!!nothing) {
   console.log('This is truthy')
 } else {
   console.log('This is falsey') 
 }
Enter fullscreen mode Exit fullscreen mode

You can find more about falsy values in the link here.

Let us see how we can use it for type casting.

function BankAccount(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}

var myAccount = new BankAccount(80);
console.log(myAccount.cash); // expected result: 80
console.log(myAccount.hasMoney); // expected result: true

var emptyAccount = new BankAccount(0);
console.log(emptyAccount.cash); // expected result: 0
console.log(emptyAccount.hasMoney); // expected result: false
Enter fullscreen mode Exit fullscreen mode

And that sums it up!
Thank You!

Top comments (12)

Collapse
 
rvxlab profile image
RVxLab

This is very well explained. You can also call this the double NOT operator if you'd like.

While Boolean(someValue) the same things as !!someValue, using the double not operator is shorter to write and a tiny bit faster. The speed increase is nothing meaningful, but interesting nonetheless.

Benchmark I ran in case you want to see for yourself:

(function(){
    console.time('!!');

    for (let i = 0; i < 1000000; i++) {
        const number = 1;
        const bool = !!number;
    }

    console.timeEnd('!!');

    console.time('Boolean()');

    for (let i = 0; i < 1000000; i++) {
        const number = 1;
        const bool = Boolean(number);
    }

    console.timeEnd('Boolean()');
})();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sanchithasr profile image
Sanchithasr Author • Edited on

This is interesting. Never thought about Boolean() . Thank you.

Collapse
 
wparad profile image
Warren Parad

I feel like they article made this whole concept really complicated. It's actually simple, What is !!?. It's the same as Coerce to boolean. It would do the same as a method Convert.toBoolean(value) where value is truthy or falsy and the result is true or false.

You need this because some parameters are expected to be true or false and not truthy and falsy. Boolean(value) doesn't actually coerce a value to a boolean, it's unfortunately less useful than that. And so using !! (the double NOT) is a great way to coerce a value to a boolean.

Collapse
 
jonrandy profile image
Jon Randy

It isn't a double bang operator, it is using the ! operator twice. Also, since - as you rightly state - values already have truthy and falsey-ness, it is largely pointless to use this unless you really, really need a pure boolean (perhaps for building some JSON to send somewhere on another system that requires the correct type)

Collapse
 
__mrvik__ profile image
MrViK

That rocks, I remember it as "Bang Bang, you're a boolean now".

Collapse
 
sanchithasr profile image
Sanchithasr Author

Bang Bang, you're a Boolean now

I totally had forgotten about this. :)

Collapse
 
sturpin profile image
Sergio TurpΓ­n

Cool!! I didn't know πŸ‘

Collapse
 
sanchithasr profile image
Sanchithasr Author

πŸ‘

Collapse
 
amrishpandey profile image
amrishpandey • Edited on

what i learned that if a value is true or false.
by default it does not return anything if it is not explicitly set with true or false boolean . that means by default it returns the value only.

if single bang (!) is added before the value, it returns false.
if double bang (!!) is added before the value, it returns true.

am i correct ?

Collapse
 
siamcr7 profile image
Jamil Siam

Good stuff!

Collapse
 
ashlex21 profile image
ashlex21

Hey Sanchithasr! I'm stuck in a problem in React JS can you please help asap

Collapse
 
sanchithasr profile image
Sanchithasr Author

Hey. I have not worked on React much. Please post the problem. Someone might be able to help out. :)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!