JS Assignment
In this page:
Basic Compound Assignment
+=, -=, *=, and /= each combine an arithmetic operation with assignment, updating a variable based on its own current value in a single, compact statement.
Note: Compound assignment operators read naturally as 'variable becomes variable operator value', which helps when first learning to parse them.
Warning: Compound assignment requires the variable to already exist and hold a value, it cannot be used as the very first declaration.
Example: Basic Compound Assignment
let total = 10;
total += 5;
total -= 2;
total *= 2;
total /= 4;
console.log(total);Remainder and Exponent Assignment
%= applies the remainder operation and assigns the result back, and **= applies exponentiation and assigns the result back, following the exact same compact pattern as the other compound operators.
Note: %= is handy for wrapping a counter back to zero once it reaches a limit, a common pattern in rotating displays or carousels.
Warning: **= with a fractional exponent produces a decimal result, which is easy to overlook if you expect only whole numbers.
Example: Remainder and Exponent Assignment
let counter = 7;
counter %= 3;
console.log(counter);
let base = 2;
base **= 3;
console.log(base);Logical AND Assignment (&&=)
&&= only assigns a new value to a variable if that variable is currently truthy, leaving it unchanged if it's already falsy, useful for updating a value only when it's meaningfully present.
Note: Think of &&= as saying 'only update this if it currently has something in it'.
Warning: &&= will not assign anything if the current value is falsy, including 0 or an empty string, which can surprise developers expecting it to always run.
Example: Logical AND Assignment (&&=)
let session = "active";
session &&= "updated";
console.log(session); // "updated"
let empty = "";
empty &&= "updated";
console.log(empty); // "" stays unchangedLogical OR Assignment (||=)
||= assigns a new value only if the variable is currently falsy, commonly used to provide a default value for something that might be missing, empty, or zero. Because 0 and '' are falsy too, ||= can overwrite values you actually wanted to keep, which is exactly why ??= exists.
Note: ||= is a concise way to fill in a fallback default for any falsy value, including 0, empty strings, and undefined.
Warning: Because || treats 0 and empty strings as falsy, ||= will overwrite an intentionally set 0 or '', which is not always the desired behavior.
Example: Logical OR Assignment (||=)
let username = "";
username ||= "Guest";
console.log(username); // "Guest", "" is falsyNullish Coalescing Assignment (??=)
??= assigns a new value only if the variable is currently null or undefined, unlike ||=, it treats other falsy values like 0 and empty strings as valid and leaves them untouched.
Note: Prefer ??= over ||= specifically when 0 or an empty string should count as a valid, intentional value that shouldn't be overwritten.
Warning: Confusing ??= with ||= is easy since they look similar, but they behave differently for falsy-but-not-nullish values like 0.
Example: Nullish Coalescing Assignment (??=)
let count = 0;
count ??= 10;
console.log(count); // 0 stays, only null/undefined trigger ??=
let missing;
missing ??= 10;
console.log(missing); // 10- Writing count =+ 1 instead of count += 1, the space and operator order matters, =+ is actually assignment followed by unary plus.
- Using ??= when you actually wanted ||=, ?? only treats null and undefined as missing, while || treats any falsy value as missing.
- Forgetting that compound assignment operators modify the variable in place, they don't create a new variable.
- Compound operators like +=, -=, *=, /=, and %= combine an operation with assignment in one step.
- **= applies exponentiation and assignment together, following the same pattern as the other compound operators.
- &&=, ||=, and ??= conditionally assign a value only when certain logical conditions about the current value are met.
Standard compound assignment operators work in every browser; &&=, ||=, and ??= are modern additions supported in all current browser versions.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: