Rounding to Two Decimal Places in JavaScript
Introduction
In this Byte we'll talk about rounding numbers, specifically to two decimal places. We'll look at why and how to do it, along with some of the quirks and features of JavaScript that make it interesting.
Rounding in JavaScript
JavaScript, like many other programming languages, provides tools to perform mathematical operations, including rounding numbers. The Math.round() function is a built-in JavaScript function that rounds a number to the nearest integer.
console.log(Math.round(3.5)); // Output: 4
console.log(Math.round(3.4)); // Output: 3
As you can see, Math.round() makes it simple to round numbers to the nearest whole number. But what if we want to round to a certain number of decimal places, say two? That's where things get more complicated, but only slightly.
Why Round to Two Decimal Places
The need to round numbers to two decimal places comes up quite a bit in many fields. The most obvious example is in finance, prices are often rounded to two decimal places to represent cents in a dollar amount. In scientific computations, rounding to two decimal places might be necessary to limit the precision of calculations.
How to Round to Two Decimal Places
Using Math.round()
To round to two decimal places in JavaScript, you can use a combination of multiplication and the Math.round() function. We have to do it this way since Math.round() only takes one argument - you can't specify what decimal place to round to. Here's how it works:
let num = 3.14159;
let roundedNum = Math.round(num * 100) / 100;
console.log(roundedNum); // Output: 3.14
In this code, we're multiplying the number by 100 to shift the decimal point two places to the right. Then, we round to the nearest whole number, and finally divide by 100 to shift the decimal point back to its original position. This leaves us with a number rounded to two decimal places.
Heads up! This method works well for most numbers, but it may give unexpected results for certain numbers due to the way JavaScript handles floating point arithmetic.
Using Number.toFixed()
Another way to round to two decimal places in JavaScript is to use the Number.toFixed() method. This method converts a number into a string, rounding to a specified number of decimal places.
let num = 3.14159;
let roundedNum = Number(num.toFixed(2));
console.log(roundedNum); // Output: 3.14
In this example, num.toFixed(2) returns the string "3.14", which we then convert back into a number using the Number() function.
The Number.toFixed() method rounds up from .5, unlike Math.round(), which rounds towards the nearest even number in a process called bankers rounding.
Comparing Math.round() and Number.toFixed()
So, when should you use Math.round() and when should you use Number.toFixed()? Well, it depends on your specific needs.
Math.round() is great when you're dealing with numbers that don't have many decimal places. But when you start working with numbers with many decimal places, it can cause some unexpected results due to the quirks of floating point arithmetic. It's also not as straightforward to first move the decimal place, round the number, and then move it back with division.
On the other hand, Number.toFixed() is a bit more predictable. It always gives you the exact number of decimal places you specify, regardless of the number you're rounding. However, since it returns a string, you'll need to convert it back into a number if you want to do further mathematical operations.
Precision Issues
Now, let's talk a bit about precision issues. Have you ever tried adding 0.1 and 0.2 in JavaScript and got back an unexpected result? Well, you've encountered one of the quirks of floating point arithmetic.
This is because JavaScript uses binary floating point numbers, which can't accurately represent all decimal fractions. This can lead to rounding errors.
console.log(0.1 + 0.2); // Outputs: 0.30000000000000004
This can cause issues when you're rounding numbers. The Math.round() method, in particular, can give you some unexpected results. For instance, Math.round(1.005 * 100) / 100 gives 1, not 1.01 as you might expect.
So, when you're rounding numbers in JavaScript, it's always a good idea to be aware of these precision issues. You might want to consider using a library like decimal.js if you need more precise calculations.
Rounding to Other Decimal Places
While rounding to two decimal places is probably the most common use-case, there may be instances where you need to round to a different number of decimal places. So how would you do that? The answer is quite simple, and involves a slight modification to our previous methods.
Let's say you want to round to three decimal places. With the Math.round() method, you would multiply by 1000 (instead of 100) before rounding, and then divide by 1000 afterwards:
let num = 123.45678;
let roundedNum = Math.round(num * 1000) / 1000;
console.log(roundedNum); // Outputs: 123.457
To generalize this, you may have noticed that we would need to raise 10 to the "number of decimal places" power, i.e.:
let num = 123.45678;
let numDecimals = 3;
let decimalMover = Math.pow(10, numDecimals)
let roundedNum = Math.round(num * decimalMover) / decimalMover;
console.log(roundedNum); // Outputs: 123.457
With the Number.toFixed() method, you would simply pass 3 (instead of 2) as the argument:
let num = 123.45678;
let roundedNum = Number(num.toFixed(3));
console.log(roundedNum); // Outputs: 123.457
The same logic can be applied to round to any number of decimal places. Just replace 3 with your desired number of decimal places.
Conclusion
In this Byte we've explored how to round to two decimal places using Math.round() and Number.toFixed(), and also how to adjust these methods to round to any number of decimal places. We've also touched on some precision issues that you might encounter and how to address them.
Whether you're working on a financial application that requires precise currency calculations, or a scientific program that needs to display results with a specific precision, understanding these rounding methods can be incredibly useful.
