JS Assignment

JavaScript Assignment: Standard, Compound, & Logical Assignment

Assignment operators evaluate the right-hand operand and assign the resulting value to the left-hand variable. ES2021 introduced logical assignment operators (&&=, ||=, ??=) combining logical short-circuiting with assignment.

Assignment Categories

flowchart TD
    Assign["Assignment Operators"] --> Basic["Basic Assignment (=)"]
    Assign --> Compound["Compound Arithmetic (+=, -=, *=, /=, %=, **=)"]
    Assign --> Logical["Logical Assignment (&&=, ||=, ??=)"]

Assignment Operators Reference

Practical Code Example

// Demonstrating compound and logical assignment operators

// 1. Compound Arithmetic Assignment
let score = 100;
score += 50;  // 150
score *= 2;   // 300
score %= 70;  // 20
console.log(`Final Compound Score: ${score}`);

// 2. Logical Nullish Assignment (??=)
let userConfig = {
  theme: undefined,
  maxConnections: 0 // Valid falsy number
};

// Assign default ONLY if null or undefined
userConfig.theme ??= "dark";             // Assigned "dark" because theme was undefined
userConfig.maxConnections ??= 10;        // NOT assigned! 0 is preserved

console.log("Config after ??= :", userConfig);

// 3. Logical OR Assignment (||=)
let userTitle = "";
userTitle ||= "Guest User"; // Assigned "Guest User" because "" is falsy
console.log(`User Title after ||= : "${userTitle}"`);

// 4. Destructuring Assignment
const point = { x: 10, y: 25 };
let posX, posY;
({ x: posX, y: posY } = point);
console.log(`Destructured Positions: X=${posX}, Y=${posY}`);

Best Practices & Gotchas

• Use ??= to Preserve Falsy Defaults: Prefer ??= over ||= when configuring optional defaults where 0 or false are valid settings.
• Wrap Destructuring Assignments in Parentheses: When destructuring into pre-declared variables without let/const, wrap the expression in (...) to avoid syntax errors.
• Avoid Chain Assignments: let a = b = c = 5; implicitly creates global variables b and c in non-strict mode.

Self-Check Challenge

Given let opts = { timeout: 0 }; opts.timeout ||= 5000; opts.delay ??= 1000;, what are opts.timeout and opts.delay?