Loading...

JavaScript Arithmetic

You already have the operator map. This lesson zooms into the arithmetic family — the symbols that mostly work with numbers and return a new value. You will practice + - * / %, control order with parentheses, bump counters with ++ and --, raise powers with the power operator, and fix the classic trap where + joins text instead of adding.

What are arithmetic operators?

Arithmetic operators tell JavaScript to compute. The values they work on are still called operands. In 12 / 4, / is the operator and 12 and 4 are the operands. These operators return a result you can store, log, or show on a page.

The five everyday operators

📊 Everyday arithmetic operators

Operator Job Example result
+ add 7 + 3 → 10
- subtract 7 - 3 → 4
* multiply 7 * 3 → 21
/ divide 7 / 2 → 3.5
% remainder after divide 7 % 3 → 1

Keep this sheet nearby. Division with / can return a decimal. % is not “percent” — it is the leftover after integer-style division steps.

Five arithmetic operators

javascript 
console.log(20 + 4);
console.log(20 - 4);
console.log(20 * 4);
console.log(20 / 4);
console.log(20 % 4);
console.log(20 / 3);

Remainder patterns with %

% answers: “what is left after dividing?” That leftover is useful for even/odd checks and “every Nth item” logic.

Remainder patterns

javascript 
console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 5);
console.log(17 % 5);
let n = 12;
console.log(n % 2 === 0);

8 % 2 is 0 (even). 9 % 2 is 1 (odd). n % 2 === 0 is a common even test. 15 % 5 is 0 — evenly divisible. A later lesson will use remainder inside loops; here you only need to read the leftover.

Precedence and parentheses

JavaScript does not always evaluate left-to-right for every symbol. Multiplication and division usually run before addition and subtraction. Parentheses force the order you want — read the inner (…) first.

Precedence and parentheses

javascript 
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 6 / 2);
console.log((10 - 6) / 2);

Without parentheses, 2 + 3 * 4 is 14 (multiply first). With (2 + 3) * 4 you get 20. When the order matters for a price, score, or formula, write the parentheses on purpose.

++ -- and the power operator

++ adds one to a number variable. -- subtracts one. The power operator (two asterisks in code) raises a number to a power. Prefer a clear line like n = n + 1 when you are still getting comfortable; ++ is common in loops you will meet soon.

Increment, decrement, and power

javascript 
let lives = 3;
lives++;
console.log(lives);
lives--;
console.log(lives);
console.log(2 ** 3);
console.log(5 ** 2);

After lives++, the value is 4. In the demo, two to the power three is 8. Five to the power two is 25. Assignment shortcuts like += belong to the assignment lesson next — this session stays on compute symbols.

When + joins instead of adds

If either side of + is a string, JavaScript often concatenates. Convert with Number(...) (or make sure both sides are already numbers) when you meant to add.

Fix + with Number

javascript 
console.log("5" + 2);
console.log(Number("5") + 2);
console.log(5 + Number("2"));
let a = "10";
let b = "3";
console.log(Number(a) + Number(b));

"5" + 2 becomes "52". Number("5") + 2 becomes 7. Same idea you saw in type conversion — it shows up constantly in forms and page text.

Show a total on the page

Compute a small bill, use remainder for a tip about packing, and write the result into the page.

Page total with arithmetic

html 
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic — page total</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12;
let qty = 3;
let shipping = 4;
let total = price * qty + shipping;
let leftover = total % 5;
let box = document.getElementById("out");
box.textContent = "total=" + total + " · rem5=" + leftover;
</script>
</body>
</html>

Here * runs before +, so you get 12 * 3 + 4 → 40. 40 % 5 is 0. Change price, qty, or shipping, refresh, and confirm both numbers update.

Try it yourself

  1. Log 14 + 5, 14 - 5, 14 * 5, 14 / 5, and 14 % 5.
  2. Log whether 22 is even using % and === 0.
  3. Log 1 + 2 * 3 next to (1 + 2) * 3 and compare.
  4. Start let c = 0, run c++ twice, then log c.
  5. Log three to the power three from the power demo, and Number("8") + 1.
  6. In the HTML demo, change only qty, refresh, and read the new total and remainder.

Common mistakes

  • Reading % as “percent” — it is remainder
  • Expecting + to always add — a string side often joins
  • Forgetting parentheses when multiply/divide should not win
  • Confusing ++ (change by one) with = (store any value)
  • Doing math on formatted display strings instead of the raw numbers

Summary

  • Arithmetic operators: + - * / %
  • % is remainder — useful for even/odd and “every Nth”
  • Parentheses control precedence; * / usually beat + -
  • ++ / -- change by one; the power operator raises to a power
  • Use Number() when + would concatenate
  • Next: assignment — storing and updating values with = and friends

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 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
Topic 17 of 17
Javascript Tutorial