Logical Assignment

ES6+ Logical Assignment Overview

Logical assignment operators combine logical operations with assignment. They assign a value to a variable only when a specific condition is met, which makes default-value and conditional-update code shorter and easier to read.

JavaScript provides three logical assignment operators: ||=, &&=, and ??=. Each one behaves like its logical operator counterpart, but also updates the left-hand variable when needed.

Basic Logical Assignment Example

let username = "";
let role = "admin";
let theme = null;

username ||= "Guest";
role &&= "super-admin";
theme ??= "light";

console.log(username);
console.log(role);
console.log(theme);

Each operator checks the current value first and assigns the right-hand value only when its condition is satisfied.

How Logical Assignment Works

Logical assignment is shorthand for a common pattern where you test a variable and update it only under certain conditions.

Logical OR Assignment (||=)

let cache = null;

cache ||= {
  users: [],
  loaded: false
};

console.log(cache);

let count = 0;
count ||= 10;

console.log(count);

||= assigns the right-hand value when the left side is falsy. It is similar to writing x = x || value.

Logical AND Assignment (&&=)

let user = {
  name: "Alex",
  role: "admin"
};

user &&= {
  ...user,
  lastLogin: "2026-06-27"
};

console.log(user);

let emptyUser = null;
emptyUser &&= {
  name: "Guest"
};

console.log(emptyUser);

&&= assigns the right-hand value only when the left side is truthy. This is useful for conditional updates on existing values.

Nullish Coalescing Assignment (??=)

let pageSize = 0;
let theme = null;
let debug = false;

pageSize ??= 20;
theme ??= "light";
debug ??= true;

console.log(pageSize);
console.log(theme);
console.log(debug);

??= assigns only when the left value is null or undefined. Unlike ||=, it preserves valid values such as 0 and false.

Logical Assignment Operators Comparison

??= vs ||= by Left Value

Logical Assignment on Object Properties

const settings = {
  theme: null,
  pageSize: 0,
  debug: false
};

settings.theme ??= "light";
settings.pageSize ??= 20;
settings.debug ??= true;

console.log(settings);

Logical assignment works with object properties and is commonly used to initialize missing config values without overwriting valid ones.

Lazy Initialization Pattern

const cache = new Map();

function getUserCache(userId) {
  let entry =
    cache.get(userId);

  entry ??= {
    profile: null,
    requests: []
  };

  cache.set(userId, entry);
  return entry;
}

console.log(getUserCache(1));
console.log(getUserCache(1));

??= is ideal for lazy initialization because it creates a default object only when the current value is missing.

Configuration Defaults

function createAppConfig(
  options = {}
) {
  options.theme ??= "light";
  options.pageSize ??= 20;
  options.showSidebar ??= true;

  return options;
}

const config =
  createAppConfig({
    pageSize: 0,
    showSidebar: false
  });

console.log(config);

Use ??= when setting defaults for configuration objects where zero and false may be intentional values.

Shorthand vs Expanded Form

let apiUrl = null;

// Expanded
if (apiUrl == null) {
  apiUrl = "https://api.example.com";
}

// Logical assignment
apiUrl ??=
  "https://api.example.com";

console.log(apiUrl);

Logical assignment operators reduce repetitive conditional assignment code while keeping the intent clear.

Common Logical Assignment Use Cases

• Setting default configuration values.
• Lazy initialization of caches and lookup tables.
• Updating objects only when they already exist.
• Providing fallback values for missing state.
• Initializing optional function parameters indirectly.
• Reducing boilerplate in setup and bootstrap code.
• Preserving valid falsy values with ??=.

Logical Assignment Best Practices

• Use ??= when only null or undefined should trigger assignment.
• Use ||= when any falsy value should trigger assignment.
• Use &&= for conditional updates on truthy values.
• Prefer ??= for config defaults over ||= in most apps.
• Keep assignments readable and avoid long chained expressions.
• Do not mix logical assignment operators without clear intent.
• Choose the operator that matches the business rule exactly.

Common Logical Assignment Mistakes

• Using ||= when ??= is the correct choice.
• Expecting &&= to assign on falsy values.
• Confusing logical assignment with comparison operators.
• Overwriting valid 0, "", or false with ||=.
• Using logical assignment where explicit if logic would be clearer.
• Assuming the right-hand side is always evaluated.
• Applying the wrong operator to object property initialization.

Key Takeaways

• Logical assignment combines logical checks with assignment.
• ||=, &&=, and ??= each have different conditions.
• ??= is usually best for default values in modern code.
• These operators reduce repetitive initialization patterns.
• Choose the operator based on whether falsy values are valid.