How to round to decimal places in JavaScript?

Published on Jun 12, 2021
~5 min read
JS
Math.round(123.49); // will round down to 123
Math.round(1.5); // will round up to 2
Math.round(123.51); // will round up to 124
Math.round(123.4567 * 100) / 100; // will round to 2 decimal places

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.

JS
Math.round(123.4567 * 100) / 100; // 123.46

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.

JS
Math.round(123.4567 * 1000) / 1000; // 123.457

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.

JS
(123.456789).toFixed(2); // will return a string "123.46"

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.

JS
(1.5).toFixed(2); // will return "1.50"
(1.5).toFixed(4); // will return "1.5000"

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

JS
+(123.456789).toFixed(2); // 123.46

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?

JS
Math.round(1.255 * 100) / 100;

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

JS
function roundToTwo(num) {
return +(Math.round(num + "e+2") + "e-2");
}
roundToTwo(1.255); // 1.26

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.

JS
function roundToX(num, decimals) {
return +(Math.round(num + "e" + decimals) + "e-" + decimal);
}
roundToX(1.255784, 4); // 1.2558

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.

Picture of author

Peter Lynch

Web Developer & Bootcamp grad who wants to learn as much as he can check me out on twitter.

A Web Development Newsletter That Helps You Create

I'm learning heaps and having a blast doing it. Sign up for my newsletter where I'll share the things I've made and how you can make them too. Only real newsletters are going to last, all that other bullshit is here today & gone tomorrow.