JavaScript Math
A frame shop keeps one photo on the bench, 7.6 cm wide, with a 7.2 cm scrap of mat, a nudge of -3.8 cm, and moulding sticks of 12, 9, and 15 cm. Those lengths stay put while Math answers with a whole number.
One object, already there
The dates page built a moment and then read one part of it. Operators such as plus and minus sit between two numbers. Math is already there, so you call Math.round on a number you already have. new Math() fails, and so does calling Math as a function.
Six jobs on this bench
The rows belong to this bench, not to a glossary you memorize in the abstract. A call hands back a number and leaves the original measurement where it was, unless you store what came back.
📊 Jobs on this bench
| Method | The job | The number | Easy to mix up |
|---|---|---|---|
Math.round |
nearest whole centimeter for 7.6 |
8 |
a half tie on a negative |
Math.floor |
full centimeters you can cut from 7.2 |
7 |
using it on -3.8 |
Math.ceil |
centimeters to buy so 7.2 is covered |
8 |
bumping a number that is already whole |
Math.trunc |
drop the fraction of -3.8 toward zero |
-3 |
expecting the same as floor |
Math.max |
longest of 12, 9, and 15 | 15 |
handing it an array |
Math.min |
shortest of those sticks | 9 |
the same array mistake |
Half a step above zero rounds upward, so 0.5 becomes 1. The same leftover half below zero still moves toward positive infinity, which makes -1.5 land on -1 rather than -2. Floor always walks toward negative infinity, and that is the split you will see on the nudge.
The label
The ticket cannot print 7.6. It asks for the nearest whole centimeter.
let width = 7.6;
console.log(Math.round(width));
The call yields 8, which is the label. width is still 7.6, since the 8 was not written back. 7.5 takes that same step up to 8. The tie at -1.5 does not step further negative: it lands on -1.
let scrap = 7.2;
console.log(Math.floor(scrap));
console.log(Math.ceil(scrap));
Cutting stops at 7, because 7.2 does not contain an eighth full centimeter. Covering the same scrap takes 8, since 7 would leave a gap. When the scrap is already a whole number, both calls stay on that number.
let nudge = -3.8;
console.log(Math.trunc(nudge));
console.log(Math.floor(nudge));
Truncation of -3.8 leaves -3 by dropping the fraction and walking toward zero. Floor of the same nudge leaves -4, because the next integer downward is -4, not -3. The sign stays negative in both results, so neither call has turned the nudge into a plain distance.
console.log(Math.max(12, 9, 15));
console.log(Math.min(12, 9, 15));
The longer stick is 15 and the shorter is 9. Each length is its own argument. Wrap those three numbers in an array and both methods miss the contents, so the result is NaN.
let drawer = Math.floor(Math.random() * 6) + 1;
console.log(drawer >= 1 && drawer <= 6);
console.log(Math.random() < 1);
The first line is true on every run: after you multiply by 6, floor can only yield 0 through 5, and adding 1 shifts that to 1 through 6. The second line is also true on every run, because a fresh call stays below 1 and never lands on 1 itself. Do the multiply, then the floor, then the +1. Add 1 before the floor, or forget the +1, and the drawer becomes 0 or 7.
The circle on the ticket
The mount is a circle of radius 5. Its area is π times the radius times the radius. The ticket rounds that area to a whole number before anyone reads the paragraph.
<!DOCTYPE html>
<html>
<head>
<title>math — page</title>
</head>
<body>
<p id="ticket">…</p>
<script>
let radius = 5;
let area = Math.PI * radius * radius;
let shown = Math.round(area);
let box = document.getElementById("ticket");
box.textContent = shown;
</script>
</body>
</html>
The paragraph reads 79. π times 25 sits near 78.54, and rounding lifts it to 79 rather than leaving the long decimal on the page.
Read it yourself
- Log the rounded width and expect 8
- Log floor of the scrap, then ceil, and expect 7 then 8
- Log trunc of the nudge, then floor, and expect -3 then -4
- Log the longest stick, then the shortest, and expect 15 then 9
- Log the drawer check and expect true, then log the fresh random check and expect true
- Read the paragraph and expect 79
Easy to mix up
These run, and the shop number is still wrong.
- Calling
new Math()or callingMathby itself - Reading
Math.roundof-1.5as -2 - Using floor on
-3.8when the cut toward zero should be -3 - Using trunc on
-3.8when you needed the downward step -4 - Passing one array into max or min
- Expecting
Math.random()to be able to equal 1 - Expecting ceil to grow a value that is already whole
Keep these apart
Math.roundsends a half tie toward positive infinityMath.floorsteps toward negative infinityMath.ceilsteps toward positive infinityMath.truncchops toward zero- A drawer integer needs floor after the multiply, then +1, and
Math.random()stays below 1 - The HTML DOM comes next
🧠 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