Rounding numbers for display

The second, most common datatype used in applications after text is numbers. There are many different ways of working with numbers, and we will take a look at some of these ways when a given precision is required. The first obvious option is to use the JavaScript Number object wrapper to work with numerical values.

Getting ready

The Number object contains the toFixed([digits]) method that can be used to display numbers; here the digits parameter can have a value between 0 and 20. The number will either get rounded automatically if needed, or the number will get padded with additional zeros if necessary. Ok, so let's see it in action.

How to do it...

Perform the following steps do demonstrate working with the Number object:

1. First, we'll create a list of numbers; note that the numbers have been picked intentionally to illustrate some of the characteristics of the functions:

       var listOfNumbers=
           [1.551, 1.556, 1.5444, 1.5454, 1.5464, 1.615, 1.616, 1.4, 1.446,1.45];

2. Iterate the list and display numbers using the .toFixed() method with the digits parameter's values 0, 1, and 2 accordingly:

   for (var i = 0; i < listOfNumbers.length; i++) {
         var number = listOfNumbers[i];
            // iterate over all of the numbers and write to output all the value
         document.write(number + "---"
                      + number.toFixed(2) + "---"
                      + number.toFixed(1) + "---"
                      + number.toFixed() + "<br />");
       };

How it works…

The result retrieved from executing the code will print out the numbers with their respective toFixed representation, which should be straightforward.

Let's take a look at some of the characteristic values:

• 1.616.toFixed(2) will return 1.62

• 1.4.toFixed(2) will return 1.40 as expected, adding a trailing zero

• 1.5454.toFixed() will return 2, because the default value for toFixed() is 0; this means that no decimal points, and additionally the 0.5 segment is rounded to 1 so the ceiling value is used here

• 1.615.toFixed(2) will either return 1.61, ignoring the 0.005 segment, or the floor value will be used

The toFixed() method works mostly as expected so long as we don't need the higher precision or are only using it to display numbers where the type of rounding is not mission critical.

Additionally, we cannot rely on toFixed() when we need rounding in cases where we have numbers such as 1.446 and others that fall in the same category; calling 1.446.toFixed(1) would result in inconsistent and unpredictable results.

There's more...

There are various ways to solve this. The quick and dirty solution would be to redefine the Number.prototype.toFixed() function, but we encourage you to not do so, as doing this may have side effects that are not apparent. Any redefinition of the functions from the built-in objects is considered an anti-pattern if it is not absolutely essential. The problem arises if another library or a piece of code is using the same function. The other library might expect our redefined function to work a certain way. These types of redefinitions are hard to track; even if we are to add a function instead of redefining it, someone else might do the same thing. For example, say we decided to add some function to the Number object:

Number.prototype.theFunction = function(arg1,arg2){}

There are no guarantees that someone else has not already added theFunction to the Number object. We could do additional checks to verify if the function already exists, but we cannot be sure if it does what we want it to do.

Instead, using a utility function for achieving consistent data would be a better option.

One way of tackling the problem is to first multiply the number with 10 ^ digits and then call the Math.round(number) method on the result, or you can call Math.ceil(number). For example, if you need to have the value rounded upwards to the nearest integer, use the following:

    function round(number, digits) {
        if(typeof digits === "undefined" || digits < 0){
          digits = 0;
        }
        var power = Math.pow(10, digits),
         fixed = (Math.round(number * power) / power).toString();
        return fixed;
    };

Now, as the number gets multiplied with 10 ^ digits and then gets rounded, we do not observe the problems with toFixed(). Note that this method has a different behavior from toFixed() not just in the way of how rounding is being handled, but also the addition of trailing zeroes.

A different option would be to use an arbitrary precision library such as Big.js if precision is crucial (https://github.com/MikeMcl/big.js).