I’m rather new to JavaScript and programming in general so I am pretty much only used to seeing if statements that have some kind of comparison operator like, if (x < 10)
or if(myBool)
.
I have seen an if
statement checking against an event
, but I don’t understand what or why the event
is being checked like that. What’s the semantic meaning behind that check or comparison?
Here is the code in question:
if(event){
event.preventDefault();
}
1
Javascript has a feature called type coercion. There’s a nice reference/tutorial for booleans here, so I’ll not go into detail as to what gets type-coerced to what. A common shorthand for casting to a boolean from any type of myVariable
is to boolean-negate it twice: !!myVariable
.
Objects (which is what a javascript event usually is) evaluate to true
if they’re non-null
and non-undefined
. Empty objects (with length === 0
) also evaluate to true
.
Boolean operators short-circuit evaluation, meaning that it’s common to shorthand one-line if-blocks like this:
event && event.preventDefault();
Functions can also be type coerced into boolean true
s. This is a valid piece of javascript:
if(event.preventDefault) { // Note if event is undefined this WILL throw an error
event.preventDefault();
}
// or, avoiding the error
if(event && event.preventDefault) {
event.preventDefault();
}
The code snippet you posted can commonly be seen in event handlers, though it’s usually unnecessary: an event propagator is probably breaking contract if it’s passing an undefined event handle to the handler. (And if that is a valid contract, it’s probably bad design)
2
JavaScript has the concept of “truthy” and “falsy” values.
The following values are falsey
:
false
null
undefined
0
NaN
''
(empty string)
All other values are truthy
.
When a variable is cast to a boolean its “truthiness” is checked. When evaluated in an if
statement, or any of ?:
, ||
, and &&
, the variable is automatically cast to a boolean for the purposes of the check (the variable itself isn’t changed).
What this means is that:
if (event) {
is essentially treated as:
if (Boolean(event)) {
This sort of check is often used to verify that a variable exists before using methods on it. In this case it prevents a null reference error on undefined variables.
Note: Truthiness is not the same as checking a variable against true
or false
.
I.E.
if (foo) {
is not the same as
if (foo == true) {
A simple example of where this fails is when comparing against an object:
var foo = {};
if (foo) {
console.log('this works!');
}
if (foo == true) {
console.log('this doesn't work!');
}
Without knowing what event
is we cannot really say much, other than that by the end of the day, event
resolves to either true
or false
. In the above, the code is most likely checking that event
is not null
.
3
This means event is either non-zero (if it’s value is integer), true (if it’s a Boolean) or non-null (if it’s something else).
In many languages (compiled or scripting), when a condition is evaluated, it results in a value. Thus, x < 10 results in true (or in some languages a non-zero numeric value), and then it is interpreted as a true condition. Thus, if you were to say if(event) where event’s value was 1 (or non-null), then it would be considered true and the if block will be executed. The same logic applies to null vs non-null.
You can try this JS code and see that one alert will go up and the other won’t. You can replace event with null vs a string (e.g. ‘blah’) as well as a 0 vs non-0 and see that it will behave similarly:
var event = true;
if (event) alert('true!');
var event = false;
if (event) alert('false!');
0