JavaScript Numbers & Math
round,floor,ceilandtruncturn a decimal into a whole number in different ways.
The differences only become obvious with negative numbers.
That is where most rounding bugs come from.
Example
javascript
console.log(Math.round(4.5));
console.log(Math.floor(4.9));
console.log(Math.ceil(4.1));
console.log(Math.trunc(4.9));The output is 5, 4, 5, 4.
round goes to the nearest whole number.
floor always goes down; ceil always goes up.
trunc simply removes the decimal part.
Syntax
javascript
Math.round(value);
Math.floor(value);All of them return a number, unlike toFixed.
round always goes up on a half, even for negatives.
So -4.5 rounds to -4, not -5.
Example
javascript
console.log(Math.round(4.5));
console.log(Math.round(-4.5));
console.log(Math.round(4.4));The output is 5, -4, 4.
For positive numbers they agree.
For negatives, floor goes further down while trunc just cuts.
Example
javascript
console.log(Math.floor(-4.5));
console.log(Math.trunc(-4.5));The output is -5 then -4.
Multiply, round, then divide back.
Example
javascript
const value = 3.14159;
console.log(Math.round(value * 100) / 100);
console.log(value.toFixed(2));The first gives a number; the second gives a string.
ceil is right for things like counting pages.
Example
javascript
const items = 23;
const perPage = 10;
console.log(items / perPage);
console.log(Math.ceil(items / perPage));Three pages are needed to hold 23 items.
The choice depends on what the number represents.
Example
javascript
const value = 7.6;
console.log(Math.round(value));
console.log(Math.floor(value));
console.log(Math.ceil(value));Use floor for whole units, ceil for capacity.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Math Rounding</title>
</head>
<body>
<h1>Rounding</h1>
<p id="out"></p>
<script>
const value = -4.5;
const items = 23;
document.getElementById("out").innerHTML =
"round(-4.5): " + Math.round(value) +
"<br>floor(-4.5): " + Math.floor(value) +
"<br>trunc(-4.5): " + Math.trunc(value) +
"<br>Pages needed for " + items + " items: " + Math.ceil(items / 10);
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a positive value:
Change to 4.5 and see floor and trunc agree.
round goes to the nearest whole number.floor goes down and ceil goes up.trunc removes the decimal part.floor and trunc differ only on negatives.Rounding looks simple until negative numbers appear.
ceil is the one people forget, and it is perfect for capacity.
These return numbers, while toFixed returns a string.