## 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:

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];

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).