Short Circuiting in JavaScript

In JavaScript short circuiting, an expression is evaluated from left to right and each of the section is evaluated before moving to the next. If any of the section in the expression provides the desired output, the evaluation will be stopped and it won't check the rest of the expression.

Before going to short circuiting, we can go through the concept of truthy and falsy values.

Falsy values

Falsy values are values that are not false, but become false if we convert it to Boolean.
There are mainly 5 falsy values in JavaScript. They are 0, '' (empty string), undefined, null, NaN.

console.log(Boolean(0)) // false
console.log(Boolean('')) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(Boolean(NaN)) // false

Truthy values

The values that are not falsy are truthy values. They will become true if we convert them to Boolean.

console.log(Boolean(1)) // true
console.log(Boolean('Sample')) // true
console.log(Boolean([])) // true
console.log(Boolean({})) // true
console.log(Boolean(-1)) // true

Logical OR (||)

In the Logical OR expression, the sections in the expression is divided using || symbol. In the OR expression, if the first value is a truthy value. It will return the first value and do not evaluate the next values.
And, if the first value is a falsy value, it will look the second part of expression and if it is also a falsy one , it goes to the next and goes on like that. If every value in the expression is a falsy one, it will return the last section.

console.log(true || "Sample") // true
console.log(false || "Sample") // Sample
console.log(undefined || null) // null
console.log(1 || '') // 1
console.log(undefined || 0|| '' || "Hello" || 23 || null) // Hello

This can be used in various scenarios in code. A sample situation is given below. Consider we have to check whether a particular variable exists, and if it exists, we have to move the value to another variable. If not, we have to assign a default value to the new variable.
This can be done with conditional operator.

// Conditional Operator
const newVar = oldVar ? oldVar : 10;

// Short Circuiting
const newVar = oldVar || 10;

Logical AND (&&)

In Logical AND expression, each of the section is separated by the && symbol.
In Logical AND, if the first value is falsy, it immediately returns that value and do not validate the rest of the expression. If the first value is truthy, it goes to the second one and if it is also truthy, it goes to next and so on. If all the values are truthy, it will return the last value.
We can consider it like this, for an AND expression to be true, all the values in that expression should be true. If any of the value is false, the entire expression is false and we don't need to evaluate further.

console.log(true && "Sample") // Sample
console.log(false && "Sample") // false
console.log(undefined && null) // undefined
console.log(1 && '') // ''
console.log(1 && true && -1 && 0 && 23 && null) // 0

Let us consider the below practical example. Consider invoking a function based on a variable value.

// Normal Method
if (isValid){
   sampleFunction();
}

// Short Circuiting
isValid && sampleFunction();

The Nullish Coalescing Operator (??)

There is a condition in the Logical OR operator short circuiting which doesn't provide the desired output. Consider the below code snippet

const a = 0;
const val = a || 10; // val => 10

Here in this condition, even though the variable exists, it is not fetching the value of a to val, since 0 is a falsy value.
This can be corrected by using the Nullish Coalescing operator.
It will check for the nullish values (null and undefined) for short circuiting and not zero or empty string.

const a = 0;
const val = a ?? 10; // val => 0