Numbers and Operators
14 minBeginnerHTML · CSS · JS
In this lesson
- ▸Use
+ - * / %and**, and predict the order they run in - ▸Update variables with
+=,-=and++ - ▸Explain
NaNand the floating-point surprise in0.1 + 0.2 - ▸Show money with
toFixed(2)and round withMath.round
The big idea
JavaScript is a calculator that never gets tired — but it follows maths rules strictly, and decimals are stored approximately. Know the rules and money will always add up.
The operators
console.log(10 + 3); // 13 add
console.log(10 - 3); // 7 subtract
console.log(10 * 3); // 30 multiply
console.log(10 / 4); // 2.5 divide
console.log(10 % 3); // 1 remainder ("what's left over")
console.log(2 ** 3); // 8 power (2 × 2 × 2)Order matters, just like in maths class: brackets first, then **, then * / %, then + -. Operators with the same rank run left to right. When in doubt, add brackets — they cost nothing and make your intention clear.
Without brackets
const price = 10 + 5 * 2;
console.log(price); // 20, not 30With brackets
const price = (10 + 5) * 2;
console.log(price); // 30Remainder: the most underrated operator
% gives what's left after dividing. It answers questions like "is this number even?" (n % 2 is 0) and "125 minutes is how many hours and minutes?" Pair it with Math.floor, which chops off the decimals:
const minutes = 125;
const hours = Math.floor(minutes / 60); // 2
const rest = minutes % 60; // 5
console.log(hours + "h " + rest + "m"); // 2h 5mChanging a number in place
let points = 10;
points += 5; // same as points = points + 5 → 15
points -= 3; // same as points = points - 3 → 12
points *= 2; // same as points = points * 2 → 24
points++; // add exactly 1 → 25
points--; // subtract exactly 1 → 24These only work on let variables — a const can't be changed.
NaN: "Not a Number"
When maths makes no sense, JavaScript doesn't crash — it gives NaN. For example Number("RM12") is NaN because RM12 isn't a number, and "abc" * 2 is NaN too. Any maths with NaN gives NaN, so one bad value can quietly spoil a whole calculation. Also watch out for + with text: "12.50" + 5 joins them into "12.505". Convert text to a number first with Number(...).
The 0.1 + 0.2 surprise
console.log(0.1 + 0.2); // 0.30000000000000004 (!)
console.log((0.1 + 0.2).toFixed(2)); // "0.30" (a string, for display)
console.log(Math.round(2.5)); // 3
console.log(Math.round(1234.5678 * 100) / 100); // 1234.57Computers store decimals in binary, and numbers like 0.1 can't be stored exactly — the same way 1/3 can't be written exactly as 0.333… This isn't a JavaScript bug; most programming languages do it. For money, two good habits: show amounts with toFixed(2) (it gives back a string like "25.10"), and calculate in whole sen when precision matters (Math.round(ringgit * 100)).
toFixed returns a string. Use it at the very end, when you're about to show the number — not in the middle of a calculation.
Three plates of nasi lemak and two teh tarik should come to RM25.10, but the console says something else. Work out why (think about which operators run first), fix the total calculation, and make the console show the amount with exactly two decimal places: Total: RM25.10.
Checks
totalequals 3 × nasi lemak + 2 × teh tarik- The calculation uses the price and quantity variables
- The console shows
Total: RM25.10
Check understanding
What you learned
- ✓
* / %run before+ -; use brackets to make the order obvious. - ✓
%gives the remainder;Math.floordrops decimals;+=and++update aletin place. - ✓Text + number joins text. Convert with
Number(...); impossible maths givesNaN. - ✓Decimals are approximate (
0.1 + 0.2). Show money withtoFixed(2)and count in sen when precision matters.
Console output from your code appears here.