Assignment Operators

Assignment operators store a value in a variable, property, or array element. The most basic one is =, but JavaScript also ships a family of compound operators (+=, -=, *=, …) that combine an arithmetic or bitwise operation with assignment, plus the modern logical assignment operators (&&=, ||=, ??=) introduced in ES2021. Knowing which to reach for keeps your code concise and your intent obvious.

The basic assignment operator

The single = evaluates the expression on its right and binds the result to the target on its left. It is not equality — that is == or ===. Assignment also returns the assigned value, which is why you can chain it.

let count = 10;
const name = "Ada";

// Chaining: a, b, and c all become 0
let a, b, c;
a = b = c = 0;

console.log(a, b, c);

Output:

0 0 0

Assignment chaining evaluates right-to-left. With let x = y = 5, only x is declared — y becomes an implicit global unless already declared, which throws in strict mode. Declare every variable explicitly.

For objects and arrays, assignment copies the reference, not the underlying value. Mutating through one binding is visible through the other.

const original = { theme: "dark" };
const alias = original;
alias.theme = "light";

console.log(original.theme);

Output:

light

Compound assignment operators

Compound operators apply an operation between the current value and the right-hand operand, then store the result back into the target. They are pure shorthand: x += 5 is equivalent to x = x + 5.

let total = 100;
total += 20;   // 120
total -= 5;    // 115
total *= 2;    // 230
total /= 10;   // 23
total %= 5;    // 3
total **= 3;   // 27

console.log(total);

Output:

27

The same shorthand works for string concatenation and bitwise operations.

let path = "/users";
path += "/42";          // "/users/42"

let flags = 0b0001;
flags |= 0b0100;        // 0b0101 -> 5
flags &= 0b0110;        // 0b0100 -> 4
flags <<= 1;            // 0b1000 -> 8

console.log(path, flags);

Output:

/users/42 8

Here is the full set, with each operator and its expanded form.

Operator	Example	Equivalent to	Operation
+=	x += y	x = x + y	Add / concatenate
-=	x -= y	x = x - y	Subtract
*=	x *= y	x = x * y	Multiply
/=	x /= y	x = x / y	Divide
%=	x %= y	x = x % y	Remainder
**=	x **= y	x = x ** y	Exponentiation
&=	x &= y	x = x & y	Bitwise AND
|=	x |= y	x = x | y	Bitwise OR
^=	x ^= y	x = x ^ y	Bitwise XOR
<<=	x <<= y	x = x << y	Left shift
>>=	x >>= y	x = x >> y	Sign-propagating right shift
>>>=	x >>>= y	x = x >>> y	Zero-fill right shift

Logical assignment operators

ES2021 added three operators that combine a logical check with assignment. Crucially, they short-circuit: the assignment only happens when the logical condition warrants it, so side effects on the right-hand side are skipped when not needed.

The &&= operator assigns only when the current value is truthy.

let user = { name: "Ada", role: "" };
user.name &&= user.name.trim();   // runs: name is truthy
user.role &&= "admin";            // skipped: role is "" (falsy)

console.log(user);

Output:

{ name: 'Ada', role: '' }

The ||= operator assigns only when the current value is falsy — handy for defaults.

const config = { retries: 0 };
config.timeout ||= 3000;   // undefined is falsy -> set
config.retries ||= 5;      // 0 is falsy -> overwritten to 5 (watch out!)

console.log(config);

Output:

{ retries: 5, timeout: 3000 }

That last case is a common trap: 0, "", and false are all falsy, so ||= clobbers them. When you only want to fill in null or undefined, use ??= (nullish assignment) instead.

const settings = { volume: 0, label: null };
settings.volume ??= 50;    // 0 is NOT nullish -> kept
settings.label ??= "Untitled";  // null is nullish -> set

console.log(settings);

Output:

{ volume: 0, label: 'Untitled' }

Operator	Assigns when current value is	Expands to (short-circuit)
&&=	truthy	x && (x = y)
||=	falsy	x || (x = y)
??=	null or undefined	x ?? (x = y)

Reach for ??= over ||= whenever 0, "", or false are legitimate values. It prevents the classic bug where a valid zero gets silently replaced by a default.

Best Practices

• Prefer compound operators (+=, *=, …) over the manual x = x + ... form for brevity and to avoid repeating the target.
• Use ??= for defaults unless you specifically want falsy values like 0 and "" to trigger replacement — then ||= is correct.
• Avoid assignment chaining (a = b = c); it is easy to misread and can leak globals. Declare and assign each binding on its own line.
• Never confuse = (assign) with === (compare); a stray = inside an if is a frequent source of bugs.
• Remember that assigning objects or arrays copies the reference — clone with the spread operator or structuredClone when you need an independent copy.
• Lean on the short-circuit behavior of logical assignment to skip expensive right-hand expressions you do not actually need to evaluate.

Related Topics

• Variables
• Arithmetic operators
• Logical operators
• Primitives vs references
• Strict mode