WebGuide `Number`

WebGuide of the primitive type 'number', which provides additional methods for working with numbers.

Time to read: 5 min

Briefly

Number — is a wrapper over the primitive numeric type, which contains additional values and methods for working with numbers:

checks for special values isNaN(), isFinite();
converting to string toString() and toLocaleString().

Numbers are automatically wrapped in the Number wrapper when method calls are made on them.

How to Write

You can manually wrap numbers in Number by calling the constructor new Number():

        
          
          const primitive = 50const num = new Number(100)
          const primitive = 50
const num = new Number(100)

In this case, the variables primitive and num will be of different types:

        
          
          console.log(typeof primitive)// numberconsole.log(typeof num)// objectconsole.log(num == 100)// true, when coerced to numeric type// the values will be the sameconsole.log(num === 100)// false, because they are different data types
          console.log(typeof primitive)
// number

console.log(typeof num)
// object

console.log(num == 100)
// true, when coerced to numeric type
// the values will be the same

console.log(num === 100)
// false, because they are different data types

You can call methods on the primitive, JavaScript will automatically wrap it:

        
          
          const primitive = 5.001console.log(primitive.toFixed(1))// '5.0'console.log(6.04.toFixed(1))// '6.0'
          const primitive = 5.001
console.log(primitive.toFixed(1))
// '5.0'

console.log(6.04.toFixed(1))
// '6.0'

If you need to call methods on an integer, you either need to wrap the number in parentheses or use the dot twice:

        
          
          console.log((5).toFixed(3))// '5.000'console.log(6..toFixed(3))// '6.000'
          console.log((5).toFixed(3))
// '5.000'

console.log(6..toFixed(3))
// '6.000'

How to Understand

Usually, in JavaScript, you work with the primitive numeric type. For example, const num = 58.

The wrapper contains additional functions and methods for working with numbers. They are not part of the standard data type 'number' and are therefore separated into a separate module.

The wrapper is used automatically and does not require additional work from the programmer. JavaScript wraps the number itself when the programmer calls a method that is in the wrapper.

Checks for Special Values

The data type 'number' contains three special values: NaN, Infinity and -Infinity.

The wrapper provides two useful functions for checking special values.

1️⃣ The function Number.isNaN() — a native way to check a value for NaN, because NaN is not equal to anything, even itself:

        
          
          const nanResult = 5 * undefinedconsole.log(nanResult == NaN)// falseconsole.log(nanResult === NaN)// falseconsole.log(Number.isNaN(nanResult))// true
          const nanResult = 5 * undefined
console.log(nanResult == NaN)
// false

console.log(nanResult === NaN)
// false

console.log(Number.isNaN(nanResult))
// true

2️⃣ The function Number.isFinite() — checks that the value is not special. Returns true if a number was passed to it, and false if a special value or non-numeric type:

        
          
          const number = 4const nan = NaNconst inf = Infinityconst string = 'hello'console.log(Number.isFinite(number))// trueconsole.log(Number.isFinite(nan))// falseconsole.log(Number.isFinite(inf))// falseconsole.log(Number.isFinite(string))// false
          const number = 4
const nan = NaN
const inf = Infinity
const string = 'hello'

console.log(Number.isFinite(number))
// true
console.log(Number.isFinite(nan))
// false
console.log(Number.isFinite(inf))
// false
console.log(Number.isFinite(string))
// false

Formatting a Number

The wrapper contains several methods for formatting a number.

1️⃣ The method toString() converts a number to a string in the specified numeral system. By default, the decimal system is used, but you can use another:

        
          
          const num = 5console.log(num.toString())// '5'console.log(num.toString(2))// '101' in binary numeral system
          const num = 5

console.log(num.toString())
// '5'

console.log(num.toString(2))
// '101' in binary numeral system

2️⃣ The method toFixed() converts a number to a string with a specified number of decimal places. If necessary, the number is rounded:

        
          
          const num = 10.468console.log(num.toFixed(4))// '10.4680'console.log(num.toFixed(3))// '10.468'console.log(num.toFixed(2))// '10.47'console.log(num.toFixed(1))// '10.5'console.log(num.toFixed(0))// '10'
          const num = 10.468
console.log(num.toFixed(4))
// '10.4680'
console.log(num.toFixed(3))
// '10.468'
console.log(num.toFixed(2))
// '10.47'
console.log(num.toFixed(1))
// '10.5'
console.log(num.toFixed(0))
// '10'

If you need to round to an integer, then you can omit the zero when calling:

        
          
          const num = 10.468console.log(num.toFixed())// '10'
          const num = 10.468
console.log(num.toFixed())
// '10'

3️⃣ The method toLocaleString() converts a number to a string, taking the user’s locale into account.

The locale is information about the user's language, as well as regional settings: which number symbols are used, which delimiters between digits are considered standard, and so on.

A locale is a string formed according to the specification. The most commonly used forms are:

language_code. For example, 'ru' (Russian), 'de' (German), 'en' (English).
language_code-region_code. For example, de-AT (Austrian German), 'en-US' (American English), es-AR (Argentinian Spanish).

By default, the browser's locale is used, but you can pass any as the first argument.

        
          
          const bigNumber = 100_000_000console.log(bigNumber.toLocaleString("ru"))// 100 000 000console.log(bigNumber.toLocaleString("en-US"))// 100,000,000console.log(bigNumber.toLocaleString("ar-SA"))// ١٠٠٬٠٠٠٬٠٠٠
          const bigNumber = 100_000_000

console.log(bigNumber.toLocaleString("ru"))
// 100 000 000

console.log(bigNumber.toLocaleString("en-US"))
// 100,000,000

console.log(bigNumber.toLocaleString("ar-SA"))
// ١٠٠٬٠٠٠٬٠٠٠

Open demo in the new window

The second argument of the method can be passed an object with fine formatting options. For example, specifying that the formatted number is money:

        
          
          const bigNumber = 100_000_000console.log(bigNumber.toLocaleString('es',  { style: 'currency', currency: 'EUR' }))// 100.000.000,00 €console.log(bigNumber.toLocaleString('ru',{ style: 'currency', currency: 'RUB', minimumFractionDigits: 0 }))// 100 000 000 ₽
          const bigNumber = 100_000_000
console.log(bigNumber.toLocaleString('es',
  { style: 'currency', currency: 'EUR' }))
// 100.000.000,00 €

console.log(bigNumber.toLocaleString('ru',
{ style: 'currency', currency: 'RUB', minimumFractionDigits: 0 }))
// 100 000 000 ₽

Constants

The wrapper stores several useful constants:

Number.MAX_SAFE_INTEGER — the maximum possible integer value of the numeric type, 2⁵³-1;
Number.MIN_SAFE_INTEGER — the minimum possible integer value of the numeric type, -2⁵³-1;
Number.MAX_VALUE — the largest number representable with the numeric type;
Number.MIN_VALUE — the smallest positive number representable with the numeric type.

It is important to note that Number.MAX_VALUE is much larger than Number.MAX_SAFE_INTEGER due to the peculiarities of floating-point number storage.

In practice

Advice 1

🛠 Do not manually create a wrapper: there are no cases where JavaScript cannot handle this by itself.

🛠 If you call Number as a function, it converts the provided argument to a numerical type. If it cannot be converted, it will return NaN. For example:

        
          
          Number('123')// 123Number('12.3')// 12.3Number('12.00')// 12Number('')// 0Number(null)// 0Number('0x11')// 17Number('0b11')// 3Number('0o11')// 9Number('foo')// NaNNumber('100a')// NaN
          Number('123')
// 123
Number('12.3')
// 12.3
Number('12.00')
// 12
Number('')
// 0
Number(null)
// 0
Number('0x11')
// 17
Number('0b11')
// 3
Number('0o11')
// 9
Number('foo')
// NaN
Number('100a')
// NaN

This way, you can avoid using the functions parseInt() and parseFloat(), for example, when parsing a number from an input field.

Briefly

How to Write

How to Understand

Checks for Special Values

Formatting a Number

Constants

In practice

Advice 1

Read also

Type Conversion

String

Function