How to Round a Number to 2 Decimal Places in JavaScript

Round a Number to two Decimal Places in JavaScript

To Round a Number to 2 Decimal Places:

1. Use the toFixed() method to the prototype chain.
2. Pass the desired number of decimal places as a parameter.
3. The toFixed() method rounds a number to a specified number of decimal places and returns the result as a string.

Example –

// round PI to 2 decimal places
const PI = 3.14159265359;
const theResult = PI.toFixed(2);
console.log(theResult); // 👉️ 13.57
console.log(typeof theResult); // 👉️ string

// if you need to convert str to float
const final = parseFloat(theResult);
console.log(final); 

Here’s what the above code doing:

1. We have a constant variable called PI.
2. We use the toFixed() method to round the number to 2 decimal places.
3. We convert the result to a float.

Note – The toFixed() method returns a string representation of the number in fixed-point notation.

If we want Round a Number to 2 Decimal Places but the value is a string:

1. Call parseFloat() to convert it to a number first.
2. Pass the toFixed() method to the prototype chain.

Example –

const PI = '3.14159265359';
const theResult = parseFloat(PI).toFixed(2);
console.log(theResult);
console.log(typeof theResult);

const THEPI = 3.14159265359;
const theAnotherResult = Number(THEPI.toFixed(2));
console.log(theAnotherResult);
console.log(typeof theAnotherResult); 

Here’s what the first part is doing:

1. First, we create a constant variable named PI and assign a string value to it.
2. Then, we create another constant variable named theResult and assign a value to it.
3. The value of theResult is the result of the parseFloat() method.
4. The parseFloat() method takes a string as an argument and returns a floating point number.
5. The toFixed() method takes a number as an argument and returns a string.
6. The toFixed() method is a method of the Number object, so we need to convert the result of the parseFloat() method to a number by using the Number() method.
7. Finally, we log the value of theResult and its type to the console.

Here’s what the second part is doing:

1. First, we create a constant variable named THEPI and assign a number value to it.
2. Then, we create another constant variable named theAnotherResult and assign a value to it.
3. The value of theAnotherResult is the result of the toFixed() method.
4. The toFixed() method takes a number as an argument and returns a string.
5. Finally, we log the value of theAnotherResult and its type to the console.

Note – The parseFloat() function takes a string as an argument and returns a floating point number. The toFixed() method can only be used on numbers.

As you can see, the result of the first part is a string, but the result of the second is a number.

The reason is that the toFixed() method is a method of the Number object, so we need to convert the result of the parseFloat() method to a number by using the Number() method.

If we don’t convert the result of the parseFloat() method to a number, the result of the toFixed() method will be a string.

Example –

const PI = '1.00';
const theResult = parseFloat(PI).toFixed(2);
console.log(theResult);
console.log(typeof theResult); 

const final = parseFloat(theResult);
console.log(final);

Please note that, the zero at the end will be removed after the conversion is complete. JavaScript removes insignificant trailing zeros after converting a number.

The number 1.00 is the same as 1, so the trailing zeros are dropped when the value is converted to a number. However, note that floating-point numbers don’t always represent all decimals precisely in binary, which can sometimes lead to inconsistent results.

Example –

console.log(0.1 + 0.2 === 0.3); 

const numberOne = (13.555).toFixed(2);
console.log(numberOne);

const numberTwo = (13.5551).toFixed(2);
console.log(numberTwo);

The example demonstrates that binary floating-point format cannot accurately represent numbers like 0.1 or 0.2 – in this case, 0.1 + 0.2 equals 0.30000000000000004 instead of 0.3.

The code rounds to the nearest number, which can result in a rounding error.

We would expect to get 13.56 back from the second example, but instead the number gets rounded down to 13.55.