JavaScript double exclamation mark explained (with examples)

What are those double not operators in JavaScript? You might have noticed the JS double exclamation mark (!!) in a code snippet, and you may be curious what that means.

🎧 Debugging Jam

Calling all coders in need of a rhythm boost! Tune in to our 24/7 Lofi Coding Radio on YouTube, and let's code to the beat – subscribe for the ultimate coding groove!" Let the bug-hunting begin! 🎵💻🚀

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

Psssst! Do you want to learn web development in 2023?

It's not too late! Read these first:

• How to become a web developer when you have no degree
• How to learn to code without a technical background
• How much do web developers make in the US?

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
}

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

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

let logged_in = 1

if (!!logged_in === true) {
  // Do something here
}

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 ...
}

You can also use this technique when you need to check for null or undefined values.

But do we need this confusing technique in the first place? Let's find out.

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

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

But let's dig a little 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

In the above example, the variable a contains a string ('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

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

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 ...
}

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 ...
}

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.

Reza Lavarian Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @rezalavarian