Skip to content

JavaScript Shortcircuiting

المعرفة:: JavaScript
الحالة:: ملاحظة_مؤرشفة
المراجع:: syahshiimi’s notes, The Complete JavaScript Course 2022 From Zero to Expert

There are two operators that allows us to perform shortcircuiting in JavaScript.

  1. || operator
  2. && operator

How Does It Work?

  • The || operator will return the first truthy value of all the operands or the last, if they are all falsy
  • The && operator will instead return the first falsy value of all the operands or the last, if they are truthy
|| &&
truthy first last
falsy last first

What Does Shortcircuiting Mean?

When the operators are applied in an operand, it returns the first value to whichever the statement follows the conditons of the operator.

Limitations

The operands will always read 0 as the falsy value. We can circumvent it with the Nullish coalescing operator. 

restaurant.numGuests = 0;  
const guests1 = restaurant.numGuests || 10;  
console.log(guests1); // 10

Examples

// Short Circuiting (&& and ||)  
console.log("---- OR ----");  
// Use ANY data type, return ANY data type, short-circuiting  
console.log(3 || "Jonas"); // 3  
console.log("" || "Jonas"); // Jonas  
console.log(true || 0); // true  
console.log(undefined || null);  
console.log(undefined || 0 || "" || "Hello" || 23 || null); // Hello  
const guests1 = restaurant.numGuests ? restaurant.numGuests : 10;  
console.log(guests1); // 10  
restaurant.numGuests = 23;  
const guests2 = restaurant.numGuests || 10;  
console.log(guests2); // 23  

console.log("---- AND ----");  
console.log(0 && "Jonas"); // Jonas  
console.log(7 && "Jonas"); // Jonas  
console.log("Hello" && 23 && null && "jonas"); // null  

// check if method exists before using it  
restaurant.orderPizza && restaurant.orderPizza("mushrooms", "spinach");
Last update : August 14, 2023
Created : August 23, 2022

Comments

Comments