Arithmetic & assignment
Use JavaScript's arithmetic operators, assignment shortcuts, increments, precedence rules, and string-plus behavior without surprises.
- 01Compute with operatorsUse
+ - * / % **, unary plus, and negation accurately. - 02Update values safelyRead
++,--, and compound assignment as value changes. - 03Predict orderUse precedence, parentheses, and string
+rules to predict results.
Operators compute values; assignment stores them
JavaScript expressions are little machines that produce values. In the previous lessons you met variables, numbers, strings, and conversion. This lesson is where those pieces start moving: operators combine values, and assignment stores the result for the next line.
An operator is a symbol with a job. In 2 + 3, the + operator combines the operands 2 and 3. In total += 5, the operator reads total, adds 5, and stores the new value back.
Arithmetic operators compute values. Assignment operators store values. When code surprises you, ask two questions: what value does this expression produce? and where is that value stored?
A calculator button does one clear operation with the numbers around it. JavaScript operators are similar, except their answers can feed directly into another operator before you ever see them.
- In real life: Pressing × on a calculator
- In JavaScript: Using
*between two values - In real life: Pressing = to display a result
- In JavaScript: An expression producing a value
- In real life: Writing the answer in a notebook
- In JavaScript: Assignment storing the result in a variable
Where the analogy stops: A calculator button usually shows the answer immediately. JavaScript expressions can be nested inside bigger expressions before anything is printed or stored.
We will move in the same order you will use in real code: basic arithmetic, remainder, unary operators, increments, compound assignment, precedence, and the special string behavior of +.
The arithmetic operators: + - * / % **
REAL OUTPUTSJavaScript uses familiar calculator symbols, with two programming symbols to remember: * means multiply, and ** means exponentiation, or “to the power of.” The % operator is not “percent” in JavaScript expressions; it gives a remainder.
console.log(8 + 3);console.log(8 - 3);console.log(8 * 3);console.log(8 / 3);console.log(8 % 3);console.log(2 ** 3);| Operator | Name | Example | Result |
|---|---|---|---|
| + | Addition | 8 + 3 | 11 |
| - | Subtraction | 8 - 3 | 5 |
| * | Multiplication | 8 * 3 | 24 |
| / | Division | 8 / 3 | 2.6666666666666665 |
| % | Remainder | 8 % 3 | 2 |
| ** | Exponentiation | 2 ** 3 | 8 |
Division is not integer division. 10 / 4 is 2.5. If you need a whole number, choose the rounding rule you mean: Math.trunc cuts off the decimal, Math.floor rounds down, and Math.round rounds to the nearest integer.
Numbers & math already introduced Infinity and NaN. Operators can produce them too: 5 / 0 is Infinity, and 0 / 0 is NaN.
% is remainder, not modulo
INTERACTIVEThe easiest positive example is candy. If 7 candies are shared equally among 3 kids, each kid gets 2 candies and 1 candy is left. That leftover is 7 % 3.
Remainder answers “what is left after taking as many equal groups as possible?” That makes it great for even/odd checks and wrapping indexes, as long as you remember the negative case.
- In real life: 7 candies
- In JavaScript: The dividend,
7 - In real life: 3 kids
- In JavaScript: The divisor,
3 - In real life: 1 candy left over
- In JavaScript: The remainder,
7 % 3
Where the analogy stops: Candy sharing explains positive whole numbers. With negative values, JavaScript follows a precise remainder rule: the sign follows the dividend.
JavaScript % keeps the sign of the left operand. So -7 % 3 is -1, while 7 % -3 is 1. For clock or carousel wrapping, you often want an always-positive modulo. Use ((a % b) + b) % b when b is positive.
const a = -7;const b = 3;console.log(a % b);console.log(((a % b) + b) % b);- a % b
- -1
- ((a % b) + b) % b
- 2
-7 % 3 is -1. For positive wrapping by 3, the modulo formula gives 2.
% is the remainder operator. The modulo row uses a formula that is helpful for clocks, carousels, and indexes.Unary plus and negation
Most operators in this lesson sit between two values. Unary operators use one value. Unary plus converts a value to a number; unary minus converts and then flips the sign.
console.log(+"42");console.log(+"");console.log(+true);console.log(-"5");console.log(-(-3));console.log((-2) ** 2);JavaScript treats -2 ** 2 as a syntax error. Put the negative base in parentheses: (-2) ** 2. The tests for this lesson prove both the error and the valid result.
++ and --: change by one
STEP THROUGHcount++ means “increase count by one.” count-- means “decrease by one.” The part beginners trip over is that increment and decrement are expressions: they both change the variable and produce a value.
At a hospital or bank, take the number showing now and the machine moves on. Postfix gives the old number first; prefix moves to the next number first.
- In real life: Take the number showing now
- In JavaScript: Postfix
ticket++produces the old value - In real life: The machine moves to the next number
- In JavaScript: The variable changes after the value is used
- In real life: Move it first, then take the number
- In JavaScript: Prefix
++ticketchanges first
Where the analogy stops: A token machine does not return values into variables. It only shows old-value-first versus new-value-first timing.
Compare postfix and prefix. One gives the old value first; the other increments first.
script
const handedOut = ticket++;console.log(handedOut, ticket);In everyday code, prefer count += 1 unless you specifically need the expression value of prefix or postfix. It is clearer because it only says “update this variable.”
Compound assignment: add to the jar
INTERACTIVEThe Variables lesson introduced =: store the value on the right into the name on the left. Compound assignment keeps the same idea but uses the old value too. total += 5 means total = total + 5. The same pattern works for -=, *=, /=, %=, and **=.
Instead of saying “take the jar, count it, add five, and label the jar again,” you say “add five to the jar.” Compound assignment is that kind of shorthand.
- In real life: A jar currently holding 10 coins
- In JavaScript: A variable
totalcurrently holding 10 - In real life: Add 5 coins to the jar
- In JavaScript:
total += 5 - In real life: Put the jar back with 15 coins
- In JavaScript: Store the new value back in
total
Where the analogy stops: A jar changes physically. JavaScript variables hold values; for primitive numbers, the old number is replaced by a new number.
let total = 10;total += 5;total *= 2;total %= 6;total **= 3;console.log(total);let total = 10 leaves total as 10. Each shortcut reads the old value, computes, and stores back.
Because + also joins strings, message += "!" appends an exclamation mark and stores the new string back in message.
Precedence and grouping
STEP THROUGHJavaScript does not simply read every operator from left to right. Like school arithmetic, it has an order of operations: exponentiation first, then multiplication/division/remainder, then addition and subtraction. Parentheses are your override when the human meaning should happen first.
Predict the final number, then step through the sub-expressions JavaScript evaluates.
script
console.log(result);Notice that 2 + 3 * 4 ** 2 is 50, but (2 + 3) * 4 ** 2 is 80. Also, ** is right-associative: 2 ** 3 ** 2 is 2 ** (3 ** 2), or 512.
+ with strings: addition or concatenation?
SORTERWith two numbers, + adds. If either side is a string, + joins text. The result then keeps moving left to right. That is why the same pieces can produce different answers.
console.log("3" + 4 + 5);console.log(3 + 4 + "5");console.log("Total: " + (2 + 3));"3" + 4 + 5 becomes "34" + 5, then "345". But 3 + 4 + "5" adds first, producing 7 + "5", then "75". Parentheses let you choose: "Total: " + (2 + 3) is "Total: 5".
3 + 4"3" + 4"8" - 3"Total: " + (2 + 3)+"42"2 + "3" + 4
Sort each expression by the type of value it produces. Read left to right after precedence.
Where you will use this
Operators show up anywhere an interface computes: totals in a cart, a progress percentage, an average rating, alternating rows, a carousel index, a game score, or a sentence that includes a number.
const subtotal = 19.99 + 4.5;const isEven = n % 2 === 0;const average = (a + b) / 2;const wrapped = ((index % length) + length) % length;const label = "Total: " + subtotal;These examples are short because operators are vocabulary. Once you can read them accurately, larger programs become easier to trace: find the expression, compute the value, then see whether anything is stored.
Common misconceptions
“% is modulo, so it is always positive.”
In JavaScript it is remainder. -7 % 3 is -1.
“/ does integer division when both inputs are integers.”
No. 10 / 4 is 2.5. Round on purpose if you need an integer.
“x++ and ++x are interchangeable everywhere.”
They both update x, but they produce different expression values.
“= checks equality.”
= assigns. Comparisons such as === come next lesson.
“+ always adds.”
With a string on either side, + concatenates text.
| Looks like | Actually means | Example |
|---|---|---|
= | Store a value | total = 10 |
+= | Compute with old value and store | total += 5 |
% | Remainder | -7 % 3 → -1 |
++x | Increment first, produce new value | ++x |
x++ | Produce old value, increment after | x++ |
+ with strings | Concatenate | "3" + 4 → "34" |
Practice: arithmetic and assignment
5 EXERCISESTrace points line by line. What does the program print?
let points = 10;
points += 5;
points *= 2;
console.log(points);points += 5 makes 15. points *= 2 makes 30, so the program prints 30.
Write an expression that is true when n is even.
n % 2 === 0For integers, even means the remainder after division by 2 is 0.
The code should average a and b, but it only halves b. What expression fixes it?
const average = a + b / 2;const a = 10;
const b = 20;
console.log((a + b) / 2);Use (a + b) / 2 so the sum happens before division.
Run the wrapping formula mentally. What index prints?
const index = -1;
const length = 5;
console.log(((index % length) + length) % length);const index = -1;
const length = 5;
console.log(((index % length) + length) % length);((-1 % 5) + 5) % 5 becomes 4, the last valid index in a length-5 carousel.
Predict the three values printed by console.log.
let a = 5;
const b = a++;
const c = ++a;
console.log(b, a, c);b is 5, then a becomes 6. ++a makes a 7 and gives 7 to c, so the log is 5 7 7.
Quiz: check your understanding
7 QUESTIONSPredict before you choose. Each answer explains the exact operator rule being tested.
Question 1 of 7What does the precedence expression print?
Read the code, then predictconsole.log(2 + 3 * 4);Choose an answer to see the explanation.
Question 2 of 7Which statement about
%is correct in JavaScript?Choose an answer to see the explanation.
Question 3 of 7What does the string-plus chain print?
Read the code, then predictconsole.log("3" + 4 + 5);Choose an answer to see the explanation.
Question 4 of 7What does postfix increment print?
Read the code, then predictlet a = 5; const b = a++; console.log(b, a);Choose an answer to see the explanation.
Question 5 of 7What does unary plus do here?
Read the code, then predictconsole.log(+"42");Choose an answer to see the explanation.
Question 6 of 7What does exponentiation assignment print?
Read the code, then predictlet total = 2; total **= 3; console.log(total);Choose an answer to see the explanation.
Question 7 of 7Which expression fixes an average calculation for
aandb?Choose an answer to see the explanation.
Key takeaways
+ - * / % **compute values;%is remainder, not always-positive modulo.- Unary plus converts to number; unary minus negates. Parenthesize negative bases before
**. ++and--update by one; prefix and postfix differ when their value is used.- Compound assignment reads the old value, computes, and stores back.
- Precedence decides the default order; parentheses make your intent obvious.
+adds numbers but concatenates when a string is involved.
Remember the one-liner.
Operators compute values; assignment stores them; parentheses and strings decide many surprises.
Up next: Comparisons, where you ask whether values are equal, larger, smaller, or safely comparable.