Simple Assignment
The `=` operator assigns a value to a variable. It is the base for every other assignment operator.
Assignments evaluate from right to left, so `a = b = 5` sets both values to 5.
JavaScript Tutorial
JavaScript Assignment Operators
Assignment operators set or update values stored in variables. They are used everywhere from counters to state updates.
Beyond `=`, JavaScript offers compound and logical assignment operators to keep updates concise and intentional.
Why We Need It
Writing updates clearly prevents bugs and makes code easier to scan. Compound and logical assignments reduce repetition.
Knowing the difference between ||= and ??= avoids accidentally overwriting valid values like 0 or empty strings.
Syntax
x = y
x += y, x -= y, x *= y, x /= y, x %= y, x **= y
x &&= y, x ||= y, x ??= y
x &= y, x |= y, x ^= y, x <<= y, x >>= y, x >>>= yBasic Example
1. Basic and Compound Assignment
let total = 10;
total += 5; // 15
total -= 3; // 12
total *= 2; // 24
total /= 4; // 6
console.log(total);Compound assignment keeps updates short and readable.
Real World Example
2. Exponentiation and Modulo Assignment
let value = 3;
value **= 2; // 9
value %= 5; // 4
console.log(value);Use **= for powers and %= for cycling or wrapping values.
Multiple Use Cases
Compound Assignment
Compound operators combine math with assignment, like `+=` or `*=`.
They keep code concise and reduce repetition when updating counters, totals, and scores.
Logical Assignment
Logical assignment operators (`&&=`, `||=`, `??=`) update a variable only when a logical condition is met.
They are great for default values and guard-style updates without extra if-statements.
Bitwise Assignment
Bitwise assignment operators (like `&=` or `<<=`) combine bitwise operations with assignment.
These are mainly used for flags, permissions, and low-level optimizations.
More Examples
3. Logical Assignment
let name = "";
name ||= "Guest"; // empty string is falsy, so set fallback
let score = 0;
score ||= 10; // score becomes 10 (because 0 is falsy)
let count = 0;
count ??= 5; // count stays 0 because it's not null/undefined
console.log(name, score, count);Use ||= and &&= for truthy/falsy checks, and ??= for nullish-only checks.
4. Destructuring Assignment
const user = { id: 7, role: "admin" };
const { id, role } = user;
console.log(id, role);Destructuring is a readable way to assign multiple variables at once.
Comparison
Without
let total = 10;
total = total + 5;
let name = "";
if (!name) {
name = "Guest";
}With
let total = 10;
total += 5;
let name = "";
name ||= "Guest";Common Mistakes and Fixes
Using ||= when 0 is valid
Prefer ??= to preserve 0, false, and empty strings.
Overusing chained assignments
Chaining like a = b = c can reduce readability.
Mixing bitwise and numeric math
Bitwise ops convert values to 32-bit integers.
Forgetting right-to-left evaluation
Remember assignments evaluate from right to left.
Interview Questions
What is the difference between ||= and ??=?
||= assigns on any falsy value, while ??= assigns only for null or undefined.
Why use compound assignment?
It makes updates shorter and easier to read.
Does assignment return a value?
Yes, the assigned value, which enables chaining (though it can hurt clarity).
Practice Problem
Practice: Build a score tracker that updates total points using compound assignment.
let score = 0;
// Add 10, subtract 3, then double
One Possible Solution
let score = 0;
score += 10;
score -= 3;
score *= 2;
console.log(score);Frequently Asked Questions
What is a compound assignment operator?
It combines an operation with assignment, like `x += 2` instead of `x = x + 2`.
When should I use ??= ?
Use it when you only want to assign a default for null or undefined values.
Do assignment operators return a value?
Yes. The assignment expression evaluates to the assigned value.
Is destructuring an assignment?
Yes, destructuring assigns values to variables from arrays or objects.
Try It Yourself
Run the assignment examples and edit the values to see how each operator updates state.