Welcome to a short tutorial on how to round off numbers in Javascript. So you have a project that needs to round off a number?

- To round off a number in Javascript –
`Math.round(12.34);`

- Round up to the nearest whole number –
`Math.ceil(1.1);`

- Round down to the nearest whole number –
`Math.floor(2.3);`

- Drop the decimal places without rounding off –
`Math.trunc(3.45);`

- Round off to 2 decimal places –
`Math.round(12.345 * 100) / 100;`

That covers the basics, but let us walk through more examples – Read on!

## TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

## TABLE OF CONTENTS

## ROUNDING OFF IN JAVASCRIPT

All right, let us now go into the examples of rounding off numbers in Javascript.

### 1) ROUND, CEILING, FLOOR, TRUNCATE

```
// (A) NUMBERS
var numA = 11.4;
var numB = 12.5;
// (B) ROUND OFF
// < 0.5 - ROUND DOWN
// >= 0.5 - ROUND UP
console.log(Math.round(numA)); // 11
console.log(Math.round(numB)); // 13
// (C) CEILING - ALWAYS ROUND UP
console.log(Math.ceil(numA)); // 12
console.log(Math.ceil(numB)); // 13
// (D) FLOOR - ALWAYS ROUND DOWN
console.log(Math.floor(numA)); // 11
console.log(Math.floor(numB)); // 12
// (E) TRUNCATE - NO ROUND OFF, JUST DROP DECIMAL PLACES
console.log(Math.trunc(numA)); // 11
console.log(Math.trunc(numB)); // 12
```

As in the introduction, there are 4 native Javascript Math functions to round off numbers:

`Math.round()`

rounds off to the nearest whole number. That is, decimals with less than 0.5 will be rounded down, rounded up if more than or equals to 0.5.`Math.ceil()`

will always round up to the nearest whole number.`Math.floor()`

will always round down to the nearest whole number.`Math.trunc()`

does not do any rounding, simply drops the decimal places.

### 2) ROUNDING TO DECIMAL PLACES

```
// (A) A BETTER ROUND OFF
// NUM : NUMBER TO BE ROUNDED
// PLACES : NUMBER OF DECIMAL PLACES
// MODE : NONE - ROUND, 0 - FLOOR, 1 - CEILING
function rounder (num, places, mode) {
// (A1) MULTIPLIER
var mult = parseInt("1" + "0".repeat(places));
num = num * mult;
// (A2) ROUND OFF
if (mode === 1) { num = Math.ceil(num); }
else if (mode === 0) { num = Math.floor(num); }
else { num = Math.round(num); }
// (A3) RETURN RESULTS
return num / mult;
}
// (B) TEST
var num = 1.2374;
// 2 DECIMALS ROUND - 1.24
console.log(rounder(num, 2));
// 3 DECIMALS FLOOR - 1.237
console.log(rounder(num, 3, 0));
// 3 DECIMALS CEILING - 1.238
console.log(rounder(num, 3, 1));
```

So as you can see, all the native round-off functions will only round to whole numbers. To do a “round off to 2 decimal places”, we need to multiply the number by 100, round off, then divide by 100… That is a little inconvenient, so the smarter way is to create an “improved roundoff” function.

**(A1)**Multiply the given number by an offset first. I.E. The offset will be 10 if 1 decimal point, 100 if 2 decimal points, 1000 if 3 decimal points, and so on.**(A2)**Use the`round() ceil() floor()`

functions as usual.**(A3)**Finally, “revert” the number by dividing it with the offset.

## DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

### SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

### EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

## EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

### SUMMARY

Function |
Description |
Link |

`Math.round(NUMBER)` |
Rounds to the nearest whole number. | Click Here |

`Math.ceil(NUMBER)` |
Round up to the next whole number. | Click Here |

`Math.floor(NUMBER)` |
Round down to the last whole number. | Click Here |

`Math.trunc(NUMBER)` |
Remove decimal places. | Click Here |

### INFOGRAPHIC CHEAT SHEET

## THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!