Copy to Clipboard

Unlike many other languages JavaScript does not offer a built-in method to round a number to a specified number of decimal places. The built in Math.round() function only rounds numbers up or down to whole numbers.

So what’s a coder to do? You a coder, need to round your prices on your online store to a nice and neat 2 decimal places. Well this post aims to show you how you can use JavaScript to round numbers to any decimal place you want.

How to Round to 2 Decimal Places in JavaScript

There are a few methods to help you round to 2 decimal places in JavaScript. Firstly you can do it using a little bit of math and then there is a nice shinny method that helps you do it. I’m going to show you both starting with the math way to round to 2 decimal places.

How to Use JavaScript to Round to Decimal Places Using Some Math

It’s important to understand that Math.round() only rounds to the nearest integer value. But, by understanding that we can use some simple math to allow us to round to 2 decimal places.

All you need to do is to multiply the number you want to round by 100 and then divide by 100. Let’s look at an example below.

Copy to Clipboard

In the example above, we take the number 123.4567 and multiply it by 100 inside of the brackets. Then we divide that by 100 to give you a lovely number rounded to 2 decimal places all thanks to JavaScript and some basic math.

This method can also be used to round a number to any number of decimal places. You simply need to add a zero to the number you are multiplying by and dividing by to increase the number of decimal places you want to show. See the example below.

Copy to Clipboard

So that is one way to round to decimal places in JavaScript, let’s look at another method.

How to JavaScript Round to 2 Decimal Places with the toFixed() method

The next method to round to 2 decimal places in JavaScript is a really simple method toFixed().

The way tofixed() works, is it returns a string of the number that has exactly the number of decimal places you specify. Let’s look at an example to see how it works.

Copy to Clipboard

As you can see in the example above, by giving the toFixed() method an argument of 2 it will return a the number as a string rounded to 2 decimal places with the value of ‘123.46″. Now before we look at how to convert it back to a number we need to understand this method some more.

It is important to understand that if the number of decimals you pass as an argument is greater than what the number will show it will pad it with zero’s. Let’s look at a quick example.

Copy to Clipboard

Now, let’s quickly look at how to convert the string back to a number.

Copy to Clipboard

Above we use a unary plus (+), that is a plus symbol that goes before the value. What it does is attempts to convert the object into a number. As a result, our value will be outputted with the typeof number.

I would not recommend doing this as it is bad for performance. It is more just a proof of concept that it can be done.

Errors to watch for when rounding with JavaScript

Now these methods are fraught with danger. However, let’s quickly look at why they are dangerous to use when rounding in JavaScript.

What do you expect the below output to be?

Copy to Clipboard

If you said 1.26, you are technically correct. But, JavaScript will actually give you the answer of 1.25. What the hell? What is going on?

I won’t get into exactly why. But, to quickly summarize the way computers are programmed at a binary level means that JavaScript can’t round correctly like a regular calculator. So just be aware that it can happen. If you are interested it is explained in full detail here.

Best Way to Round to 2 Decimal Places in JavaScript

Copy to Clipboard

The above function avoids the rounding errors mentioned by using numbers that are represented as exponentials. You could even convert it to a function that rounds to any number you specify.

Copy to Clipboard

The above function, ensures you can round accurately to any level of precision and is what I use when rounding a number in JavaScript. The ideal solution would be not to handle rounding on the front-end. Rather you should be handling it on the back-end.

Did You Enjoy This?

Then consider following me on Twitter or if you’re a curious like me, why not be one of the first people to join my newsletter. I’ll help you level up your coding skills.