DEV Community

Cover image for JavaScript double exclamation mark explained (with examples)
Reza Lavarian
Reza Lavarian

Posted on • Originally published at decodingweb.dev

JavaScript double exclamation mark explained (with examples)

Update: This post was originally published on my blog decodingweb.dev, where you can read the latest version for a 💯 user experience. ~reza

What are those double not operators in JavaScript?

You might have noticed a double exclamation mark (!!) in JavaScript code and you may be curious what that means.

First, “double exclamation mark” (a.k.a the “double bang”) isn’t an operator itself. It’s two logical not (!) operators used twice.

Long story short, some developers use double Not operators to explicitly convert the operand’s data type to boolean (true or false). The operand will be converted to false if its current value is falsy and true in case it’s truthy.

In JavaScript, a falsy value can be either of the following:

  • false,
  • 0,
  • -0
  • "" (empty string)
  • null
  • undefined
  • NaN

These none-boolean values are considered false when used in a boolean context. For instance, when you use a falsy value as an if condition, it’ll bypass the if block:

let logged_in = null

// This block isn't executed
if (logged_in) {
    // Do something here
}

logged_in = ''
// This block isn't executed
if (logged_in) {
    // Do something error
}
Enter fullscreen mode Exit fullscreen mode

By using !!, you can convert a non-boolean value to a boolean based on its current value.

Here are some examples:

// Falsy values will all be false
console.log(!!null) // false
console.log(!!0) // false
console.log(!!undefined) // false
Needless to say, anything that's not falsy is truthy!


// Truthy values
console.log(!!'dwd') // true
console.log(!!5) // true
Enter fullscreen mode Exit fullscreen mode

JavaScript "double exclamation mark" can be used in any expression:

let logged_in = 1

if (!!logged_in === true) {
  // Do something here
}
Enter fullscreen mode Exit fullscreen mode

In the above code, we're checking the boolean equivalent of logged_in and don't care about the actual value. The value 1 is truthy, so !!logged_in will return true.

You can achieve the same results by using the Boolean constructor (without using the new keyword).

let logged_in = 1

if (Boolean(logged_in) === true) {
   // Do something here ...
}
Enter fullscreen mode Exit fullscreen mode

But do we need this confusing technique in the first place?

When do you need to use the JavaScript "double exclamation mark" syntax?

If you ask me, you'd be fine without double Not operators!

Let's get a bit deeper.

JavaScript (unlike TypeScript) doesn't have static typing. But as a weakly-typed language, it does type coercion automatically whenever needed.

What is "type coercion"? You may ask.

All primitive values in JavaScript are one of these types:

  • Undefined
  • Null
  • Number
  • String
  • Boolean
  • BigInt
  • Symbol
  • NAN (Not a number)

Type coercion is the automatic or implicit conversion of a value from one data type to another (for instance, from a string to a number) - done at JavaScript's discretion.

Here's an example:

let a = '12'

console.log(a * 5)
// output: 60
Enter fullscreen mode Exit fullscreen mode

In the above example, the variable a contains a string value ('12'). When we multiply it by 5, JavaScript casts it to a number (automatically). The result (60) confirms that.

Here's another one:

let a = '5'
let b = 5

console.log(a + b)
// output: 55
Enter fullscreen mode Exit fullscreen mode

In the above example, we have a sum expression ('5' + 5). This time, JavaScript chose to cast the numeric value (5) into a string. So instead of 10 (5 + 5), we got 55 - the concatenation of '5' and '5'.

Even if we compare '5' and 5 with the equality (==) operator, we'll get true, meaning they are equal - even though one is a string and one is a number.

console.log(5 == '5')
// output: true
Enter fullscreen mode Exit fullscreen mode

These quick experiments prove JavaScript converts data types in certain contexts.

To avoid unexpected behaviors, it's advised to use the strict equality operator (===) over the normal equality (==) operator in comparisons.

The strict equality operator (===) returns true only if both operands are equal and of the same type. This is where you might want to use the double exclamation sign or the Boolean constructor.

let logged_in = 1

if (!!logged_in === true) {
   // Do something here ...
}
Enter fullscreen mode Exit fullscreen mode

This might seem totally unnecessary, though. You could use the short form without explicitly casting it to a boolean data type:

let logged_in = 1

if (logged_in) {
   // Do something here ...
}
Enter fullscreen mode Exit fullscreen mode

This will give you the exact same result.

However, if you have a good reason to compare the values with an ESLint-friendly fashion (known as the eqeqeq rule), you can convert them to their boolean equivalent before comparing them with ===.

All right, I think that does it. I hope you found this quick guide helpful.

Thanks for reading.


❤️ You might like:

Top comments (1)

Collapse
 
naucode profile image
Al - Naucode

Great article, you got my follow, keep writing!