Platform under construction

Operators & Expressions

Intermediate

Assignment Operators

Assignment operators put values into names or properties. Compound assignment changes a value using its current value.

let items = 5;

items += 1;  // 6
items *= 12; // 72

Operators & Expressions

Assignment is a side effect, so make it easy to see.

The basic assignment operator is =. It stores the right-hand value into the left-hand target. That target can be a variable, object property or array position.

Compound assignment combines an operation with assignment: +=, -=, *=, /=, %= and **=. Modern JavaScript also has logical assignment operators such as ||=, &&= and ??=.

Assignment expressions return a value, but professional code usually avoids hiding assignment deep inside other expressions. When state changes, make the change obvious.

=

Assigns a value to a variable or property.

+= and -=

Adds or subtracts and stores the result back into the same target.

*=, /=, %=, **=

Numeric compound assignments for calculations.

??=, ||=, &&=

Logical assignment for defaults and conditional state updates.

Examples

Operators are small symbols with big consequences.

Readable state updates

let itemCount = 5;
const hasExtraItem = true;

if (hasExtraItem) {
  itemCount += 1;
}

user.owner ??= "Default owner";

Hidden assignment inside another expression

let itemCount = 5;
let total;

if ((total = itemCount * 12) > 1000) {
  console.log("Large total");
}

// This works, but it hides a state change inside a condition.

Rules that matter

Make expression intent visible.

JavaScript operators are compact, but compact is not always clear. Convert values before comparing or calculating, use strict checks by default and add parentheses when a future reader would otherwise need to remember a precedence table.

Use assignment as a visible action

A changed value should be easy to spot while reading.

Use compound assignment for simple updates

count += 1 is clearer than count = count + 1.

Avoid nested assignment

Assignment inside conditions or function calls is legal, but often too clever.

Use ??= for missing defaults

It only assigns when the current value is null or undefined.

Be careful with ||= defaults

It overwrites valid falsy values such as 0 and empty strings.

Prefer const when no reassignment is needed

Assignment is not a habit. It should communicate change.

Production thinking

Readable expressions prevent silent bugs.

Why does this matter?

Assignment changes program state. If state changes are hidden, debugging becomes guesswork.

Accessibility

Assignment often updates aria state, messages and form status. Hidden state changes can leave the visible UI out of sync.

Production note

Production code benefits from predictable, local state changes. Avoid assignment patterns that require mental gymnastics.

SEO note

If assignment controls rendered content, unclear state updates can lead to missing or stale page data.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change ??= to ||= and set owner to an empty string.
Add a remove button that uses itemCount -= 1.
Rewrite itemCount += 1 as itemCount = itemCount + 1.

Practice assignment

Do this before moving to the next topic.

Write three compound assignment examples.
Use ??= to set a default value.
Find one assignment that would be clearer as a separate line.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Assignment Operators.