avatarPatrick Divine

Summary

The article explains the use of the double logical NOT operator (!!) in JavaScript to convert any value to its associated boolean truthy or falsy value.

Abstract

JavaScript's double logical NOT operator, represented as !!, is a concise way to determine a value's inherent boolean value. Every value in JavaScript has an associated boolean value, known as truthy or falsy, which is revealed when a value is evaluated in a boolean context. The single NOT operator (!) inverts the value's boolean association, while applying it twice restores the original boolean state, effectively converting non-boolean values to either true or false. This technique is particularly useful for quickly normalizing values to a boolean type, which can simplify conditional logic in code. The article cautions that while the double NOT is a handy tool, developers should be mindful of JavaScript's truthy and falsy values to avoid unexpected outcomes, especially with edge cases like empty strings.

Opinions

  • The author suggests that the use of double NOT is somewhat counterintuitive, as it involves two separate inversions, but then concludes that it's a "kind of cool" method for boiling down values to their boolean essence.
  • The article implies that understanding the concept of truthy and falsy values is crucial for JavaScript developers to avoid common pitfalls when using the double NOT operator.
  • A single NOT operator is noted to be useful for both determining a value's boolean association and reversing it, which can be particularly useful in conditional statements.
  • The author emphasizes the importance of being aware of the unintuitive truthy and falsy assignments in JavaScript, suggesting that developers should familiarize themselves with the complete list of such values to prevent errors in their code.

Javascript “Bang, Bang. I Shot You Down” - Use of Double Bangs (!!) in Javascript.

How to keep from getting shot down while using double bangs

TLDR;

The !! (double bang) logical operators return a value’s truthy value.

Javascript ‘Truthy’ Values

In Javascript, every value has an associated boolean, true or false, value. For example, a null value has an associated boolean value of false. A string value, such as abc has an associated boolean value of true.

Values that are associated with boolean true are said to be truthy. Values that are associated with boolean false values are said to be falsy.

A full list of truthy values can be found here:

A full list of falsy values can be found here:

Boolean Operations

Certain operations, like conditional if statements, will elect to use the associated boolean true/false value instead of the value itself. In these cases, we can say that the value is being used in a boolean context and will be coerced, or forced to, its associated true/false value.

The First Shot — A Single Bang!

In Javascript, the exclamation mark (“!”) symbol, called a “bang,” is the logical “not” operator. Placed in front of a boolean value it will reverse the value, returning the opposite.

!true; // Returns false.
!false; // Returns true.

Just like a conditional if statement, a bang (“!”) creates a boolean context. So, for example, the string abc, which is associated with true, will evaluate to false if a bang is placed in front of it.

So, the single bang does two things:

  • Determines the values associated true/false value.
  • Returns the opposite of the associated true/false value.

Reference for the logical “not” operator:

The Second Shot — Double Bang!

If a bang (“!”) returns the opposite truthy value, what would a bang executed twice on a value do?

So, running a bang twice determines the opposite of value, and then returns the opposite of that.

Not very useful, right? But with non-boolean values, it is kind of cool:

So, running a bang twice on a value will first change the value to the boolean opposite, and then take that returned boolean value and flip it, again, to the opposite.

In short, as stated in the TL;DR, the double-bang returns the boolean true/false association of a value. Pretty cool, right?

How The Double Bang Can Be Used

Knowing the associated boolean value of any given value is helpful if you want to quickly reduce a value to a boolean:

Gotchas! Oh, No! I Shot You Down!

As a final note, watch out for the double-bang. It is possible for it to shoot you down with a couple of gotchas.

For example, what does this string evaluate to?

const x = '';
!!x;

It is a string like abc, so perhaps it is associated with a boolean true value. But, it is also an empty string, so perhaps it is associated with a boolean false value.

const x = '';
!!x; // Evaluates to false.

Yep, empty string values are associated with boolean false values. They are falsy.

There are a few of these unintuitive truthy and falsy assignments. So, take a look at these quick lists when you have a chance.

Bang, Bang. I hope I didn’t shoot you down!

Thanks for reading, hopefully, this piece was helpful to you!

Until next time,

Pat

JavaScript
Double Exclamation Mark
Bang Bang
Double Bang
Recommended from ReadMedium