Rounding Numbers in JavaScript: How to Get 2 Decimal Places (and No More)

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

The Magic of Numbers: Why 0.1 + 0.2 Doesn't Equal 0.3?



Hello, future JavaScript guru! If you've ever tried adding 0.1 and 0.2 in the browser console, you've probably experienced a culture shock:



console.log(0.1 + 0.2); // Outputs: 0.30000000000000004


Yes, yes, JavaScript hasn't gone crazy. This is a standard problem with floating-point arithmetic (IEEE 754). Computers simply cannot perfectly represent 0.1 in binary — it's like trying to write 1/3 in decimal. You get an infinite fraction.



And here arises the classic question from Stack Overflow, which has gathered thousands of views: «How to round to at most 2 decimal places, if necessary». How do you display a number nicely, without the tail of «0000000004»? How do you round to two decimal places, but only when needed?



In this article, we'll break down a step-by-step tutorial that will solve the problem once and for all. You'll learn why toFixed() sometimes lies, how Math.round() works, and which method to choose for an online store, calculator, or just for a nice price display.



The Problem: «I want 2 decimal places, but no more!»



Imagine you're writing a shopping cart. The product price is 10.00. You want to show 10, not 10.00. But if the price is 10.456, you want to show 10.46. The logic is simple: round to two decimal places, but discard extra zeros.



The standard method toFixed(2) does this:



const price = 10;console.log(price.toFixed(2)); // "10.00" — but we need "10"

const price2 = 10.456;console.log(price2.toFixed(2)); // "10.46" — this is ok


The problem: toFixed() always returns a string and always adds zeros. This doesn't work.



The second nuance — toFixed() can round strangely because of the same floating-point issue:



console.log((1.005).toFixed(2)); // "1.00" — but it should be "1.01"!


Bingo! That's why the question on Stack Overflow is so popular. Let's look at the solutions.



Solution #1: Mathematical Rounding (Math.round)



The most reliable way is to multiply the number by 100, round it, and divide back. It works like this:



function roundToTwo(num) {  return Math.round(num * 100) / 100;}

console.log(roundToTwo(10.456)); // 10.46console.log(roundToTwo(10)); // 10console.log(roundToTwo(1.005)); // 1 — oops, problem again


See? 1.005 * 100 = 100.49999999999999 (due to IEEE 754). Math.round rounds this down, resulting in 100, dividing by 100 = 1. Not good.



Conclusion: This method is good for simple cases, but not for financial calculations. For educational examples, it's fine.



Solution #2: Number.EPSILON — The Savior of Precision



To overcome the floating-point error, you can add a tiny delta — Number.EPSILON. This is the smallest difference between two numbers that JavaScript can distinguish (approximately 2.2e-16).



function roundToTwo(num) {  return Math.round((num + Number.EPSILON) * 100) / 100;}

console.log(roundToTwo(1.005)); // 1.01 — works!console.log(roundToTwo(10.456)); // 10.46console.log(roundToTwo(10)); // 10


Why does this work? We nudge the number slightly upward so that 100.4999... turns into 100.5... and rounds correctly.



Important: This method is not perfect for all edge cases, but for 99% of tasks, it's an excellent solution. It's often recommended on Stack Overflow.



Solution #3: toFixed() + Number() — A Clever Trick



Another popular method is to use toFixed(2) and then convert the string back to a number using Number() or the unary plus +. Extra zeros are removed

Blogs

Book Recommendations