DEV Community

loading...

Converting values to boolean using !! (double NOT)

Zach Snoek
Software Engineer
Updated on ・3 min read

Something I come across working in JavaScript and React projects is the use of two logical NOT operators to coerce a value to its corresponding boolean value. This might look strange or confusing at first, so let's see how it works and why you may (or may not) use it.

The logical NOT operator (!)

In JavaScript, all values are either truthy or falsy:

let x;

x = "JavaScript";  // truthy
x = "";            // falsy
x = {};            // truthy
x = 0;             // falsy
Enter fullscreen mode Exit fullscreen mode

Using the logical NOT operator (!), we can convert a truthy value to false and a falsy value to true:

let x;

x = !"JavaScript";  // false
x = !"";            // true
x = !{};            // false
x = !0;             // true
Enter fullscreen mode Exit fullscreen mode

! always returns a boolean value: It first converts the truthy or falsy value to its corresponding boolean value (truthy corresponds to true and falsy to false), then returns the negated boolean. For example, !{} first converts {} to true and then returns the opposite of true, which is false.

The double NOT (!!)

You might come across a situation where you want to use a non-boolean value as a boolean. A double NOT (!!) allows us to succinctly convert a non-boolean value to its corresponding boolean value:

let x;

x = !!"JavaScript";  // true
x = !!"";            // false
Enter fullscreen mode Exit fullscreen mode

With our knowledge of how the logical NOT operator works, we can see how this makes sense. Take !!"JavaScript", for instance:

  1. "JavaScript" is truthy, so it is converted to true
  2. The first ! converts true to false
  3. The second ! converts false to true

Note that !! is not an operator––it's just two logical NOT operators chained together. In fact, we can use as many !s as we like (and make our JavaScript look like it's gone into expletive mode):

const x = !!!!!"s***"; // false
Enter fullscreen mode Exit fullscreen mode

Using !!

I don't often use !!, but I think there are a few instances where it can be useful. Consider a function that performs logic on non-boolean values that we want to ensure returns a boolean value:

function isValidUser(user: { name: string; bio: string }) {
    return !!(user.name && user.bio); // ...
}
Enter fullscreen mode Exit fullscreen mode

We can also use !! as a shortcut for checking if a list has any elements; this is something I often see in React:

function FruitDisplay({ fruit }) {
    const hasFruit = !!fruit.length;

    return (
        hasFruit && (
            <>
                <h3>Available fruit:</h3>
                <ul>
                    {fruit.map((f) => (
                        <li>{f}</li>
                    ))}
                </ul>
            </>
        )
    );
}

function App() {
    const fruit = ["apple", "orange", "grape"];
    // ...
    return (
        <FruitDisplay fruit={fruit} />
        //...
    );
}
Enter fullscreen mode Exit fullscreen mode

However, it's often argued that !! decreases readability and is used in situations that could be refactored to be more explicit. In our previous list length example, I'd argue that checking for > 0 or !== 0 is more clear:

function FruitDisplay({ fruit }) {
    const hasFruit = fruit.length > 0; // or fruit.length !== 0
    // ...
}
Enter fullscreen mode Exit fullscreen mode

And it's worth noting that using the built-in Boolean function does the same thing as !! and is arguably more readable and easier to understand:

let x;

x = !!"" === Boolean("");                      // true
x = !!"JavaScript" === Boolean("JavaScript");  // true
Enter fullscreen mode Exit fullscreen mode

Conclusion

The double NOT allows us to convert truthy and falsy values to their corresponding boolean value: truthy values become true and falsy values become false. It's a concise way to coerce any value to a boolean but can also sacrifice readability.

Do you like to use !!? What situations do you find it useful or harmful? Let me know your thoughts below!

References


Let's connect

If you liked this post, come connect with me on Twitter, LinkedIn, and GitHub!

Discussion (1)

Collapse
ianwijma profile image
Ian Wijma • Edited

Fun fact, you can add as many ! you want, and it will keep on flipping the boolean value. Not really useful to add more then 2. But still interesting :)

!!!!!!!!!!!!!!true // Results in true
!!!!!!!!!!!!!true // Results in false
Enter fullscreen mode Exit fullscreen mode