Bang and Double Bang
To me, coercion in JavaScript is another topic I’ve found interesting to explore. unexpected results. When using the bang (!
)–also known as logical not–or double bang (!!
) before a value, JavaScript coerces the value to a boolean and yields the opposite value:
!false //true
!0; //true
!!0; //false
typeof !!0 //boolean
typeof !!0 == "boolean" //true
Now to take it a step further by comparing the coerced values with the double equals operator:
!!0 == false //true
!!'' == '' //true
!!0 == 0 //true
!!1 == 1 //true
!!'0' == '0' //false
How about that last line?
JavaScript coerces the first operand and then evaluates the entire expression. The first operand coerces to true
leaving true == '0'
as the expression to be evaluated. Under this scenario, the types of each value are different and one of them is a boolean, so JavaScript tries to convert each to a number. This results in 1 === NaN
, which is obviously false. For another look at how the double equals comparison operator works in JavaScript, read this blog post.
If Blocks
In the context of if
blocks, coercion applies very similarly.
if ('hi') {
console.log('hi'); //hi
}
if (1) {
console.log(1); //1
}
if ('') {
console.log(''); // statement never reached
}
JavaScript coerces the string 'hi'
the same way it would if we put !!'hi'
. We could pass in a variable and it would be coerced the same way as well.
var val = 'hi';
if (val) {
console.log(val); //hi
}
Therefore…
if ('hi') {
console.log('hi' == false); //false
console.log('hi' == true); //false
}
Wait a second. Shouldn’t console.log('hi' == true);
produce true
? This is mostly a mind trick. We see 'hi'
is truthy in the if
statement, but when it’s compared to true
with the double equals operator, it behaves similar to the example above–JS tries to convert 'hi'
to a number first which results in NaN
and then the whole expression is evaluated and it produces false
. If this doesn’t make sense, you really need to read up on the double equals operator to understand how it works.
Why !!
So why would you ever use !!
? It’s mostly a concise way of converting a value to a boolean or making sure it is a boolean. Alternatively, you could use the Boolean
function, but it’s important to understand this has some tricks too. Before revealing the result below or reading any further, take a guess at what each line yields:
!!Boolean(false)
!!new Boolean(false)
hover for result
false,true
The new
prefix constructs a boolean object. An object coerced yields true.
!new Boolean(false) !== !!!{}
hover for result
false
[…] Coercion […]
[…] ← Previous Next → […]
[…] Coercion […]