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:

Truthy

In JavaScript, a truthy value is a value that is considered true when evaluated in a Boolean context. All values are?

developer.mozilla.org

A full list of falsy values can be found here:

Falsy

A falsy value is a value that translates to false when evaluated in a Boolean context.

developer.mozilla.org

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:

Logical Operators

Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean value. However?

developer.mozilla.org

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.

Truthy

In JavaScript, a truthy value is a value that is considered true when evaluated in a Boolean context. All values are?

developer.mozilla.org

Falsy

A falsy value is a value that translates to false when evaluated in a Boolean context.

developer.mozilla.org

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

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

Until next time,

Pat