JavaScript for impatient programmers (beta)
Please support this book: buy it or donate
(Ad, please don’t block.)

15. Numbers



This chapter covers JavaScript’s single type for numbers, number.

15.1. JavaScript only has floating point numbers

You can express both integers and floating point numbers in JavaScript:

98
123.45

However, there is only a single type for all numbers: They are all doubles, 64-bit floating point numbers implemented according to the IEEE Standard for Floating-Point Arithmetic (IEEE 754).

Integers are simply floating point numbers without a decimal fraction:

> 98 === 98.0
true

Note that, under the hood, most JavaScript engines are often able to use real integers, with all associated performance and storage size benefits.

15.2. Number literals

Let’s examine literals for numbers.

15.2.1. Integer literals

Several integer literals let you express integers with various bases:

// Binary (base 2)
assert.equal(0b11, 3);

// Octal (base 8)
assert.equal(0o10, 8);

// Decimal (base 10):
assert.equal(35, 35);

// Hexadecimal (base 16)
assert.equal(0xE7, 231);

15.2.2. Floating point literals

Floating point numbers can only be expressed in base 10.

Fractions:

> 35.0
35

Exponent: eN means ×10N

> 3e2
300
> 3e-2
0.03
> 0.3e2
30

15.2.3. Syntactic pitfall: properties of integer literals

Accessing a property of an integer literal entails a pitfall: If the integer literal is immediately followed by a dot then that dot is interpreted as a decimal dot:

7.toString(); // syntax error

There are four ways to work around this pitfall:

7.0.toString()
(7).toString()
7..toString()
7 .toString()  // space before dot

15.3. Number operators

15.3.1. Binary arithmetic operators

assert.equal(1 + 4, 5); // addition
assert.equal(6 - 3, 3); // subtraction

assert.equal(2 * 1.25, 2.5); // multiplication
assert.equal(6 / 4, 1.5); // division
assert.equal(6 % 4, 2); // remainder

assert.equal(2 ** 3, 8); // exponentiation

% is a remainder operator (not a modulo operator) – its result has the sign of the first operand:

> 3 % 2
1
> -3 % 2
-1

15.3.2. Unary plus and negation

assert.equal(+(-3), -3); // unary plus
assert.equal(-(-3), 3); // unary negation

Both operators coerce their operands to numbers:

> +'7'
7
> +'-12'
-12
> -'9'
-9

15.3.3. Incrementing (++) and decrementing (--)

The incrementation operator ++ exists in a prefix version and a suffix version. In both versions, it destructively adds one to its operand. Therefore, its operand must be a storage location that can be changed. The decrementation operator -- works the same, but subtracts one from its operand. The next two examples explain the difference between the prefix and the suffix version.

Prefix ++ and prefix --: change and then return.

let foo = 3;
assert.equal(++foo, 4);
assert.equal(foo, 4);

let bar = 3;
assert.equal(--bar, 2);
assert.equal(bar, 2);

Suffix ++ and suffix --: return and then change.

let foo = 3;
assert.equal(foo++, 3);
assert.equal(foo, 4);

let bar = 3;
assert.equal(bar--, 3);
assert.equal(bar, 2);
15.3.3.1. Operands: not just variables

You can also apply these operators to property values:

const obj = { a: 1 };
++obj.a;
assert.equal(obj.a, 2);

And to Array elements:

const arr = [ 4 ];
arr[0]++;
assert.deepEqual(arr, [5]);

  Exercise: Number operators

exercises/numbers-math/is_odd_test.js

15.4. Converting to number

These are three ways of converting values to numbers:

Recommendation: use the descriptive Number().

Examples:

assert.equal(Number(undefined), NaN);
assert.equal(Number(null), 0);

assert.equal(Number(false), 0);
assert.equal(Number(true), 1);

assert.equal(Number(123), 123);

assert.equal(Number(''), 0);
assert.equal(Number('123'), 123);
assert.equal(Number('xyz'), NaN);

How objects are converted to numbers can be configured. For example, by overriding .valueOf():

> Number({ valueOf() { return 123 } })
123

  Exercise: Converting to number

exercises/numbers-math/parse_number_test.js

15.5. Error values

Two number values are returned when errors happen:

15.6. Error value: NaN

NaN is an abbreviation of “not a number”. Ironically, JavaScript considers it to be a number:

> typeof NaN
'number'

When is NaN returned?

NaN is returned if a number can’t be parsed:

> Number('$$$')
NaN
> Number(undefined)
NaN

NaN is returned if an operation can’t be performed:

> Math.log(-1)
NaN
> Math.sqrt(-1)
NaN

NaN is returned if an operand or argument is NaN (to propagate errors):

> NaN - 3
NaN
> 7 ** NaN
NaN

15.6.1. Checking for NaN

NaN is the only JavaScript value that is not strictly equal to itself:

const n = NaN;
assert.equal(n === n, false);

These are several ways of checking if a value x is NaN:

const x = NaN;

assert.equal(Number.isNaN(x), true); // preferred
assert.equal(Object.is(x, NaN), true);
assert.equal(x !== x, true);

In the last line, we use the comparison quirk to detect NaN.

15.6.2. Finding NaN in Arrays

Some Array methods can’t find NaN:

> [NaN].indexOf(NaN)
-1

Others can:

> [NaN].includes(NaN)
true
> [NaN].findIndex(x => Number.isNaN(x))
0
> [NaN].find(x => Number.isNaN(x))
NaN

Alas, there is no simple rule of thumb, you have to check for each method, how it handles NaN.

15.7. Error value: Infinity

When is the error value Infinity returned?

Infinity is returned if a number is too large:

> Math.pow(2, 1023)
8.98846567431158e+307
> Math.pow(2, 1024)
Infinity

Infinity is returned if there is a division by zero:

> 5 / 0
Infinity
> -5 / 0
-Infinity

15.7.1. Infinity as a default value

Infinity is larger than all other numbers (except NaN), making it a good default value:

function findMinimum(numbers) {
  let min = Infinity;
  for (const n of numbers) {
    if (n < min) min = n;
  }
  return min;
}

assert.equal(findMinimum([5, -1, 2]), -1);
assert.equal(findMinimum([]), Infinity);

15.7.2. Checking for Infinity

These are two common ways of checking if a value x is Infinity:

const x = Infinity;

assert.equal(x === Infinity, true);
assert.equal(Number.isFinite(x), false);

  Exercise: Comparing numbers

exercises/numbers-math/find_max_test.js

15.8. The precision of numbers: careful with decimal fractions

Internally, JavaScript floating point numbers are represented with base 2 (according to the IEEE 754 standard). That means that decimal fractions (base 10) can’t always be represented precisely:

> 0.1 + 0.2
0.30000000000000004
> 1.3 * 3
3.9000000000000004
> 1.4 * 100000000000000
139999999999999.98

You therefore need to take rounding errors into consideration when performing arithmetic in JavaScript.

Read on for an explanation of this phenomenon.

  Quiz: basic

See quiz app.

15.9. (Advanced)

All remaining sections of this chapter are advanced.

15.10. Background: floating point precision

In JavaScript, computations with numbers don’t always produce precise results. For example:

> 0.1 + 0.2
0.30000000000000004

To understand why, we need to explore how JavaScript represents floating point numbers internally. It uses three integers to do so, as described in tbl. 5.

Table 5: Internally, JavaScript uses three integers to represent floating point numbers. They take up a total of 64 bits of storage (double precision).
Component Size Integer range
sign 1 bit [0, 1]
fraction 52 bits [0, 252−1]
exponent 11 bits [−1023, 1024]

The floating point number represented by these integers is computed as follows:

(–1)sign × 0b1.fraction × 2exponent

To make further discussions easier, we simplify this representation:

The new representation works like this:

mantissa × 10exponent

Let’s try out this representation for a few floating point numbers.

Representations with negative exponents can also be written as fractions with positive exponents in the denominators:

> 15 * (10 ** -1) === 15 / 10
true
> 25 * (10 ** -2) === 25 / 100
true

These fractions help with understanding why there are numbers that our encoding cannot represent:

To conclude out excursion, we switch back to base 2:

Now we can see why 0.1 + 0.2 doesn’t produce a precise result: Internally, neither of the two operands can be represented precisely.

The only way to compute precisely with decimal fractions is by internally switching to base 10. For many programming languages, base 2 is the default and base 10 an option. For example, Java has the class BigDecimal and Python has the module decimal. There are tentative plans to add something similar to JavaScript: The ECMAScript proposal “Decimal” is currently at stage 0.

15.11. Integers in JavaScript

JavaScript doesn’t have a special type for integers. Instead, they are simply normal (floating point) numbers without a decimal fraction:

> 1 === 1.0
true
> Number.isInteger(1.0)
true

In this section, we’ll look at a few tools for working with these pseudo-integers.

15.11.1. Converting to integer

The recommended way of converting numbers to integers is to use one of the rounding methods of the Math object (which is documented in the next chapter):

Tbl. 6 shows the results of these functions for various inputs.

Table 6: Functions for converting numbers to integers. Note how things change with negative numbers, because “larger” always means “closer to positive infinity”.
-2.9 -2.5 -2.1 2.1 2.5 2.9
Math.floor -3 -3 -3 2 2 2
Math.ceil -2 -2 -2 3 3 3
Math.round -3 -2 -2 2 3 3
Math.trunc -2 -2 -2 2 2 2

15.11.2. Ranges of integers in JavaScript

These are important ranges of integers in JavaScript:

15.11.3. Safe integers

This is the range of integers that are safe in JavaScript:

[–253–1, 253–1]

An integer is safe if it is represented by exactly one JavaScript number. Given that JavaScript numbers are encoded as a fraction multiplied by 2 to the power of an exponent, higher integers can also be represented, but then there are gaps between them.

For example (18014398509481984 is 254):

> 18014398509481984
18014398509481984
> 18014398509481985
18014398509481984
> 18014398509481986
18014398509481984
> 18014398509481987
18014398509481988

The following properties of Number help determine if an integer is safe:

assert.equal(Number.MAX_SAFE_INTEGER, (2 ** 53) - 1);
assert.equal(Number.MIN_SAFE_INTEGER, -Number.MAX_SAFE_INTEGER);

assert.equal(Number.isSafeInteger(5), true);
assert.equal(Number.isSafeInteger('5'), false);
assert.equal(Number.isSafeInteger(5.1), false);
assert.equal(Number.isSafeInteger(Number.MAX_SAFE_INTEGER), true);
assert.equal(Number.isSafeInteger(Number.MAX_SAFE_INTEGER+1), false);

  Exercise: Detecting safe integers

exercises/numbers-math/is_safe_integer_test.js

15.11.3.1. Safe computations

Let’s look at computations involving unsafe integers.

The following result is incorrect and unsafe, even though both of its operands are safe.

> 9007199254740990 + 3
9007199254740992

The following result is safe, but incorrect. The first operand is unsafe, the second operand is safe.

> 9007199254740995 - 10
9007199254740986

Therefore, the result of an expression a op b is correct if and only if both operands and the result are safe:

isSafeInteger(a) && isSafeInteger(b) && isSafeInteger(a op b)

15.12. Bitwise operators

JavaScript’s bitwise operators work as follows:

Internally, the operators use the following integer ranges (input and output):

The results of some of these operators are easiest to understand if we display them as unsigned 32-bit integers, in binary notation. That’s what b32() does (whose implementation is shown later):

assert.equal(
  b32(-1),
  '11111111111111111111111111111111');
assert.equal(
  b32(1),
  '00000000000000000000000000000001');
assert.equal(
  b32(2 ** 31),
  '10000000000000000000000000000000');

15.12.1. Binary bitwise operators

Table 7: Binary bitwise operators.
Operation Name
num1 & num2 Bitwise And
num1 | num2 Bitwise Or
num1 ^ num2 Bitwise Xor

The binary operators (tbl. 7) combine the bits of their operands to produce their results:

> (0b1010 & 0b11).toString(2).padStart(4, '0')
'0010'
> (0b1010 | 0b11).toString(2).padStart(4, '0')
'1011'
> (0b1010 ^ 0b11).toString(2).padStart(4, '0')
'1001'

15.12.2. Bitwise Not

Table 8: The bitwise Not operator.
Operation Name
~num Bitwise Not, ones’ complement

The bitwise Not operator (tbl. 8) inverts each binary digit of its operand:

> b32(~0b100)
'11111111111111111111111111111011'

15.12.3. Bitwise shift operators

Table 9: Bitwise shift operators.
Operation Name
num << count Left shift
num >> count Signed right shift
num >>> count Unsigned right shift

The shift operators (tbl. 9) move binary digits to the left or to the right:

> (0b10 << 1).toString(2)
'100'

>> preserves highest bit, >>> doesn’t:

> b32(0b10000000000000000000000000000010 >> 1)
'11000000000000000000000000000001'
> b32(0b10000000000000000000000000000010 >>> 1)
'01000000000000000000000000000001'

15.12.4. b32(): displaying 32-bit integers in binary notation

We have now used b32() a few times. The following code is an implementation of it.

/**
 * Return a string representing n as a 32-bit unsigned integer,
 * in binary notation.
 */
function b32(n) {
  // >>> ensures highest bit isn’t interpreted as a sign
  return (n >>> 0).toString(2).padStart(32, '0');
}
assert.equal(
  b32(6),
  '00000000000000000000000000000110');

n >>> 0 means that we are shifting n zero bits to the right. Therefore, in principle, the >>> operator does nothing, but it still coerces n to an unsigned 32-bit integer:

> 12 >>> 0
12
> -12 >>> 0
4294967284
> (2**32 + 1) >>> 0
1

15.13. Quick reference: numbers

15.13.1. Converting to number

Tbl. 10 shows what happens if you convert various values to numbers via Number().

Table 10: Converting values to numbers.
x Number(x)
undefined NaN
null 0
boolean false 0, true 1
number x (no change)
string '' 0
other parsed number, ignoring leading/trailing whitespace
object configurable (e.g. via .valueOf())

15.13.2. Arithmetic operators

JavaScript has the following arithmetic operators:

Table 11: Binary arithmetic operators.
Operator Name Example
n + m Addition ES1 3 + 4 7
n - m Subtraction ES1 9 - 1 8
n * m Multiplication ES1 3 * 2.25 6.75
n / m Division ES1 5.625 / 5 1.125
n % m Remainder ES1 8 % 5 3
-8 % 5 -3
n ** m Exponentiation ES2016 4 ** 2 16
Table 12: Prefix and suffix arithmetic operators
Operator Name Example
+n Unary plus ES1 +(-7) -7
-n Unary negation ES1 -(-7) 7
v++ Increment ES1 let v=0; [v++, v] [0, 1]
++v Increment ES1 let v=0; [++v, v] [1, 1]
v-- Decrement ES1 let v=1; [v--, v] [1, 0]
--v Decrement ES1 let v=1; [--v, v] [0, 0]

15.13.3. Bitwise operators

JavaScript has the following bitwise operators:

Operands and results of bitwise operators:

The helper function b32() for displaying binary numbers is shown earlier in this chapter.

Table 13: Bitwise And, Or, Xor, Not.
Operator Name Example
i & j Bitwise And ES1 (0b1010 & 0b1100).toString(2) '1000'
i | j Bitwise Or ES1 (0b1010 | 0b1100).toString(2) '1110'
i ^ j Bitwise Xor ES1 (0b1010 ^ 0b0011).toString(2) '1001'
~i Bitwise Not ES1 ~0b11111111111111111111111111111110 1
Table 14: Bitwise shift operators.
Operator Name Example
i << j Left shift ES1 (0b1 << 1).toString(2) '10'
i >> j Signed right shift ES1 b32(0b10000000000000000000000000000010 >> 1)
'11000000000000000000000000000001'
i >>> j Unsigned right shift ES1 b32(0b10000000000000000000000000000010 >>> 1)
'01000000000000000000000000000001'

15.13.4. Global functions for numbers

JavaScript has the following four global functions for numbers:

However, it is better to use the corresponding methods of Number, which have fewer pitfalls: Number.isFinite(), Number.isNaN(), Number.parseFloat(), Number.parseInt(). They were introduced with ES6 and are discussed below.

15.13.5. Static properties of Number

15.13.6. Static methods of Number

15.13.7. Methods of Number.prototype

15.13.8. Sources

  Quiz: advanced

See quiz app.