JavaScript Assignment
Arithmetic gave you symbols that compute a new number. This lesson is about putting a value into a named box and updating that box later. Assignment is how variables get their contents — with = and with short forms like += that mean “take the old value, change it, store it again.”
What is assignment?
Assignment stores a value in a variable. The left side is the name. The right side is the value (or an expression that produces a value). After let points = 10;, the name points holds 10. Later lines can read that name or store a new value in it.
The operators at a glance
📊 Everyday assignment operators
| Operator | Means | Same as |
|---|---|---|
= |
store | (first store or full replace) |
+= |
add then store | x = x + … |
-= |
subtract then store | x = x - … |
*= |
multiply then store | x = x * … |
/= |
divide then store | x = x / … |
%= |
remainder then store | x = x % … |
Keep this sheet nearby. Every shortcut still assigns — it just folds the arithmetic into one statement. Beginners should be able to expand += back to x = x + … in their head.
let points = 10;
console.log(points);
let label = "ready";
console.log(label);
let total = 4 + 6;
console.log(total);
Reassign with let
With let, a later assignment replaces the stored value. That is normal for counters, scores, and form fields that change.
let score = 0;
console.log(score);
score = 10;
console.log(score);
score = score + 5;
console.log(score);
The Console shows 0, then 10, then 15. Each = writes a new value into score. Prefer const when the name should not change after the first store — const rejects a second assignment to that name.
Compound assignment (shortcuts)
Shortcuts update and store in one line. They keep the same name on the left.
let n = 8;
n += 2;
console.log(n);
n -= 3;
console.log(n);
n *= 2;
console.log(n);
n /= 4;
console.log(n);
n %= 3;
console.log(n);
Start at 8. After += 2 you have 10. After -= 3 → 7. After *= 2 → 14. After /= 4 → 3.5. After %= 3 → 0.5. Trace one shortcut at a time until the pattern feels automatic.
+= with text
+= also works when the stored value is a string — it appends more text. That is handy for building a message step by step.
let msg = "Hi";
msg += " ";
msg += "Sam";
console.log(msg);
let line = "score=";
line += 12;
console.log(line);
msg becomes "Hi Sam". line becomes "score=12" because joining a number onto a string turns the result into text. Same idea as the + trap from arithmetic — know whether you meant numbers or a message.
= stores; === compares
One equals sign stores. Three equals signs ask “are these the same value and type?” Mixing them up is a classic beginner bug: writing if (x = 5) stores 5 instead of comparing.
let x = 5;
console.log(x);
console.log(x === 5);
console.log(x === "5");
x = 9;
console.log(x === 9);
After let x = 5, the log of x is 5. x === 5 is true. x === "5" is false (number vs string). A later x = 9 stores a new value; then x === 9 is true. Comparison gets its own deep lesson next — here you only need the store-vs-compare contrast.
Update a counter on the page
Store a starting count, bump it with +=, and write the result into the page.
<!DOCTYPE html>
<html>
<head>
<title>Assignment — page counter</title>
</head>
<body>
<p id="out">…</p>
<script>
let clicks = 0;
clicks += 1;
clicks += 2;
let box = document.getElementById("out");
box.textContent = "clicks=" + clicks;
</script>
</body>
</html>
Start at 0, add 1, then add 2 → the page shows clicks=3. Change the shortcuts, refresh, and confirm the text updates. Real buttons can call the same idea later; this demo only shows store-and-update.
Try it yourself
- Store
let a = 3, loga, then assigna = 7and log again. - Start
let n = 10, runn += 4, logn. - From that
n, runn *= 2and log. - Build
let s = "Go"thens += "!"and log. - Log
7 === 7and7 === "7"side by side. - In the HTML demo, change only the second shortcut (the
+= 2), refresh, and read the new clicks value.
Common mistakes
- Writing
=when you meant===inside a condition - Trying to reassign a
constname after the first store - Forgetting the variable name on the left (
+= 5alone is not valid) - Assuming
+=only works with numbers — strings append too - Confusing assignment (store) with arithmetic (compute a new value without naming a target)
Summary
=stores a value in a variableletallows later stores;constkeeps the first store fixed+=-=*=/=%=update and store in one step+=can append text as well as add numbers=stores;===compares — do not swap them- Next: comparison — asking questions with
===,!==,<,>and friends
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top