Number

To help deal with numbers, JavaScript comes with the Number object. It has several useful methods as well as some nice-to-have properties, all more or less relevant when handling numbers. I won't cover all the members of this object, but we should definitely talk about a few of the most useful ones.

As we talked about in the chapter on JavaScript data types, any number defined in JavaScript is also a Number object. This means that you don't have to instantiate a Number object - as long as JavaScript knows that the variable holds a number, you can use the Number methods (which we'll discuss in this article) on it.

Number properties

Let's start with the properties. On the Number object, you'll find some useful properties mainly for knowing the values of some numerical concepts, like the highest and lowest possible values of a number in JavaScript, as well as the NaN value (Not a Number) and Infinity. These will often be used to perform checks to make sure that values fall within an expected range etc.

alert(Number.MIN_VALUE);
alert(Number.MAX_VALUE);

You can also reference Number.POSITIVE_INFINITY and Number.NEGATIVE_INFINITY if needed. Notice that these are all static properties, meaning that you access them directly on the Number object. For a full list of static properties for Number, please refer to this list.

Number methods

There are several useful methods found on the Number object. In fact, we looked at a couple of them above in a previous article of this tutorial: parseInt() and parseFloat() are globally available, but they also exist as static methods on the Number object:

let n1 = "40", n2 = "2.42";
alert(Number.parseInt(n1) + Number.parseFloat(n2));

Here are some of the other useful methods:

Number.isInteger()

This method allows you to see whether a number is an integer (a whole number without any fractional parts):

alert(Number.isInteger(10 / 5)); // 2
alert(Number.isInteger(10 / 3)); // 3,3333333333333333333333333333333

Notice that it doesn't do any of the magical JavaScript conversion for you - the value you supply must be a real number and not just something that could be converted into a number, as illustrated by this example:

alert(Number.isInteger("2")); // false
alert(Number.isInteger(2));   // true

Number.toFixed()

Use the toFixed() method to format a number using the fixed-point notation:

let n1 = 42.3333333, n2 = 42.1, n3 = 42.51;
alert(n1.toFixed(2)); // 42.33
alert(n2.toFixed(2)); // 42.10
alert(n3.toFixed(0)); // 43

The parameter specifies how many digits you want after the decimal place. As you can see from the example, this allows you to control how a number looks when presented to the user, and it will even do rounding, as illustrated by the last line.

Number.toLocaleString()

Around the world, numbers are formatted very differently. For instance, in the US, a period is used to separate the whole number and the fractional parts, but in Germany and many other European countries, a comma is used for this instead. This also means that in some countries, the comma is used as the thousand separator, while the period is used in other countries, and to top that off, some countries uses a space for this.

This obviously makes parsing numbers a difficult task, but it also makes it difficult to present a number to the user in a way that makes immediate sense to them. Fortunately, the toLocaleString() method can help us a lot in this regard. In its most simple form, it will simply format a number nicely, according to the user locale (e.g. specified by the browser of the user):

let n1 = 42000.00;
alert(n1.toLocaleString());

If you're from the US, the above code should result in "42,000", but if you're from Germany, it should result in "42.000". If you want to take control of how the number is presented, you can supply a locale as the secondary parameter, like this:

let n1 = 42000.42;
alert(n1.toLocaleString("en-US")); // 42,000.42
alert(n1.toLocaleString("de-DE")); // 42.000,42
alert(n1.toLocaleString("sv-SE")); // 42 000,42

A second parameter can be added, where you are allowed to specify options to be used when the number is formatted. There are a LOT of available options, allowing you to control pretty much all aspects of the formatting, but here's an example showing you just a bit of what is possible:

let n1 = 42000.421234;
let s1 = n1.toLocaleString("en-US", 
{ 
	style: "currency",
	currency: "USD"									
});

alert(s1); // $42,000.42

let s2 = n1.toLocaleString("en-US", 
{ 
	minimumFractionDigits: 1,
	maximumFractionDigits: 3,
	useGrouping: false
});

alert(s2); // 42000.421

Notice how the same number is formatted completely different thanks to the options we specify. For a full list of options, please consult with this reference.

Summary

When working with numbers in JavaScript, the built-in Number object is quite helpful, offering you several methods that you will likely need at some point.

In this article, we only covered some of the most useful properties and methods of the Number object. If you want to dig a bit deeper, consider having a look at this Number object reference page.