JavaScript double exclamation mark explained (with examples)
Tags: javascript, webdev, beginners
Published: 2023-02-05 14:01:01

> ✋ **Update:** This post was originally published on my blog [decodingweb.dev](https://www.decodingweb.dev), where you can read the [latest version](https://www.decodingweb.dev/javascript-double-exclamation-mark) 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](https://www.decodingweb.dev/how-to-learn-a-programming-language#data-types) 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:

```js
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:

```js
// 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:

```js
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).

```js
let logged_in = 1

if (Boolean(logged_in) === true) {
   // Do something here ...
}
```

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:

```js
let a = '12'

console.log(a * 5)
// output: 60
```

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:

```js
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. 

```js
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.

```js
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:

```js
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.

---

**❤️ You might like:**

- [Javascript if/else shorthand explained (with common uses cases)](https://www.decodingweb.dev/javascript-if-else-shorthand)
- [How to check if an element exists in JavaScript (with examples)](https://www.decodingweb.dev/javascript-check-if-element-exists)
- [JavaScript isset Equivalent (3 methods)](https://www.decodingweb.dev/javascript-isset-equivalent)
- [Integer division in JavaScript explained](https://www.decodingweb.dev/js-integer-division)