JavaScript Short Circuiting

Short circuiting happens when JavaScript stops evaluating a logical expression because the result is already determined.

You will see this with || (OR) and && (AND). It keeps code concise and prevents unnecessary work.

These operators return one of the original operands, not necessarily true or false. The truthiness of each operand decides whether JavaScript evaluates the next part.

When you see left operator right, JavaScript evaluates the left side first. Use this decision tree to predict both the returned value and whether the right side runs.

function logFallback() {
  console.log("The right side ran");
  return "fallback";
}

console.log(0 || logFallback());  // logs, then "fallback"
console.log("JS" || logFallback()); // no log, then "JS"
console.log(0 ?? logFallback());  // no log, then 0

The || operator returns the first truthy value it finds. If the left operand is truthy, it returns that operand and does not evaluate the right side. If the left operand is falsy, it evaluates and returns the right side.

console.log(0 || "Hello");      // Output: Hello
console.log("" || "Default");   // Output: Default
console.log("JS" || "Default"); // Output: JS
console.log(null || "Fallback");// Output: Fallback

You'll often use this to set a default value when a variable might contain any falsy value, including null, undefined, an empty string, 0, or false.

let userName = "";
let displayName = userName || "Guest";
console.log(displayName); // Output: Guest

The || operator is often used instead of a ternary operator when you just want to provide a fallback value. Both approaches work, but || is shorter.

let age = null;

// Using ternary
let result1 = age !== null ? age : 18;

// Using || (shorter)
let result2 = age || 18;

console.log(result1); // Output: 18
console.log(result2); // Output: 18

Keep in mind that || treats any falsy value (like 0, "", or false) as a missing value. If only null and undefined should trigger the fallback, use the ?? operator instead (covered below).

One thing to watch out for with || is that it treats 0, "", and false as falsy, even though those might be valid values in your program.

let score = 0;
let display = score || "No score"; // 0 is falsy!
console.log(display); // Output: No score  (not what we want)

// Fix: use ?? instead
let display2 = score ?? "No score";
console.log(display2); // Output: 0  (correct)

Use ?? when values such as 0, false, or "" are valid values and should not trigger the fallback.

&& works the opposite way from ||. It returns the first falsy operand. If all operands are truthy, it returns the last operand. If the left side is falsy, it stops right there; otherwise, it evaluates the next operand.

console.log(0 && "Hello");      // Output: 0     (left is falsy, stop)
console.log("JS" && "Hello");   // Output: Hello (left is truthy, return right)
console.log(null && "World");   // Output: null  (left is falsy, stop)

This is useful when you want to do something only if a condition is true, without writing a full if statement.

You can use && to call a function only when a condition is true. This is a clean way to replace a simple if statement.

function logMessage() {
  console.log("User is logged in!");
}

let isLoggedIn = true;

// Traditional if statement
if (isLoggedIn) {
  logMessage();
}

// Shorter with &&
isLoggedIn && logMessage(); // Output: User is logged in!

If isLoggedIn is false, the function is never called. Use this pattern carefully so your code stays readable.

The ?? operator (added in ES2020) is like a more careful version of ||. It evaluates the right side only when the left side is null or undefined, so it won't replace 0, "", or false the way || would.

let count = 0;
console.log(count || 10);  // Output: 10  (wrong if 0 is valid)
console.log(count ?? 10);  // Output: 0   (correct)

let name = null;
console.log(name ?? "Anonymous"); // Output: Anonymous

let title = "";
console.log(title ?? "Untitled"); // Output: ""  (empty string is kept)

Use ?? when you only want to fall back for null or undefined, not for all falsy values.

JavaScript does not allow ?? to be mixed directly with || or &&. Add parentheses to make the intended order explicit, such as (value || fallback) ?? otherValue.

ES2021 gave us three shortcuts that combine logical operators with assignment. They let you update a variable only when certain conditions are met.

||= (OR Assignment)

Assigns the right side to the variable only if the variable is currently falsy.

let user = "";
user ||= "Guest";
console.log(user); // Output: Guest

let admin = "superuser";
admin ||= "Guest";
console.log(admin); // Output: superuser  (already truthy, no change)

&&= (AND Assignment)

Assigns the right side to the variable only if the variable is currently truthy.

let score = 10;
score &&= score * 2;
console.log(score); // Output: 20  (was truthy, so it got updated)

let empty = 0;
empty &&= 99;
console.log(empty); // Output: 0  (was falsy, no change)

??= (Nullish Assignment)

Assigns the right side to the variable only if the variable is currently null or undefined.

let config = null;
config ??= { theme: "dark" };
console.log(config); // Output: { theme: 'dark' }

let count = 0;
count ??= 100;
console.log(count); // Output: 0  (0 is not null/undefined, no change)

• Short circuiting skips evaluating the second operand when the first operand decides the result.
• || returns the first truthy value. Use it for fallback defaults when falsy values are not meaningful.
• && returns the first falsy operand, or the last operand if all operands are truthy. Use it to run code only when a condition is true.
• ?? returns the right side only when the left is null or undefined. Safe for 0, "", and false.
• ||= assigns a value if the variable is falsy.
• &&= assigns a value if the variable is truthy.
• ??= assigns a value if the variable is null or undefined.

What's next? Now that you understand short circuiting, let's make object code cleaner with enhanced object literals in the next tutorial.

• What is short circuiting in JavaScript?
• What is the difference between || and ?? in JavaScript?
• What are logical assignment operators in JavaScript?

Videos for this topic will be added soon.