You might have noticed a double exclamation mark (!!) in JavaScript code and you may be curious about what that means.
✋ Update: This post was originally published on my blog decodingweb.dev, where you can read the latest version for a 💯 user experience. ~reza
First, the “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 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:
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:
// 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:
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).
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:
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:
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.
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.
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:
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: