shortCircuit.md

[JavaScript] - Short Circuiting (&& and ||) - Nullish Coalescing Operator (??)

||, &&, Extreme Example

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  orderPizza: function (mainIngredient, ...otherIngredients) {
    console.log(mainIngredient, otherIngredients);
  },
};

Logical operators can use ANY data type, return ANY data type and short-circuiting.

Short-circuiting for ||

Logical OR operator || returns the first truthy value, and if all operands were evaluated, it returns the last one.

console.log(3 || 'Jonas'); // returns 3 in this case
console.log('' || 'Jonas'); // '' is a falsy value, so it returns 'Jonas'
console.log(true || 0); // returns true
console.log(undefined || null); // undefined is a falsy value, so it returns null
console.log(undefined || 0 || '' || 'Hello' || 23 || null); // returns 'Hello' as 'Hello' is the first truthy value

This is similar to || condition check where it only needs one evaluation to return true to pass the check.

// Instead of this
// restaurant.numGuests = 23;
// restaurant.numGuests = 0;
const guest1 = restaurant.numGuests ? restaurant.numGuests : 10;
console.log(guest1);

// we can do this for setting default value for unknown property
const guest2 = restaurant.numGuests || 10;
console.log(guest2);

However both of the above won't work if we set numGuests to 0 as 0 is a falsy value, thus they will return 10 when in fact the correct result is 0.

Short-circuiting for &&

Logical AND operator && returns the first falsy value, and if all operands were evaluated, it returns the last one.

console.log(0 && 'Jonas'); // returns 0
// When the first value is truthy, the valuation continue and then it just returns the last value
console.log(7 && 'Jonas'); // returns 'Jonas'
// as 'Hello' and 23 is truthy, it will continue to evalue until it find the first falsy value - null and thus short circuit the rest of the operation ('Jonas')
console.log('Hello' && 23 && null && 'Jonas'); // returns null

This is also similar to && condition check. If the first value is false then the whole condition is false and it doesn't need to evaluate any further.

// Instead of this
if (restaurant.orderPizza) {
  restaurant.orderPizza('mushroom', 'spinach');
}

// we can do this
// if restaurant.orderPizza doesn't exist, we can short circuit the function and don't do anything
restaurant.orderPizza && restaurant.orderPizza('cheese', 'pineapple');

Nullish Coalescing Operator (??)

The problem with numGuests = 0 above can be solved with the ?? operator.

restaurant.numGuests2 = 0;
const guest = restaurant.numGuests2 || 10;
console.log(guest);

// Nullish values: null and undefined (NOT 0 or '')
// ?? returns the first non nullish value, so it will return 0 in case numGuests2 is non-null
// and 10 in case it's null
const guestCorrect = restaurant.numGuests2 ?? 10;
console.log(guestCorrect);

Bonus for the extreme case:

Extreme Example

const game = {
  team1: 'Bayern Munich',
  team2: 'Borrussia Dortmund',
  odds: {
    team1: 1.33,
    x: 3.25,
    team2: 6.5,
  },
};

The team with the lower odd is more likely to win.Print to the console which team is more likely to win, without using an if/else statement or the ternary operator.

Answer:

game.odds.team1 < game.odds.team2 && `${game.team1} is more likely to win` || `${game.team2} is more likely to win`

As && has higher precedence than ||, it can parsed as the following:

((game.odds.team1 < game.odds.team2) && `${game.team1} is more likely to win`) || `${game.team2} is more likely to win`

Step by step explanation, the above is equivalent to:

((a) && `string b`) || `string c`

• string b and string c are both string so they are truthy values.
• If a=true then true && true will return the last value which is string b.
  • it then becomes

    `string b` || `string c`
    

  • true || true will returns the first truthy value so the final result is string b.
• If a=false then false && true will return the first falsy value which is a.
  • it then becomes

    a || `string c`
    

  • false || true will return the first truthy value so the final result is string c.