We have always used boolean operands up until now when we work with logical operators. In javascript, we can make use of non-boolean values as well with logical operators(&&, || ) which is known as short-circuiting. Let's have a look at short-circuiting and what it offers.

Before we dive into short-circuiting we should be aware of truthy and falsy values in javascript.

In Javascript, all values are truthy values unless they are defined as falsy.All values are truthy except false, "",null,undefined,0. Javascript basically uses type coercion here.

Short Circuiting with OR(||) operator

The OR operator basically returns the first truthy value it encounters.

true || true // true

false || true //true

true || false  //true

false || false // false

Let's look at a few examples and code snippets

console.log(3 || "John");  // 3

console.log( "" || 3) // 3

console.log(true || 0) // true

console.log(undefined || null || "" || "hello" || 23);  // hello

console.log(undefined || null); // null

In the last example, you will notice that we have two falsy operands. In this case, javascript will evaluate till it meets a truthy value and if it doesn't it will return the last falsy value. Let us look at a few more code examples.

const restaurant={
 name: "Pizza Hut",
 }

Let's say we want to write a piece of code that will look into the restaurant object to find the number of people and if there is no such key present we return "none"

const restaurant={
 name: "Pizza Hut",
 }

const people = restaurant.noOfPeople ? restaurant.noOfPeople : "none";
console.log(people); // none

In the above code snippet because we don't have the key noOfPeople it is undefined which is a falsy value, therefore the string "none" will be printed in the console instead.

The above code can be rewritten using the || operator.

const restaurant={
 name: "Pizza Hut",
 }

const people = restaurant.noOfPeople || "none";   
console.log(people); //none

Now let's consider another case where people can go wrong easily. Let's say you have an object restaurant which contains name & noOfPeople keys where noOfPeople is 0.

const restaurant={
 name: "Pizza Hut",
 noOfPeople: 0
 }

const people = restaurant.noOfPeople || "none"; 
console.log(people); // none

Here you would notice that the code returns none again despite there being a noOfPeople key with its value being 0. Let's revise what we learned before. We know that 0 is a falsy value and we also know that the OR operator returns the first truthy value it encounters which is why we get "none" as output instead of 0.

There is a solution to this problem which is the nullish coalescing operator. You can refer to the mdn docs for the same here.

Short Circuiting with AND(&&) operator

The AND operator on the other hand returns the first falsy value it encounters.

true && true // true

false && true //false

true && false  //false

false && false // false

Let's look at a few examples and code snippets

console.log( "" && 3) // ""

console.log(true && 0) // 0

console.log(undefined && null && "" && "hello" && 23);  // undefined

console.log(undefined && null); // undefined

console.log(3 && "John");  // 3

Similarly here in the last example, you will notice that we have two truthy operands. In this case, javascript will evaluate till it meets a falsy value and if it doesn't it will return the last truthy value. Let us look at a few more code examples.

const restaurant={
 name: "Pizza Hut",
 orderPizza(toppingOne,toppingTwo){
        console.log(`I like my Pizza with ${toppingOne} , ${toppingTwo}`);
     }
 }

if(restaurant.orderPizza)
 {
   restaurant.orderPizza("Corn","Panner");
  }

Here in the above code snippet, we are checking to see if the restaurant.orderPizza() method exists. If it exists, we are calling the method and passing two arguments and if it doesn't exist we do nothing.

The above can be rewritten using AND operator.

const restaurant={
 name: "Pizza Hut",
 orderPizza(toppingOne,toppingTwo){
        console.log(`I like my Pizza with ${toppingOne} , ${toppingTwo}`);
     }
 }

restaurant.orderPizza && restaurant.orderPizza("Corn","Panner")

In the above code snippet if the restaurant.orderPizza methods exist javascript will evaluate it to true and because the AND operator will only return falsy values it will continue its search for falsy values. Since there are no falsy values present Js will restaurant.orderPizza("Corn","Panner") and therefore make the object method call.

So as you can see short-circuiting truly works wonders when used properly. Hope you enjoyed reading.

Happy Coding! :)