Using the JavaScript Number Object
Tags: webdev, tutorial, beginners, javascript
Published: 2020-01-20 00:50:54

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

The `Number` JavaScript object is a wrapper object that lets us work with numbers by providing us with various constants and methods. A primitive number can be created by the `Number()` function. A JavaScript number is a double-precision 64-bit binary format IEEE 754 value.

* * *

Creating a Number Object
========================

We create a `Number` object using the `Number` function by writing the following code:

```javascript
new Number('123');   
const a = new Number('123');  
const b = Number('123');
```

The main purpose of the `Number` function is to create a number from a string. The `Number` constructor used with the `new` operator is for creating a `Number` object, which is of type “object” instead of “number.” A number primitive isn’t an instance of `Number`. The data type for a primitive number value is a number. The type with the `typeof` operator and the constructor that it’s constructed from with the `instanceof` operator, are as in the following code:

```javascript
console.log(typeof new Number('123'));  
console.log(new Number('123') instanceof Number);
```

We get “object” and `true` respectively when we run the two lines of code above. On the other hand, if we write this code instead:

```javascript
console.log(typeof Number('123'));  
console.log(Number('123') instanceof Number);
```

We get `number` and `false` respectively.

The primary uses of the `Number` object are for checking if an object can be converted to a number. If a non-number is passed into the `Number` function, we get `NaN` returned. If the `Number` is used without the `new` operator in a non-constructor context, it’s handy to use for type conversion.

The `Number` object has the following properties:

*   `Number.EPSILON`: the smallest interval between two representable numbers.
*   `Number.MAX_SAFE_INTEGER`: the maximum safe integer in JavaScript, 2⁵³ minus 1.
*   `Number.MAX_VALUE`: the largest positive representable number (1.7976931348623157e+308).
*   `Number.MIN_SAFE_INTEGER`: the minimum safe integer in JavaScript, -2⁵³ minus 1.
*   `Number.MIN_VALUE`: the smallest positive representable number; the positive number closest to zero without actually being zero.
*   `Number.NaN`: the "not a number" value.
*   `Number.NEGATIVE_INFINITY`: value representing negative infinity.
*   `Number.POSITIVE_INFINITY`: value representing infinity.

* * *

Static Methods
==============

The `Number` object has a few static methods.

`Number.isNaN()`
----------------

Determines whether the passed value is `NaN`. Returns `true` if a variable’s value is `NaN`. For example, we can use it to determine if an object is a number with the following code:

```javascript
console.log(Number.isNaN(+'abc')); // true  
console.log(Number.isNaN(+'123')); // false
```

The first line logs `true` because when `'abc'` is converted to a number with the unary `+` operator, we get `NaN`. On the other hand, the second line logs `false` because when `'123'` is converted to a number with a `+` operator, we get `123`, which is a number, so the second line logs `false`.

`Number.isFinite()`
-------------------

Determines whether the passed value is a finite number. Returns `true` if a number is finite and `false` otherwise. For example, we can use it to determine if an object is a number with the following code:

```javascript
console.log(Number.isFinite(Infinity)); // false  
console.log(Number.isFinite(123)); // true
```

We get `false` for the first line because `Infinity` isn’t a finite number, but the second line logs `true` because `123` is a finite number.

`Number.isInteger()`
--------------------

Determines whether the passed value is an integer. Returns `true` if the number is an integer and `false` otherwise. For example, we can use this method as in the following code:

```javascript
console.log(Number.isInteger(123)); // true  
console.log(Number.isInteger(123.45)); // false
```

The first line logs `true` because `123` is an integer, but the second line logs `false` because it’s not an integer. If the argument passed is not of the number type then it will return `false`. For example, `Number.isInteger('10');` will return `false`.

`Number.isSafeInteger()`
------------------------

Determines whether an integer passed in the argument is within the range of a safe integer, i.e. if the number is between -2⁵³ minus 1 and 2⁵³ minus 1. For example, if we have:

```javascript
console.log(Number.isSafeInteger(Math.pow(2, 53) - 1)); // true  
console.log(Number.isSafeInteger(Math.pow(2, 53))); // false
```

The first line logs `true` because `Math.pow(2, 53) — 1` is within the safe range, but the second line logs `false` because `Math.pow(2, 53)` is not in the safe range.

`Number.parseFloat()`
---------------------

The `parseFloat` method converts a string that’s passed into the argument and returns a number that’s parsed from the string as a floating-point number. If it can’t be parsed, then `NaN` is returned. For example, if we have:

```javascript
console.log(Number.parseFloat('123.45'));  
console.log(Number.parseFloat('123'));  
console.log(Number.parseFloat('abc'));
```

We get `123.45` from the first line, `123` from the second line, and `NaN` from the third line.

`Number.parseInt()`
-------------------

The `parseInt` method converts a string that’s passed into the argument and returns a number that’s parsed from the string as a whole number. If the first character of the string can’t be parsed, and the `radix` is smaller than 11, then `NaN` is returned. For example, if we have:

```javascript
console.log(Number.parseFloat('123.45'));  
console.log(Number.parseFloat('123'));  
console.log(Number.parseFloat('abc'));
```

Then we get `123` from the first line and second line, and `NaN` from the third line.

It also takes a `radix` as the second argument, which is the base of the mathematical numeral systems. If the string starts with `0x` then the `radix` will be set to 16. If the string starts with anything else, then the `radix` will be set to 10.

To convert a hexadecimal string into a number, we can write something like the following:

```javascript
console.log(Number.parseInt('0x1'));
```

We get `1` when the last line is run. To convert a binary string to decimal, we can write something like:

```javascript
console.log(Number.parseInt('0111', 2));
```

The line above will log `7`, which is the decimal equivalent of the binary number `0111`.

* * *

<img class="do t u hm ak" src="https://miro.medium.com/max/8000/0\*azxvdPlJ5DchQYGA" width="4000" height="2423" role="presentation"/>

Photo by [Andrew Buchanan](https://unsplash.com/@photoart2018?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

Instance Methods
================

All `Number` instances inherit from `Number.prototype`, which provides the object with a few instance methods. The instance methods for `Number` follow.

`Number.toExponential()`
------------------------

The `toExponential` method returns a string representing the number in exponential notation. It takes an optional that specifies the number of fractional digits to include. For example, we can write:

```javascript
(123).toExponential(1);
```

Then we get `1.2e+2`.

`Number.toFixed()`
------------------

The `toFixed` method returns a string representing the number in fixed-point notation. It takes an optional that specifies the number of fractional digits to include after the decimal point. For example, we can write:

```javascript
console.log((123).toFixed(1));
```

And we get `123.0`.

`Number.toLocaleString()`
-------------------------

This method returns a string with a language-sensitive representation of the number. It overrides the `Object.prototype.toLocaleString()` method. The first argument is the `locales` argument, which takes one locale string or an array of locale strings. This is an optional argument. It takes a BCP 47 language tag with the optional Unicode extension key `nu` to specify the numbering system for formatting the number. Possible values for `nu` include: `"arab"`, `"arabext"`, `"bali"`, `"beng"`, `"deva"`, `"fullwide"`, `"gujr"`, `"guru"`, `"hanidec"`, `"khmr"`, `"knda"`, `"laoo"`, `"latn"`, `"limb"`, `"mlym"`, `"mong"`, `"mymr"`, `"orya"`, `"tamldec"`, `"telu"`, `"thai"`, `"tibt"`. The instance of the object created by the constructor has the `format` method return a string with the formatted number.

The second argument accepts an object with a few properties: `localeMatcher`, `style`, `unitDisplay`, `currency`, `useGrouping`, `minimumIntegerDigits`, `minimumFractionDigits`, `maximumFractionDigits`, `minimumSignificantDigits`, and `maximumSignificantDigits`.

The `localeMatcher` option specifies the locale-matching algorithm to use. The possible values are `lookup` and `best fit`. The lookup algorithm searches for the locale until it finds the one that fits the character set of the strings that are being compared. `best fit` finds the locale that is at least as, but possibly more-suited than the `lookup` algorithm.

Style
-----

The `style` option specifies the formatting style to use. Possible values for the `style` option include `decimal`, `currency`, `percent`, and `unit`. `decimal` is the default option and it’s used for plain number formatting, `currency` is for currency formatting, `percent` is for percent formatting, and `unit` is for `unit` formatting.

Possible values for the`currency` property are ISO 4217 currency codes, such as `USD` for the U.S. dollar and `EUR` for Euro. There’s no default value. If the `style` property is set to `currency` then the `currency` property must be provided. The `currencyDisplay` property sets how the currency is displayed in currency formatting. Possible values are `symbol` for adding localized currency symbols and is the default value, `code` is for adding the ISO currency code, `name` to use a localized currency name such as “dollar.” `useGrouping` option is for setting the grouping separator to use for numbers. It’s a boolean value.

`minimumIntegerDigits`, `minimumFractionDigits`, and `maximumFractionDigits` are considered one group of options. `minimumIntegerDigits` specifies the minimum number of integer digits to use, ranging from 1 to 21, with 1 being the default option. `minimumFractionDigits` is the minimum number of fraction digits to use, ranging from 0 to 20. The default is 0 for plain number and percent formatting. The default for currency formatting is specified by the ISO 4217 currency code list, and 2 if it’s not specified in the list. `maximumFractionDigits` is the maximum number of fraction digits to use, with possible values ranging from 0 to 20. The default for plain numbers is the maximum between `minimumFractionDigits` and 3. The default for currency formatting is the maximum between `minimumFractionDigits` and the number of fractional unit digits provided by the ISO 4217 currency code list, or 2 if the list doesn't provide that information. The default for percent formatting is the maximum between `minimumFractionDigits` and 0.

`minimumSignificantDigits` and `maximumSignificantDigits` are considered as another group of options. If at least one of the options in this group is defined, then the first group is ignored. `minimumSignificantDigits` is the minimum number of significant digits to use, with possible values ranging from 1 to 21 with the default being 1. `maximumSignificantDigits` is the maximum number of significant digits to use, with possible values ranging from 1 to 21, with the default being 21.

For example, we can use this method in the following examples:

```javascript
const number = 123.45;
console.log(number.toLocaleString('fr', {
  style: 'currency',
  currency: 'EUR'
}));
console.log(number.toLocaleString('zh-Hant-CN-u-nu-hanidec', {
  style: 'currency',
  currency: 'JPY'
}))
console.log(number.toLocaleString('en-IN', {
  maximumSignificantDigits: 3
}));
```

The first `console.log` statement will log `123,45 €`, the second `console.log` will log `¥一二三`, and the third `console.log` will get `123`.

`Number.toPrecision()`
----------------------

The `toPrecision` method returns a string representing the number to a specified precision in fixed-point or exponential notation. It takes an argument that optionally lets us specify the base between 1 and 100. If it’s not specified then all digits after the decimal point will be returned. For example, we can use it as in the following code:

```javascript
const numObj = 5.12345;
console.log(numObj.toPrecision());  
console.log(numObj.toPrecision(100));  
console.log(numObj.toPrecision(5));  
console.log(numObj.toPrecision(2));  
console.log(numObj.toPrecision(1));
```

We get the following logged for each line:

```
5.123455.1234500000000000596855898038484156131744384765625000000000000000000000000000000000000000000000000005.12355.15
```

`Number.toString()`
-------------------

The `toString`method returns a string representing the specified object in the specified `radix`, or base of the number. It overrides the `Object.prototype.toString()` method. The `radix` is an optional argument that lets us specify the base between 2 and 36. The default `radix` is 10. If the number is negative the sign is preserved. If it’s not a whole number, then a dot sign will be used to separate the decimal places. For example, we can write:

```javascript
const count = 10;  
  
console.log(count.toString());    // '10'  
console.log((15).toString());     // '15'  
console.log((15.2).toString());   // '15.2'
```

It also works for non-decimal numbers. For example, we can write:

```
console.log((-0b0111).toString(10)); // '-7'
```

It’s handy for converting numbers of different bases to other numbers.

`Number.valueOf()`
------------------

The `valueOf` method returns the primitive value of the specified object. It overrides the `Object.prototype.valueOf()` method. For example, if we have a `Number` object constructed with the `new` operator, we can write:

```javascript
const numObj = new Number('10');  
const numPrim = numObj.valueOf();  
console.log(numPrim);  
console.log(typeof numPrim);
```

We get the following logged when the code above is run:

```
10  
number
```

* * *

Converting Other Objects to Numbers
===================================

With the `Number` function, we can convert `Date` objects and `null` to numbers. For example, for `Date` objects, we can write:

```javascript
const d = new Date(2019, 0, 1, 0, 0, 0);  
console.log(Number(d));
```

We get `1546329600000`, which is the UNIX timestamp for January 1, 2019. The `null` object will be converted to 0, so if we write:

```javascript
console.log(Number(null));
```

We get 0.

* * *

Conclusion
==========

The `Number` JavaScript object is a wrapper object that lets us work with numbers by providing us with various constants and methods. A primitive number can be created by the `Number()` function. It has a number of useful static and instance methods for checking numbers and converting between strings and numbers and vice versa. The `toString` method is also handy for converting numbers to different bases.