Operator (&& ||) short-circuiting in JavaScript

One handy feature of JavaScript and some other programming languages like Java is the concept of operator short-circuiting.
So, what does the operator short-circuiting in JavaScript mean?

To understand what operator short-circuiting mean, let’s see it in action:

let online = true;
let active = true;
if(online) {
  if (active) {
    console.log('James')
  }
}

Short-circuiting the code, it becomes:

let online = true;
let active = true;
online && active && console.log('James')

And for another example,

let online = false;
let active = false;
if(!online) {
  if(!active) {
    console.log('James')
  }
}

can be reduced to

online || active || console.log('James')

To understand what’s going on, we need to understand a few things:

1. Code execution in javascript goes from left to right. Hence, on line 3, online was first executed before active and finally the console.log statement.
2. Truth tables:

//And (&&) operator
true && true = true
false && true = false
true && false = false
false && false = false

//Or (||) operator
true || true = true
true || false = true
false || true = true
false || false = false

Looking at the && operator, if one of the values is false, the whole statement will become false, hence if we have

online = false;
active = true;

To get the result of online && active, since online is false, we don’t need to check for the value of active, the end result will always be false.
Let’s see another example:

const getOnlineStatus = function() {
  // some complex computation
  return false;
}
const getActiveStatus = function() {
  // some complex computation
  return true;
}

We may only want to check the active status if the user is online, hence if we do:

getOnlineStatus() && getActiveStatus()

getActiveStatus() will only get called if the call to getOnlineStatus returns true.
The above code can also be written in a traditional if statement as: 

if (getOnlineStatus()) {
  getActiveStatus()
}

These two code blocks do the same thing, but the former utilizes operator short-circuiting.

For the || operator, if one of the values is true, then the whole statement becomes true. This seems like the inverse of the && operator, and as you can see from the truth table shown above, || operations only evaluate to false if both operands are false.
So how does this affect our short circuit?

const getOnlineStatus = function() {
  // some complex computation
  return false;
}
const getActiveStatus = function() {
  // some complex computation
  return true;
}

Running getOnlineStatus() || getActiveStatus() will only execute getActiveStatus if the call to getOnlineStatus returns false.
Hence, the || operator is will stop executing after getting its first true  result.
This is the case because having a single one true value in an OR operation will render the whole statement true.
Hence, running getOnlineStatus() || getActiveStatus() will execute both functions since getOnlineStatus() returns false.

The operators can be chained: 
To show this, let’s assume we are building an authentication system, where we need to check if the user is online, check if the user is active, and show the registration page or profile page based on the two results.

Using a set of chained OR short circuits,  we can show the register page only if the user is not online and is not active.

// Chained OR short circuits
getOnlineStatus() || getActiveStatus() || showRegisterPage()

If the user is online or active, the appropriate method will return true, therefore, the chain won’t get to the showRegisterPage function. However, if the user is not online and the user is not active, making both getOnlineStatus and getActiveStatus false, the chain will continue to showRegisterPage.

Using a set of chained && short circuits, we can show the profile page if the user is online and active.

//Chained AND short circuits
getOnlineStatus() && getActiveStatus() && showProfilePage()

From the short circuit above, you can see that if the user is offline, getOnlineStatus() will be false, and since the chain is that of AND, the other functions wouldn’t be called.

A similar thing happens if getActiveStatus() returned false and getOnlineStatus returns true.
If that is the case, getOnlineStatus will run, return true, then getActiveStatus will run, return false and the code execution will end there.
showProfilePage() will only be called if both getOnlineStatus and getActiveStatus return true.

However, if we want to show the profile page if either the user is online or the user is active, we can use a chain of both || and && operators:

// Combination of both operators
getOnlineStatus || getActiveStatus && showProfilePage()

Here, if getOnlineStatus() returns true, then getActiveStatus() will not be called, and showProfilePage() will immediately be called.
However, if getOnlineStatus() returns false, and getActiveStatus() is true, showProfilePage() will be called.
showProfilePage won’t get called if both getOnlineStatus and getActiveStatus return false.

Conclusion

Operator short-circuiting in JavaScript is a handy trick that can help you write shorter and probably smarter code, so it’s best you understand how it works.
In the end, I wasn’t able to define operator short-circuiting, and I still can’t. But hopefully, you understand what it is, know when to use it and how to use it effectively.