When building websites or web apps, the data that is shown on the screen is often dynamically created dependent on some user defined input. Sometimes this input is missing or not as expected. In these cases it’s good to have default values to fall back to so that our app doesn’t break or behave unexpectedly.
Below is an example of assigning default values to a variable using the logical OR operator, known as short circuit assignment:
So what’s going on here? To understand, let’s first have a quick look at logical operators.
Logical operators evaluate an expression and return a boolean value (
AND Operator (&&)
true if both inputs are
true. Otherwise returns
OR Operator (||)
true if either or both inputs are
true. Otherwise returns
NOT Operator (!)
Returns the opposite boolean value to the input.
Logical Operators in if statements
The usual use case for logical operators is to conditionally execute code dependant on what those operators evaluate to.
However, what happens when we put non-boolean values in an
This means that some of these expressions evaluate to
true and some of them evaluate to
false. In fact all expressions can be evaluated as either
true (known as a truthy value) or
false (known as a falsy value).
Truthy and Falsey Values
Falsey values are those that evaluate to
false in an
All other values, whether they be strings, numbers or objects (and of course the
true boolean value) evaluate to
true and are known as truthy values.
Logical Operators and Non-Boolean Values
So what happens when we put non-boolean values (which can be either thruthy or falsey) into a logical expression?
In the first example, we see that the result of
"hello" && "world" is actually
"world". This is because an AND operator needs to test the truthiness of both sides of the expression - both values must be
true for the whole expression to be
true. It then returns the last value that it evaluated, in this case
"world" if the expression evaluates to
This isn’t quite the same for OR. Since OR only needs one of the values to be true in order for the whole expression to be true, if the first value is truthy then it can exit out of the evaluation early, having only tested the first value, and then return the first value. This is known as short circuit evaluation — if the first value is
true, there is no need to check the rest of the expression, so it short circuits having only tested the first value.
However, if the first value does evaluate to
false, then the OR statement must then check the second value to see if that is
In this case,
0 evaluates to
false, so the OR statement then has to check the truthiness of the second value -
1 is truthy, so
1 is returned from the expression.
In this way we can assign default values. We can use a user-defined variable as the first value and a default to fall back to as the second value. If the user gives a truthy input, their input is returned because the OR statement short circuits. In the case that the user gives no input, the first variable will be falsy and so the second value is returned.
const userVariable = "user value";
const value = userVariable || "default value";const userVariable = "";
const value = userVariable || "default value";
I hope that you’ve found this post useful. Please let me know your comments/questions through Twitter.
Originally published at https://samwalpole.com.