× Full Screen Image

Short Circuiting

In JavaScript, short circuiting is a behavior where the second part of a logical expression is skipped if the first part is already enough to decide the result.

This works with the || (OR) and && (AND) operators. It makes code shorter and can also prevent unnecessary function calls or errors.

The || operator returns the first truthy value it finds. If the left side is truthy, the right side is never evaluated. If the left side is falsy, it moves on and returns the right side.

javascript

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

A common use is providing a default value when a variable might be null, undefined, or an empty string.

javascript

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.

javascript

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.

javascript

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 ||.

The && operator returns the first falsy value it finds. If the left side is falsy, it stops right there. If the left side is truthy, it evaluates and returns the right side.

javascript

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.

javascript

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 was introduced in ES2020. It returns the right side only when the left side is null or undefined. Unlike ||, it does not treat 0, "", or false as missing values.

javascript

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 introduced three logical assignment operators that combine logical operators with assignment. They let you assign a value to a variable only under certain conditions.

||= (OR Assignment)

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

javascript

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.

javascript

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.

javascript

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.
Previous
Next