Logical Assignment Operators in JS Complete Guide

let title = "";
title ||= "Untitled";
console.log(title); // "Untitled" — empty string is falsy
 
let count = 0;
count ||= 10;
console.log(count); // 10 — 0 is falsy (use ??= if 0 is valid)
 
let name = "Alice";
name ||= "Default";
console.log(name); // "Alice" — truthy, assignment skipped

function renderCard(data) {
  data.title       ||= "No Title";
  data.description ||= "No description available.";
  data.thumbnail   ||= "/images/placeholder.png";
  return data;
}

let session = { user: "Alice", token: "abc123" };
session &&= { ...session, lastActivity: Date.now() };
console.log(session); // { user: "Alice", token: "abc123", lastActivity: ... }
 
let expired = null;
expired &&= { ...expired, lastActivity: Date.now() };
console.log(expired); // null — falsy, assignment skipped

let errorMessage = "Network timeout";
 
// Only transform if there's an existing message
errorMessage &&= `Error: ${errorMessage}`;
console.log(errorMessage); // "Error: Network timeout"
 
let noError = "";
noError &&= `Error: ${noError}`;
console.log(noError); // "" — falsy, assignment skipped

const form = {
  name: "  Alice  ",
  email: "alice@example.com",
  bio: "",
};
 
// Only trim non-empty strings
form.name  &&= form.name.trim();
form.email &&= form.email.trim();
form.bio   &&= form.bio.trim(); // skipped — "" is falsy

let timeout = 0;
timeout ??= 3000;
console.log(timeout); // 0 — not nullish, kept
 
let retries = null;
retries ??= 3;
console.log(retries); // 3 — null is nullish, assigned
 
let host = undefined;
host ??= "localhost";
console.log(host); // "localhost" — undefined is nullish, assigned

function initConfig(config = {}) {
  config.host    ??= "localhost";
  config.port    ??= 3000;
  config.debug   ??= false;
  config.retries ??= 3;
  config.timeout ??= 5000;
  return config;
}
 
initConfig({ port: 0, debug: true });
// { port: 0, debug: true, host: "localhost", retries: 3, timeout: 5000 }
// port=0 is preserved (not nullish)

const obj = {
  _value: "existing",
  set value(v) {
    console.log("setter called with:", v);
    this._value = v;
  },
  get value() {
    return this._value;
  },
};
 
// ??= does NOT trigger the setter (left side is not nullish)
obj.value ??= "new";
// No "setter called" log — setter was never invoked
 
// Compare with: obj.value = obj.value ?? "new";
// This ALWAYS triggers the setter, even when the value doesn't change

// Old: if-based default
if (obj.x === undefined || obj.x === null) {
  obj.x = defaultValue;
}
// New:
obj.x ??= defaultValue;
 
// Old: OR-based default
obj.x = obj.x || defaultValue;
// New:
obj.x ||= defaultValue;
 
// Old: conditional update
if (obj.x) {
  obj.x = transform(obj.x);
}
// New:
obj.x &&= transform(obj.x);

const settings = { volume: 0 };
 
settings.volume ||= 50; // 50 — BUG: 0 is valid but was overwritten
settings.volume ??= 50; // 0 — correct: 0 is preserved

const obj = {};
// obj.a.b ??= "value"; // TypeError: Cannot read property 'b' of undefined
 
// You need optional chaining beforehand, but ??= does not chain:
if (obj.a != null) {
  obj.a.b ??= "value";
}
 
// Or initialize the path first:
obj.a ??= {};
obj.a.b ??= "value";