AND / OR operators, Short-Circuiting and Nullish Coalescing

Introduction

Short Circuiting and Nullish Coalescing are mechanisms available in javascript to enhance code efficiency and readability, by providing special way of evaluating values.

It relies on the logical operators && and ||, while nullish Coalescing relies on the operator ??, Both tools are powerful, but have to be used in the right context to shine

A detailed comparaison

Get some coffee and buckle up, we’re going full technical.

Short-Circuiting

Short-Circuiting Applies to the logical operators && (AND) and || (OR) in JavaScript, But these operators originate from a neighbour field of science: Logical Gates in Electronics

Logic Gates

Logical Gate AND

In Electronics Engineering, The AND logical gate is nothing more but a circuit that represents the boolean logic:

A.B meaning A and B, which is written in programming as A && B

Let’s Imagine two switches connected in series with a light bulb; For the bulb (output) to light up 1 / ON / Truthy, both switches (inputs) need to be closed 1 / ON / Truthy.

If either switch is open 0 / OFF / Falsy, the circuit is broken, and the bulb stays off (0).

Now if we consider the light bulb to be Q , Q will only evaluate to true if both A and B allow the current to pass through, else Q will be falsy.

Therefore, the expression A + B = Q will only evaluate to 1(true) if A=1 and B=1, which is illustrated by what is called in electronics: a truth table.

Logical Operator AND

The expression might differ in programming, but the logic is the same, Q will only be truthy if both A and B are truthy

// AND operator
Q = A && B // A and B Must Have truthy values in order for Q to be truthy

// Similar example using only if statement
if (!A) {
Q = false;} else if (!B) {
Q = false;} else {
Q = true;}

Logical Gate OR

Similarly to the AND gate, the OR gate will represent a boolean logic, the Boolean logic for an OR circuit is represented by the plus symbol + (OR). So, for an OR circuit, the Boolean logic expression would be:

A + B which means A OR B, which is written in programming as A || B

Let’s revisit our previous light bulb example, If either switch (input) is closed (1), the light (output) turns on (1). Only when both switches are open (0) will the light stay off (0).

The logic or Boolean expression for an OR gate is A+B = Q which means: If A or B is true, then Q is true, below is the truth table for an OR gate.

Logical Operator OR

// OR operator
Q = A || B // A OR B Must be truthy in order for Q to be truthy

// Similar example using only if statement
if (A) {
Q = true;} else if (B) {
Q = true;} else {
Q = false;}

The Why to Logical Operators

As seen in the precious examples, logical operators are cleaner and shorter to write but that’s not convincing enough right ?

When evaluating an expression involving these operators, JavaScript only evaluates one side of the expression if necessary, which is a big win in performance when evaluating conditions that come with costly operations to resolve;

For && (AND):

If the left side is false, the entire expression is false without evaluating the right side.

For || (OR):

If the left side is true, the entire expression is true without evaluating the right side.

Example:

const isLoggedIn = true;
const hasPremium = true;
const isAdmin = false;
const isGuest = false;

const canViewPremium = isLoggedIn && hasPremium //canViewPremium = true
const canViewAdmin = isLoggedIn && isAdmin //canViewAdmin = false
const canNavigate = isLoggedIn || isGuest // will default to true because isLoggedIn is true

we can also use logical operators for conditional execution of functions

const isLoggedIn = true;
const isAdmin = false;
const hasPremium = true;

isLoggedIn && RedirectToHome() //the function will be executed
isAdmin && isLoggedIn && RedirectToAdminPanel() //the function will not be executed
(isLoggedIn && (isAdmin || hasPremium)) && RedirectToPremium() //the function will be executed

one more use case for logical operators is fallback values or default values using the OR operator.

these come in handy when dealing with values that could be falsy: undefined, null, false, 0, Empty string (pay attention to what we are considering falsy in here)

const user = {}

const isAdmin = user.isAdmin || false // if user.isAdmin is not defined, isAdmin defaults to false  

Nullish Coalescing Operator (??) (Introduced in ES2020)

The Nullish Coalescing Operator was introduced to complement the logical OR operator by providing a way to assign a default value ONLY if the left operand is null or undefined.

It obviously differs from || (OR), because ||(OR) considers all falsy values (including false, 0, and an empty string “”) as equivalent to null or undefined, while ?? considers only null and undefined to be falsy

Example:

let user = {
name: ”};
let name1 = user.name || “Default User“; // name1 will be Default User
let name2 = user.name ?? “Default User“; // name2 will be ”

let maybeValue = 0;
let result = maybeValue ?? 10; // ‘result’ will be 0 (falsy but not null/undefined)