Short Circuiting in JavaScript and New operator of ES2020.

GURVINDER MAAN
4 min readApr 5, 2021

In this we will get to know about the full potential of && and || logical operators. Almost 80% of developers aren’t aware of or don’t know that trick or way to short circuit with logical operators .

We mostly use logical operators only to combine boolean values but we can do a lot more with &&(AND) and ||(OR) operators.

console.log(3 || 'honey');
output: 3

In case of OR operator Short Circuiting means that if first value is truthy value it will immediately return that first value, in other words if the first operand is truthy in OR || operator then the other operand will not be evaluated, so JavaScript will not even take a look at it. And that’s what we mean SHORT CIRCUITING.

for ex:
*) console.log( '' || 'honey');
output: honey;
//because empty string is falsy value and second operand is being evaluated and no short circuiting is done here.
*) console.log(true || 0 );
output: true;
// because true is obviously truthy value although 0 is also falsy value but it will return the one because it's OR || operator.
*) console.log(undefined || null);
output: null;
// because undefined is falsy value although null is also falsy but it will return the one because it's OR || operator.
*) 💯console.log(undefined || 0 || '' || 'Hello' || 23 || null);
// so in above example undefined is falsy so no short circuiting, and moved to next operand 0 is also falsy so moved to next operand , '' empty string is also falsy so to next, 'Hello' is truthy so therefore it will Short Circuit the entire evaluation and it will return the 'Hello'

Where we can use Short Circuiting 👉

*) for ex: 
const restaurant = {
guests = 0;
}
// so if we want to print number of guests and if no guests we want to print default value of 5 what we will do with old method is:
if (restaurant.guests || restaurant.guests > 0 ){
console.log(guests);
}else {
console.log(10);
}
output: 10;*) // this is what we will do or with another messy method with ternary operators:const guests1 = restaurant.guests ? restaurant.guests :10;
console.log(guests1);
output: 10;
*) 💯// Now there's the easiest way with short circuiting 👉 :const guests2 = restaurant.guests || 10;
console.log(guests2);
output: 10;

// because restaurant.guest is falsy value 0 and will return 10;
but there's one problem in above situations that if guests are really 0 in number and we want to print 0.. so solution for this is in next block.if restaurant.guest = 5
const guests2 = restaurant.guests || 10;
output will be : 5
//because 5 is truthy value and it will short circuit the evaluation and will return that value.So short circuiting is very easy and handy way.

And here we have seen that if guests number is 0 it’s considering it as falsy value and returning the another operand 10. so Solution to this problem is 👉

THE NULLISH COALESCING OPERATOR ?? 👉

Nullish Coalescing ?? Operator was used introduced in ES2020. and Nullish operator works with nullish values i.e null and undefined it doesn’t includes 0 or the empty string.

for ex: const guestsCorrect =  restaurant.guests ?? 10;
console.log(guestsCorrect);
output: 0;

👆 That was the short circuiting with || OR Operator.

We can also do Short Circuiting with AND && Operator 👉

In Short Circuiting the AND && Operator works exact the opposite way of OR || Operator.

The AND && Operator Short Circuits when the first value is falsy. so that’s completely opposite from the OR || operator Short circuiting.

*) for ex: console.log(0 && 'honey');
output: 0;
// so it short circuits when the first value is falsy value and returns the value.
*) console.log( 7 && 'honey');
output: honey;
// because first value is truthy value. so when its truthy that means that evaluation continues till last value is returned.
*) console.log(23 && 'honey' && null && 'hello')
output: null
// here 23 is truthy value therefore evaluation continues, honey is truthy value so evaluation continues, and null is falsy value so evaluation no longer needed to continue, because at this point the whole result of end operation is gonna be false, and then simply value is returned and it Short Circuits the rest of evaluation.

So what that means is AND && operator is only true if all operands are true. if first operand is false than the entire result of AND operation will be false, so there’s no need to look at any of other operands

*) For ex: If we want to call a function after checking that if that function exist :const restaurant{
orderPizza: function(){
console.log(`pizza ordered with ingredients ${ingredients}`);
}
}
*) //What we normally do is :
if(restaurant.orderPizza){
restaurant.orderPizza('chicken', 'mushroom')
}
output: chicken mushroom
*) // But with AND && Short Circuiting we can do it in very simple way and short syntax:restaurant.orderPizza && restaurant.orderPizza('mushroom', 'spinach');
output: chicken mushroom
// so what we did here is we checked that if restaurant.orderPizza function exist, that is if it's truly value then next operand will be evaluated i.e function will be called and if it was falsy value and function doesn't exist so we already know that AND && operator short circuits the falsy value and evaluation will be stopped, same as we did in if else before. but with short circuiting we did it in lesser syntax.

Short Circuiting is very cool JavaScript Trick that can save lot of time and syntax of project. and we can get rid of if else statements and ternary operators most of the time with short circuiting.

--

--