JavaScript Short Circuiting

Sometimes the first value in a logical expression is enough to decide the result, so JavaScript just skips the second one entirely. That's what we call short circuiting.

You'll see this with the || (OR) and && (AND) operators. It helps you write shorter code and avoid running things that don't need to run.

Think of || as a scout looking for the first truthy value. If the left side is truthy, it grabs it and skips the right side completely. If the left is falsy, it takes whatever's on the right.

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 be null, undefined, or an empty string.

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 those are valid values in your case, 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)

When working with numbers, booleans, or empty strings that carry real meaning, always prefer ?? over ||.

&& works the opposite way from ||. It returns the first falsy value it finds. If the left side is falsy, it stops right there. If the left is truthy, it returns the right side.

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 only falls back to the right side when the left 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.

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 = "Alice";
admin ||= "Guest";
console.log(admin); // Output: Alice  (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 value. 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.