Assignment Operators

By the end of this lesson, you will be able to assign values in JavaScript using = and update them with compound operators such as +=, -=, and ??=.

What it is

Assignment operators store a value in a variable, property, or element. The simplest one is =, which replaces the current value. Compound assignment operators combine a calculation with assignment: x += 5 means “take the current value of x, add 5, and store the result back in x.” Related terms include left-hand side, the target being assigned to, right-hand side, the value or expression being used, and logical assignment operators such as &&=, ||=, and ??=.

Why it matters

• It reduces repetition when updating counters, totals, or state.
• It makes common patterns like accumulating values easier to read.
• Logical assignment provides concise default values.
• It helps avoid mistakes from writing the same variable name twice.

Syntax or steps

Basic assignment:

let x = 10;

Compound assignment:

x += 5;

For simple variables, JavaScript reads the current left-hand side value, evaluates the right-hand side, applies the operation, and assigns the result. Examples include -=, *=, /=, %=, and **=.

Logical assignment operators are conditional:

• x ||= y assigns y only if x is falsy.
• x &&= y assigns y only if x is truthy.
• x ??= y assigns y only if x is null or undefined.

Example

let score = 10;
score += 5;
score -= 3;
score *= 2;
score /= 4;
score %= 4;
score **= 3;

let user = null;
user ??= "guest";

let theme = "";
theme ||= "light";

console.log(score, user, theme);

Part by part:

• score += 5 changes 10 to 15.
• score -= 3 changes 15 to 12.
• score *= 2 changes 12 to 24.
• score /= 4 changes 24 to 6.
• score %= 4 changes 6 to 2.
• score **= 3 changes 2 to 8.
• user ??= "guest" assigns "guest" because user is null.
• theme ||= "light" assigns "light" because "" is falsy.

Common mistakes

• Using ||= when you mean ??=. ||= treats 0, "", and false as missing values. If count = 0, count ||= 5 becomes 5. Use ??= to preserve valid falsy values.
• Forgetting string concatenation. If x is a string, x += 1 produces concatenation, not numeric addition. Convert with Number(x) when you need arithmetic.
• Assigning to const. const x = 1; x += 1; throws an error. Use let or var for values that change.
• Confusing assignment with comparison. if (x = 5) assigns 5 and is truthy. Use === for comparison.

When to use it

Practice

Guided exercise: Predict the output.

let total = 20;
total += 10;
total /= 2;
console.log(total);

Expected output: 15.

Challenge: What does this log?

let count = 0;
count ||= 5;
console.log(count);

Hint: 0 is falsy, so ||= assigns 5. If you wanted to keep 0, use ??=.

Quick check

Question: What does x ??= 10 do?

Answer: It assigns 10 to x only if x is null or undefined.

Summary

Assignment operators let you store and update values efficiently. Compound forms such as += and *= reduce repetition, while logical forms such as ??= make default handling concise. Choose the form that keeps the intent clear and preserves valid values.