How To Round Off In Javascript (Up, Down, To Decimal Places)

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?

  1. To round off a number in Javascript – Math.round(12.34);
  2. Round up to the nearest whole number – Math.ceil(1.1);
  3. Round down to the nearest whole number – Math.floor(2.3);
  4. Drop the decimal places without rounding off – Math.trunc(3.45);
  5. 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!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Rounding Off Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

ROUNDING OFF IN JAVASCRIPT

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

 

1) ROUND, CEILING, FLOOR, TRUNCATE

1-round.html
// (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:

  1. 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.
  2. Math.ceil() will always round up to the nearest whole number.
  3. Math.floor() will always round down to the nearest whole number.
  4. Math.trunc() does not do any rounding, simply drops the decimal places.

 

 

2) ROUNDING TO DECIMAL PLACES

2-places.html
// (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.

 

 

USEFUL 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

Round Off Numbers In Javascript (Click to enlarge)

 

 

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!

Leave a Comment

Your email address will not be published.