What is logical assignment (||=, &&=, ??=)?
Logical assignment operators combine a logical check with assignment, assigning only under certain conditions.
||= — assigns only if the current value is falsy.
&&= — assigns only if the current value is truthy.
??= — assigns only if the current value is null or undefined.
Handy for setting defaults concisely, e.g. options.timeout ??= 3000.
// ??= — assign if null/undefined (best for defaults)
let user = { name: 'John' };
user.email ??= 'default@email.com'; // Assigns (email is undefined)
user.name ??= 'Anonymous'; // Does NOT assign (name exists)
console.log(user); // { name: 'John', email: 'default@email.com' }
// ||= — assign if falsy
let count = 0;
count ||= 10; // Assigns! (0 is falsy) — probably wrong
count ??= 10; // Does NOT assign (0 is not null/undefined) — correct
// &&= — assign if truthy
let config = { debug: true, verbose: false };
config.debug &&= process.env.NODE_ENV !== 'production'; // Update only if truthy
// Practical: initialize properties
function processOptions(opts) {
opts.timeout ??= 5000;
opts.retries ??= 3;
opts.headers ??= {};
return opts;
}
processOptions({ timeout: 10000 });
// { timeout: 10000, retries: 3, headers: {} }??= assigns only for null/undefined — preserves 0, '', false. ||= assigns for ALL falsy values (0, '', false, null, undefined). The count example shows the difference: 0 ||= 10 wrongly replaces 0, but 0 ??= 10 preserves it. &&= only updates if the current value is truthy. processOptions uses ??= for safe defaults.
??= is the most useful (defaults without replacing 0/''). Show the 0 example where ||= is wrong but ??= is correct. &&= for conditional updates is less common.
These are ES2021 — know the year. The processOptions pattern is a clean practical use.