Javascript Short-Circuit Conditionals

Conditionals using logical operators

Logical Operators and Short-Circuit Evaluations

In Javascript, there are three logical operators, && || ! …

&& : logical AND (returns expr1 if it can be converted to false. If not, returns expr2.)

|| : logical OR (returns expr1 if it can be converted to true. If not, returnsexpr2.)

! : logical NOT (returns false if its single operand can be converted to true. If not, returns true.)

x=10 and y=4 
Example &&               x < 20 && y > 1               is true
Example ||               x == 3 || y== 3               is false
Example !                !(x == y)                     is true

In the above examples, the logical operators are being used in conjunction with comparison operators < > = == === >= <= != !== which all return boolean values: true and false.

In Example &&, the expression on the left (x<20)is evaluated first, which returns true. Because && this did not return false, it moves on to evaluate the expession on the right (y>1). This expression also evaluates to true, hence the expression on the left is returned, which is true. Thus, when && is used with boolean values, && returns true when both operands are truthy and returns false they are not.

In Example ||, the expression on the left (x==3) is evaluated first, which returns false. Because this value is not truthy, it immediately returns the expression on the right (y==3), which is false. Hence, when || is used with boolean values, || returns true when either operand is truthy.

In Example !, the expression x==y is false. Next, the ! converts the expression from false to NOT false; in other words, true.

Short-circuit Evaluations

As we have seen, && and || evaluate from left to right and short-circuit. What this means is that in both cases, if the first operand satisfies the logical operator’s condition (&&: falseor ||: true) the first expression will be returned, without so much as a look at the second operand on the right!

• false && ****anything****is short-circuit evaluated to false.
• true || ****anything***** is short-circuit evaluated to true.

All the possibilities:

true && true         returns true
true && false        returns false
false && true        returns false
false && false       returns false
true || true         returns true
true || false        returns true
false || true        returns true
false || false       returns false

Short-circuit Conditionals

Using short-circuit evaluations is an excellent way to simplify conditional statements and make your code DRY.

For example, imagine we have a user that we want to greet when they are online.

user.online = true
const greet = () => console.log("Helloooooo! You are online.")

We could write the following conditional statement:

if (user.online) {
  greet()
}
// Helloooooo! You are online.

However, we could also do the same thing using an && short-circuit conditional:

user.online && greet()            
// Helloooooo! You are online.

This works because user.online is true so the evaluation is not short-circuited and the second operand, greet(), is returned. If user.online is false, the equation will short-circuit and greet() will never run.

We can also use a || if desired:

user.online = false
if(!user.online){
  greet()
}
( user.online || greet())  
// Helloooooo! You are online.
// Helloooooo! You are online.

Using short-circuit conditionals in JSX in React

In React, it’s not possible to write statements (if…else statements, loops, etc.) using JSX; only expressions.

This is because JSX is not Javascript but its own language with its own syntax.

However, if the use of logic is required inside the JSX, it is possible to:

• Extract the logic outside of the JSX and then call it from within the JSX
• Use ternary operators
• Use short-circuit conditionals !!!

Examples of conditional rendering in React can be viewed here: https://reactjs.org/docs/conditional-rendering.html