What does an exclamation mark before a variable mean in JavaScript
I'm trying to learn JavaScript by going through some code in an application and I keep seeing !variable
in if conditions. For example:
if (!variable.onsubmit || (variable.onsubmit() != false)) {
What is it? Some kind of test if the variable is empty?
!
is the logical not operator in JavaScript.
Formally
!expression
is read as:
- Take
expression
and evaluate it. In your case that'svariable.onsubmit
- Case the result of that evaluation and convert it to a boolean. In your case since
onsubmit
is likely a function, it means - if the function is null or undefined - return false, otherwise return true. - If that evaluation is true, return false. Otherwise return true.
In your case
In your case !variable.onsubmit
means return true if there isn't a function defined (and thus is falsy), otherwise return false (since there is a function defined).
Simply put - !variable
means take the truth value of variable
and negate it.
Thus, if (!variable) {
will enter the if
clause if variable is false
(or coerces to false)
In total
if (!variable.onsubmit || (variable.onsubmit() != false)) {
Means - check if variable.onsubmit
is defined and truthy (thus true), then it checks if calling onsubmit
returns a result that coerces to true. In a short line it checks if there is no onsubmit
or it returns true.
Next time, how do I find this myself?
- MDN has a list of operators here.
- The language specification specifies such operators, though being the official specification it does contain some jargon which might be hard to understand.
It is a negation operator used for truth tests on a variable.
var myVariable = 1;
if ( ! myVariable )
{
// myVariable evaluates as false
}
if ( myVariable )
{
// myVariable evaluates as true
}
The selected answer already answers the question. One thing to add in this is that !
operator can be used in a rather interesting fashion.
obj = {}
if (!!obj) {console.log('works')} // !!obj = true
obj = undefined
if (!!obj) {console.log('does not work')} // !!obj = false
So double !!
will change any expression to a boolean
value with no exceptions.
This has a very peculiar use case in some cases.
Lets say there is a function that returns either true or false and nothing else. In that case one could just change
return returnValue
toreturn !!returnValue
for extra caution (although not need in most of the cases)Conversely, if a function only accepts true or false and nothing else, one could just call the function as
functionA(!!parameter)
instead offunctionA(parameter)
, which again is not needed in most of the cases, but could ensure extra security