Loading...

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.

Nearest centimeter

javascript
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.

Cut or cover

javascript
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.

A nudge to the left

javascript
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.

Longest and shortest

javascript
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.

A drawer from 1 to 6

javascript
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.

Page demo — circle on the ticket

html
<!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

  1. Log the rounded width and expect 8
  2. Log floor of the scrap, then ceil, and expect 7 then 8
  3. Log trunc of the nudge, then floor, and expect -3 then -4
  4. Log the longest stick, then the shortest, and expect 15 then 9
  5. Log the drawer check and expect true, then log the fresh random check and expect true
  6. Read the paragraph and expect 79

Easy to mix up

These run, and the shop number is still wrong.

  • Calling new Math() or calling Math by itself
  • Reading Math.round of -1.5 as -2
  • Using floor on -3.8 when the cut toward zero should be -3
  • Using trunc on -3.8 when 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.round sends a half tie toward positive infinity
  • Math.floor steps toward negative infinity
  • Math.ceil steps toward positive infinity
  • Math.trunc chops 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

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