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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
console.log(Number.parseInt('0111', 2));
The line above will log 7, which is the decimal equivalent of the binary number 0111.
Photo by Andrew Buchanan on Unsplash
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:
(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:
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 thecurrency 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:
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:
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 toStringmethod 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:
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:
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:
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:
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.
Top comments (2)
Great overview! Wasn't really aware of all those methods in the Number prototype.
Yea. The only way to learn all those is to try all of them yourself.