Round a Number to 2 Decimal Places in JavaScript

Rounding a number might seem straightforward, but it can be tricky due to how JavaScript handles floating-point numbers.

In this guide, we will explore two methods to round a number to two decimal places in JavaScript:

1. Using the toFixed() method
2. Using the Math.round() method

Using the toFixed() method

The toFixed() method in JavaScript rounds a number to a specified number of decimal places and returns the result as a string.

We can use this method to round a number to two decimal places. Here’s an example:

let num = 5.647;

let roundedNum = num.toFixed(2);

console.log(roundedNum);  // Output: 5.65

If the specified number is greater than the number of digits after the decimal place, the fractional part is padded with zeros.

For example:

let num = 5.4;

let roundedNum = num.toFixed(2);

console.log(roundedNum);  // Output: 5.40

The toFixed() method returns the result as a string. If you intend to perform any arithmetic operations on the result, you may need to convert it to a number first using the number() constructor.

Here’s an example:

let num = 5.647;

let roundedNum = Number(num.toFixed(2));

console.log(roundedNum);  // Output: 5.65

console.log(typeof(roundedNum));  // Output: number

If the number is a string:

The toFixed() method only works on numbers. If we have a string that represents a number and we want to use the toFixed() method on it, we will need to first convert the string to a number. We can do this using the Number() constructor or the parseFloat() method.

Here’s an example:

let numString = "5.647";

let num = Number(numString);

let roundedNum = num.toFixed(2);

console.log(roundedNum);  // Output: 5.65

OR

let numString = "5.647";

let num = parseFloat(numString);

let roundedNum = num.toFixed(2);

console.log(roundedNum);  // Output: 5.65

Limitations of toFixed() method:

JavaScript represents numbers using the binary floating point format specified by the IEEE 754 standard. However, decimal fractional numbers cannot be represented precisely in binary form. As a result, there can be slight inaccuracies when working with numbers in JavaScript.

For example:

console.log((2.025).toFixed(2));  // Output: 2.02

console.log((2.035).toFixed(2));  // Output: 2.04

In the first example, (2.025).toFixed(2) returns "2.02". This is because the value 2.025 cannot be precisely represented as a binary floating-point number, so it is stored as an approximation that is slightly less than 2.025. When this value is rounded to two decimal places using the toFixed() method, it rounds down to "2.02".

In the second example, (2.035).toFixed(2)) returns "2.04". This is because the value 2.035 can be precisely represented as a binary floating-point number, so it is stored exactly as 2.035. When this value is rounded to two decimal places using the toFixed() method, it rounds up to "2.04".

We can see this behavior using the toFixed() method to round the number to 30 or higher decimal places.

For example:

console.log((2.025).toFixed(30));  
// Output: 2.024999999999999911182158029987

console.log((2.035).toFixed(30)); 
// Output: 2.035000000000000142108547152020

Using the Math.round() method

The Math.round() method rounds a number to the nearest integer. It alone cannot be used to round a number to a specific decimal place, such as two decimal places.

However, we can use the Math.round method to round a number to two decimal places. To do so, we will need to multiply the number by 100 before rounding, and then divide the result by 100. This will round the number to two decimal places.

Here’s an example:

let num = 5.647;

let roundedNum = Math.round(num * 100) / 100;

console.log(roundedNum);  // Output: 5.65

In the above example: 

1. We multiply the number 5.647 by 100 shifting the decimal places by two positions to the right. 5.647 * 100 = 564.7
2. Then, we apply Math.round() method to round the result of multiplication to the nearest integer. Math.round(564.7) = 565
3. Finally, we divide the rounded number by 100 to shift the decimal places back to their original position. 565 / 100 = 5.65

Limitations of Math.round() method:

The Math.round() method, like the toFixed() method, can sometimes produce inaccurate results due to the limitations of floating point arithmetic. This can lead to unexpected rounding behavior in certain cases.

For example: 

console.log(Math.round(1.015 * 100) / 100);  // Output: 1.01

console.log(Math.round(1.215 * 100) / 100);  // Output:  1.22 

In the first example, Math.round(1.015 * 100) / 100 returns 1.01. This is because the result of multiplying 1.015 by 100 cannot be precisely represented as a binary floating-point number, so it is stored as an approximation that is slightly less than 101.5. When this value is rounded to the nearest integer using the Math.round() method, it rounds down to 101. And when this result is divided by 100 to shift the decimal places back to the original position, it gives us 1.01 as the final result.

In the second example, Math.round(1.215 * 100) / 100 returns 1.22. This is because the result of multiplying 1.215 by 100 can be precisely represented as a binary floating-point number, so it is stored exactly as 121.5. When this value is rounded to the nearest integer using the Math.round() method, it rounds up to 122. And When this result is divided by 100 to shift the decimal places back to the original position, it gives us 1.22 as the final result.

We can see this behavior using the toFixed() method to round the (number * 100) to 30 or higher decimal places.

For example:

console.log((1.015 * 100).toFixed(30));
// Output: 101.499999999999985789145284797996

console.log((1.215 * 100).toFixed(30));
// Output: 121.500000000000014210854715202004

Conclusion

In JavaScript, there isn’t a guaranteed way to accurately round a number. To minimize errors, it is best to round the number only at the end of the operation.