Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Numbers & Math

JavaScript Math Rounding

Written by Published

round, floor, ceil and trunc turn 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

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.

The Four Methods

round goes to the nearest whole number.

floor always goes down; ceil always goes up.

trunc simply removes the decimal part.

Syntax

Syntax

javascript

Math.round(value);
Math.floor(value);

All of them return a number, unlike toFixed.

Halfway Values

round always goes up on a half, even for negatives.

So -4.5 rounds to -4, not -5.

Example

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.

floor and trunc Differ on Negatives

For positive numbers they agree.

For negatives, floor goes further down while trunc just cuts.

Example

Example

javascript

console.log(Math.floor(-4.5));
console.log(Math.trunc(-4.5));

The output is -5 then -4.

Rounding to Decimal Places

Multiply, round, then divide back.

Example

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.

Always Rounding Up

ceil is right for things like counting pages.

Example

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.

Choosing the Right One

The choice depends on what the number represents.

Example

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

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>

Try It Yourself

Run the above example in the Try It Editor.

Try a positive value:

Change to 4.5 and see floor and trunc agree.

Important Points

  • round goes to the nearest whole number.
  • A half always rounds up, including for negatives.
  • floor goes down and ceil goes up.
  • trunc removes the decimal part.
  • floor and trunc differ only on negatives.

Conclusion

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.

PreviousJavaScript Math ObjectNextJavaScript Math.random