Home Web DevelopmentJavaScript How to round a number to two decimal places in JavaScript

How to round a number to two decimal places in JavaScript

The rounding of numbers is an essential part of programming languages. Rounding refers to the process in which a number is made simpler, but its value is kept close to the initial value. It aids in estimating and utilizing a number according to the user’s needs. Users can, therefore, round numbers to 2 decimal places by using different methods in JavaScript.

Some of these methods include the .toFixed() method, Math. round() method, parseFloat() method, .toPrecision() method, custom functions method, and creating a round prototype method. Implementing any method on any rounding algorithm depends on the programmer’s requirements.

Rounding a number to two decimal places in JavaScript

This article has been tailored to walk you through understanding how each of these methods aids in rounding a decimal number to two decimal places in JavaScript.

Method 1: How to use JavaScript .toFixed() method in rounding numbers to two decimal places.

toFixed() is the best practice method for rounding a number in JavaScript. This is because it takes a specific input number that represents how many numbers you can place the decimals to. Users use this method to format a number input that applies to fixed-point notation. Alternatively, users use this method to round a floating-point number to the nearest integer with a maximum of two decimal places.

This method formats the number input with a specific number of digits to the right side of the decimal. It has one parameter referred to as value. The value parameter indicates the number of digits on the decimal’s right side. The syntax for employing this method is shown below.

number.toFixed(value)

The ‘number’ specifies the rounded number, whereas ‘value’ is used to represent the decimal digits for the placement of decimals.
An example of a code to enlighten this method is shown below:

var numb = 348.30374213;
numb = numb.toFixed(2);
console.log (numb)
Explanation

In the code above, we have used the .toFixed() function on a number input and thereafter passed the number of numerals to the right side of the decimal as an argument. The numb variable is utilized to store the number 348.30374213 while the numb.toFixed is called by passing 2 as an argument for placing the decimal.

Finally, the console.log() function displays a round number for placing two decimals in the console window. When you run that code, you will get the output shown below:

348.30 
Limitations of this method

The .toFixed() method does not generate exact outputs in some cases. Take a look at the code below:

var numb = 5.005;
numb = numb.toFixed(2);
console.log (numb)
5.00

The code above returns 5.00 instead of 5.01.
Browsers that support the .toFixed() function are Internet Explorer, Google Chrome, Firefox, Microsoft Edge, Opera, and Apple Safari.

Method 2: How to use the Math.round () function in JavaScript to round a number to two decimal places

Math.round() is a function that rounds the inputted number as a parameter to its nearest integer. In this method, we take the number and then add a very small number, that is, a Number.EPSILON.

Number.EPSILON is used to ensure the number’s accurate rounding. We then multiply the number by 100 before rounding it so as to extract only two digits after the decimal place. Lastly, we divide the number by 100 in order to get a maximum of 2 decimal places.

The syntax for this function is:

Math.round(number)

An example of a code with this method is shown below:

var num= 59.4863318274862938;
var round = Math.round((num + Number.EPSILON) * 100) / 100;
console.log(round);
Explanation

In the code above, we have taken a floating-point number as the input and added a small number to compare it to the input number. We will then use the number.EPSILON to provide the number’s precise rounding. After that, we multiply that number by 100 before rounding so as to fetch only two digits after the decimal place.

Once we are done with multiplication, we divide the number by 100 in order to get a maximum of two decimal places. The numb variable holds a value of 59.4863318274862938, while the built-in method, Math.round(), is used to round the number.

The number is then multiplied and divided by 100 so as to round the number to 2 decimal places. In the end, the console.log() method displays the rounding number in the console window.

The output of the code snippet written above is:

59.49

Note: The Math.round method will not work correctly for numbers such as 1.005. Take an example of the code written below:

var num=1.005;
var roundedNum=Math.round(num*100)/100;
console.log(roundedNum)

The output for the code snippet above is:

1 

To correct this behavior, you should add a Number.EPSILON to the number before multiplying it by 100. The new code for this method will be:

var numb=1.005;
var roundedNumb=Math.round((numb + Number.EPSILON)*100)/100;
console.log(roundedNumb);

The output of the code will be:

1.01

Browsers that support the Math.round() function include Internet Explorer, Chrome, Safari, Firefox, Edge, and Opera.

Method 3: How to use the parseFloat() with the toFixed() method in JavaScript to round a number to two decimal places

The parseFloat() is a function that first accepts a string input and then converts the string input to a floating-point number. In case the string input neither has a numeral value nor the first character of the string is a non-numeral, it will return NaN, which means that it is not a number.
The syntax of this function is:

parseFloat(value)

This function has one parameter called value. The value parameter accepts a string and converts the string to either a floating-point number or an integer based on the data type of the string. The code snippet of this function is written below.

demo = parseFloat("4.349948").toFixed(2)
console.log (demo);
Explanation

In the code above, we have used the parseFloat() as well as the .toFixed () method in rounding a number to two decimal places. We have entered our input as a string with a number value. The parseFloat() function will first treat the input as a number then the .toFixed method will convert the number to two decimal place floating-point numbers. The output of the code above is written below:

4.35

Method 4: How to use the .toPrecision() method in JavaScript to round a number to two decimal places

Similarly to the .toFixed() method, users can as well use the .toPrecision() function in JavaScript to format a number to either a precise length or precision. If the input number to be formatted requires more numerals than the original number, the interpreter will add decimals as well as nulls to create the specified precision.

We use the .toPrecision() method when stripping off the floating point rounding errors that were introduced during the intermediate calculations in single rounding. The syntax for this method is number.toPrecision(value)

This function has one parameter, value. This parameter defines the value of the number of significant digits that a user wants to apply to the number that has been formatted. The code snippet of this function is written below:

function round(numb) {
	var m = Number( (Math.abs(numb) * 1000).toPrecision(12) );
	return Math.round(m) / 100 * Math.sign(numb);
}
console.log(round(2.008));
Explanation

In the code above, we use the .toPrecision() method to reduce floating-point rounding errors raised during the transitional calculations in single rounds of floating-point numbers. When the code above is run, the output is as shown below:

20.08

Another code snippet for this method is written below:

function round(numb) {
    var m = Number((Math.abs(numb) * 100).toPrecision(15));
    return Math.round(m) / 100 * Math.sign(numb);
}
console.log(round(1.005))
1.01

Method 5: How to use the custom functions in JavaScript to round a number to two decimal places

The code snippet of this method is shown below:

function roundToTwo(num) {
	return + (Math.round(num + "e+3")  + "e-2");
}
console.log(roundToTwo(2.394749));
23.95
Explanation

In the snippet above, we used the Math.round() together with roundToTwo(num) function to shift and convert the input number to two decimal places. The custom function takes care of all the corner points while rounding the decimals such as 2.394749 as well as 1.005 is well calculated by this function.

Method 6: How to use creating a round prototype function in JavaScript to round to two decimal places

You can write a round prototype to add this function to a number and then directly call the round() method on the number. An example of a code with this function is as written below:

function roundNumberToNDecimal(n,places) {    
     return +(Math.round(n + "e+" + places)  + "e-" + places);
}
 
console.log(roundNumberToNDecimal(56.7892,2));
console.log(roundNumberToNDecimal(11257.45675,2));
56.79
11257.46

Conclusion

Suppose a programmer is interested in rounding a floating-point number to two decimal places. In that case, they can use the abovementioned methods. This will improve their code readability and performance. All the discussed methods are efficient ways to round the floating-point values. All the codes in this article are tested hence don’t shy away from trying them. I hope this article has been helpful in rounding numbers to two decimal places. If by chance you encounter any challenge please feel free to reach us via the message board below.

You may also like

Leave a Comment