← Back to JavaScript Course | Chapter 2: Functions & Objects | Lesson 2 of 10

JS Assignment

Imagine adjusting a thermostat, instead of always typing the full new target temperature, you can just tap a plus or minus button that adjusts the current setting by a step. JavaScript's compound assignment operators work the same way, instead of writing count = count + 1, you can write the shorter count += 1, adjusting a variable's existing value directly. These shortcuts show up constantly in real code, including the scripts powering interactive features across cookiescursor.com, so recognizing them quickly is a genuinely useful skill.

In this page:

  1. Basic Compound Assignment
  2. Remainder and Exponent Assignment
  3. Logical AND Assignment (&&=)
  4. Logical OR Assignment (||=)
  5. Nullish Coalescing Assignment (??=)
Syntax
javascript 
variable = value;
variable += value;  // also -=, *=, /=, %=, **=

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

javascript 
// Declare the variable `total`, set to `10`
// Declare the variable `total`, set to `10`
let total = 10;
total += 5;
total -= 2;
total *= 2;
total /= 4;
// Print `total` to the console
// Print `total` to the console
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

javascript 
// Declare the variable `counter`, set to `7`
// Declare the variable `counter`, set to `7`
let counter = 7;
counter %= 3;
// Print `counter` to the console
// Print `counter` to the console
console.log(counter);

// Declare the variable `base`, set to `2`
// Declare the variable `base`, set to `2`
let base = 2;
base **= 3;
// Print `base` to the console
// Print `base` to the console
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 (&&=)

javascript 
let session = "active";
session &&= "updated";
console.log(session); // "updated"

let empty = "";
empty &&= "updated";
console.log(empty); // "" stays unchanged

Logical 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 (||=)

javascript 
let username = "";
username ||= "Guest";
console.log(username); // "Guest", "" is falsy

Nullish 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 (??=)

javascript 
let count = 0;
count ??= 10;
console.log(count); // 0 stays, only null/undefined trigger ??=

let missing;
missing ??= 10;
console.log(missing); // 10
Live Example
Related Topics

JS Logical Assignment · JS Arithmetic · JS Data Types · JS Functions

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Writing count =+ 1 instead of count += 1, the space and operator order matters, =+ is actually assignment followed by unary plus.
  2. Using ??= when you actually wanted ||=, ?? only treats null and undefined as missing, while || treats any falsy value as missing.
  3. Forgetting that compound assignment operators modify the variable in place, they don't create a new variable.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson JS Arithmetic Next Lesson → JS Data Types

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.