Cleaning up Your JavaScript Code: The Double Bang (!!) Operator

Boolean and truthy/falsy values can seem simple at first, but they can be deceptively complex in certain languages. For instance, JavaScript has several different kinds of "falsy" values ‑ and if you're working in a strict setting or trying to make your code bullet‑proof (as we all should be), it's easy to get tripped up by them.

This can lead to developers becoming overcautious, which can lead to noisy, messy, or unnecessary code. When it comes to boolean typecasting, the double‑bang operator is a particular culprit.

What is the Double‑Bang Operator in JavaScript?

Whilst inheriting older codebases, or even working on a fresh build, you might see or use two consecutive exclamation marks: !!. This is the double‑bang operator, and it can be used to typecast values to a strict boolean value (either true or false).

In JavaScript ‑ which already supports truthy/falsy values ‑ the double‑bang operator can be more easily thought of as two not operators in a row (it is sometimes called the "double‑not" operator for this reason). Here's how it works:

The first not‑operator (!) takes any piece of data, and typecasts it into a boolean value. However, when it does this, it ‑ as you would expect ‑ flips the value. For instance, a value with "true" as a string would be converted to a false boolean:

!("true") === false

When you look at it like this, it is a little confusing. So, the second not‑operator is then used to flip the value back to what a developer would expect. So in this example, the string "true" would result in a true boolean value:

!!("true") === true

When Would You Use the Double‑Bang Operator in JavaScript?

As a developer working with JavaScript, I'm sure you've written your fair share of if statements for all manner of different pieces of logic. I'm sure ‑ too ‑ that a lot of the time, you use if to determine whether a variable has any data in it or not. In my bad old days of developing with jQuery, the equivalent would have been to check .length to determine whether a piece of data existed and had anything in it.

An if statement already tests truthiness, so there is no need to convert its condition to a boolean first. A value being truthy does not mean it contains useful or valid data: even the string "false" is truthy because it is not empty. Adding !! will not parse that string for you. For example:

const exampleVariable = 'foo';
if (!!exampleVariable) {
  // exampleVariable is truthy
} else {
  // exampleVariable is falsy
}

This is pretty clear, right? It takes exampleVariable, typecasts it to a boolean and tests it. Easy, and clear. But this code could in most cases just as easily be written as:

const exampleVariable = 'foo';
if (exampleVariable) {
  // exampleVariable is truthy
} else {
  // exampleVariable is falsy
}

JavaScript already handles truthy/falsy values pretty well. It's not a huge change, but it's a little clearer, a little cleaner, and it's fewer characters. This goes for ternary expressions, too, because they're just condensed if statements. Take a look:

const exampleVariable = 'foo';
const bar = !!exampleVariable ? exampleVariable : 'exampleVariable is false';

The condition tests the truthiness of exampleVariable. If it is truthy, bar receives the original value, not a boolean; otherwise it receives the fallback string. For this particular expression, the logical OR operator gives the same result:

const exampleVariable = 'foo';
const bar = exampleVariable || 'exampleVariable is false';

Here, we've even taken things one step further by using the or operator to really cut through the mess and keep our code DRY. Much, much nicer.

Should You Ever Use the Double‑Bang Operator?

Use !! when you specifically need a boolean result. The value undefined can be converted, so !!undefined returns false. An undeclared identifier is different: reading it throws a ReferenceError before either negation can run. Double‑bang is a conversion, not a check that a variable exists.

Taking an example from Stack Overflow, consider detecting versions of Internet Explorer:

const isIE8 = navigator.userAgent.match(/MSIE 8.0/);
console.log(isIE8);    // returns type of either Array or null
console.log(!!isIE8); //returns a boolean: true or false

For a function that must return a boolean, !! keeps the truthiness of the original value and expresses it as true or false. Triple‑bang, !!!, does the opposite: it negates that truthiness, just like a single !. Neither form validates the value or makes an unsafe property access safe.

Use the explicit conversion when the caller needs a boolean, and leave it out when the surrounding condition already does that job. The clearer version is the one that makes the expected result easy to see.