JavaScript has only one type of number. Numbers can be written with or without decimals.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with or without decimals:</p>
<p id="demo"></p>
<script>
let x = 3.14;
let y = 3;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
Numbers can be written with or without decimals:
3.14
3
Extra large or extra small numbers can be written with scientific (exponent) notation:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Extra large or extra small numbers can be written with scientific (exponent) notation:</p>
<p id="demo"></p>
<script>
let x = 123e5;
let y = 123e-5;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
Extra large or extra small numbers can be written with scientific (exponent) notation:
12300000
0.00123
JavaScript Numbers are Always 64-bit Floating Point
Unlike many other programming languages, JavaScript does not define different types of numbers, like integers, short, long, floating-point etc.
JavaScript numbers are always stored as double precision floating point numbers, following the international IEEE 754 standard.
This format stores numbers in 64 bits, where the number (the fraction) is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:
| Value (aka Fraction/Mantissa) | Exponent | Sign |
|---|---|---|
| 52 bits (0 – 51) | 11 bits (52 – 62) | 1 bit (63) |
Integer Precision
Integers (numbers without a period or exponent notation) are accurate up to 15 digits.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>
<p id="demo"></p>
<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;/script>
</body>
</html>
Result:
JavaScript Numbers
Integers (numbers without a period or exponent notation) are accurate up to 15 digits:
999999999999999
10000000000000000
The maximum number of decimals is 17.
Floating Precision
Floating point arithmetic is not always 100% accurate:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Floating point arithmetic is not always 100% accurate.</p>
<p id="demo"></p>
<script>
let x = 0.2 + 0.1;
document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
</script>
</body>
</html>
Result:
JavaScript Numbers
Floating point arithmetic is not always 100% accurate.
0.2 + 0.1 = 0.30000000000000004
To solve the problem above, it helps to multiply and divide:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Floating point arithmetic is not always 100% accurate:</p>
<p id="demo1"></p>
<p>But it helps to multiply and divide:</p>
<p id="demo2"></p>
<script>
let x = 0.2 + 0.1;
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
let y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
Floating point arithmetic is not always 100% accurate:
0.2 + 0.1 = 0.30000000000000004
But it helps to multiply and divide:
0.2 + 0.1 = 0.3
Adding Numbers and Strings
WARNING !!
JavaScript uses the + operator for both addition and concatenation.
Numbers are added. Strings are concatenated.
If you add two numbers, the result will be a number:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add two numbers, the result will be a number:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = 20;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
If you add two numbers, the result will be a number:
30
If you add two strings, the result will be a string concatenation:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add two numeric strings, the result will be a concatenated string:</p>
<p id="demo"></p>
<script>
let x = "10";
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
If you add two numeric strings, the result will be a concatenated string:
1020
If you add a number and a string, the result will be a string concatenation:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add a number and a numeric string, the result will be a concatenated string:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
If you add a number and a numeric string, the result will be a concatenated string:
1020
If you add a string and a number, the result will be a string concatenation:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add a numeric string and a number, the result will be a concatenated string:</p>
<p id="demo"></p>
<script>
let x = "10";
let y = 20;
document.getElementById("demo").innerHTML = "The result is: " + x + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
If you add a numeric string and a number, the result will be a concatenated string:
The result is: 1020
A common mistake is to expect this result to be 30:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A common mistake is to expect this result to be 30:</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
document.getElementById("demo").innerHTML =
"The result is: " + x + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
A common mistake is to expect this result to be 30:
The result is: 1020
A common mistake is to expect this result to be 102030:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A common mistake is to expect this result to be 102030:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Result:
JavaScript Numbers
A common mistake is to expect this result to be 102030:
3030
The JavaScript interpreter works from left to right.
First 10 + 20 is added because x and y are both numbers.
Then 30 + “30” is concatenated because z is a string.
Numeric Strings
JavaScript strings can have numeric content:let x = 100; // x is a number
let y = “100”; // y is a string
JavaScript will try to convert strings to numbers in all numeric operations:
This will work:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when dividing:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
JavaScript will try to convert strings to numbers when dividing:
10
This will also work:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when multiplying:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
JavaScript will try to convert strings to numbers when multiplying:
1000
And this will work:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when subtracting:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
JavaScript will try to convert strings to numbers when subtracting:
90
But this will not work:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will NOT convert strings to numbers when adding:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Numbers
JavaScript will NOT convert strings to numbers when adding:
10010
In the last example JavaScript uses the + operator to concatenate the strings.
NaN – Not a Number
NaN is a JavaScript reserved word indicating that a number is not a legal number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a Number):
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A number divided by a non-numeric string becomes NaN (Not a Number):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>
</body>
</html>
Result:
JavaScript Numbers
A number divided by a non-numeric string becomes NaN (Not a Number):
NaN
However, if the string contains a numeric value , the result will be a number:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A number divided by a numeric string becomes a number:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "10";
</script>
</body>
</html>
Result:
JavaScript Numbers
A number divided by a numeric string becomes a number:
10
You can use the global JavaScript function isNaN() to find out if a value is a not a number:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>You can use the global JavaScript function isNaN() to find out if a value is not a number:</p>
<p id="demo"></p>
<script>
let x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>
</body>
</html>
Result:
JavaScript Numbers
You can use the global JavaScript function isNaN() to find out if a value is not a number:
true
Watch out for NaN. If you use NaN in a mathematical operation, the result will also be NaN:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you use NaN in a mathematical operation, the result will also be NaN:</p>
<p id="demo"></p>
<script>
let x = NaN;
let y = 5;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
If you use NaN in a mathematical operation, the result will also be NaN:
NaN
Or the result might be a concatenation like NaN5:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you use NaN in a mathematical operation, the result can be a concatenation:</p>
<p id="demo"></p>
<script>
let x = NaN;
let y = "5";
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
If you use NaN in a mathematical operation, the result can be a concatenation:
NaN5
NaN is a number: typeof NaN returns number:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>The typeof NaN is number:</p>
<p id="demo"></p>
<script>
let x = NaN;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
Result:
JavaScript Numbers
The typeof NaN is number:
number
Infinity
Infinity (or -Infinity) is the value JavaScript will return if you calculate a number outside the largest possible number.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Infinity is returned if you calculate a number outside the largest possible number:</p>
<p id="demo"></p>
<script>
let myNumber = 2;
let txt = "";
while (myNumber != Infinity) {
myNumber = myNumber * myNumber;
txt = txt + myNumber + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Result:
JavaScript Numbers
Infinity is returned if you calculate a number outside the largest possible number:
4
16
256
65536
4294967296
18446744073709552000
3.402823669209385e+38
1.157920892373162e+77
1.3407807929942597e+154
Infinity
Division by 0 (zero) also generates Infinity:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Division by zero generates Infinity;</p>
<p id="demo"></p>
<script>
let x = 2/0;
let y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
Result:
JavaScript Numbers
Division by zero generates Infinity;
Infinity
-Infinity
Infinity is a number: typeof Infinity returns number.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Infinity is a number:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof Infinity;
</script>
</body>
</html>
Result:
JavaScript Numbers
Infinity is a number:
number
Hexadecimal
JavaScript interprets numeric constants as hexadecimal if they are preceded by 0x.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numeric constants, preceded by 0x, are interpreted as hexadecimal:</p>
<p id="demo"></p>
<script>
let x = 0xFF;
document.getElementById("demo").innerHTML = "0xFF = " + x;
</script>
</body>
</html>
Result:
JavaScript Numbers
Numeric constants, preceded by 0x, are interpreted as hexadecimal:
0xFF = 255
Never write a number with a leading zero (like 07).
Some JavaScript versions interpret numbers as octal if they are written with a leading zero.
By default, JavaScript displays numbers as base 10 decimals.
But you can use the toString() method to output numbers from base 2 to base 36.
Hexadecimal is base 16. Decimal is base 10. Octal is base 8. Binary is base 2.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>The toString() method can output numbers from base 2 to 36:</p>
<p id="demo"></p>
<script>
let myNumber = 32;
document.getElementById("demo").innerHTML =
"Decimal 32 = " + "<br><br>" +
"Hexatrigesimal (base 36): " + myNumber.toString(36) + "<br>" +
"Duotrigesimal (base 32): " + myNumber.toString(32) + "<br>" +
"Hexadecimal (base 16): " + myNumber.toString(16) + "<br>" +
"Duodecimal (base 12): " + myNumber.toString(12) + "<br>" +
"Decimal (base 10): " + myNumber.toString(10) + "<br>" +
"Octal (base 8): " + myNumber.toString(8) + "<br>" +
"Binary (base 2): " + myNumber.toString(2);
</script>
</body>
</html>
Result:
JavaScript Numbers
The toString() method can output numbers from base 2 to 36:
Decimal 32 =
Hexatrigesimal (base 36): w
Duotrigesimal (base 32): 10
Hexadecimal (base 16): 20
Duodecimal (base 12): 28
Decimal (base 10): 32
Octal (base 8): 40
Binary (base 2): 100000
JavaScript Numbers as Objects
Normally JavaScript numbers are primitive values created from literals:
let x = 123;
But numbers can also be defined as objects with the keyword new:
let y = new Number(123);
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p id="demo"></p>
<script>
// x is a number
let x = 123;
// y is a Number object
let y = new Number(123);
document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;
</script>
</body>
</html>
Result:
JavaScript Numbers
number
object
Do not create Number objects.
The new keyword complicates the code and slows down execution speed.
Number Objects can produce unexpected results:
When using the == operator, x and y are equal:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers and Number objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
// x is a number
let x = 500;
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Result:
JavaScript Numbers
Numbers and Number objects cannot be safely compared:
true
When using the === operator, x and y are not equal.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers and Number objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
// x is a number
let x = 500;
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Result:
JavaScript Numbers
Numbers and Number objects cannot be safely compared:
false
Note the difference between (x==y) and (x===y).
(x == y) true or false?
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript objects cannot be compared:</p>
<p id="demo"></p>
<script>
// x is an object
let x = new Number(500);
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Result:
JavaScript Numbers
JavaScript objects cannot be compared:
false
(x === y) true or false?
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript objects cannot be compared:</p>
<p id="demo"></p>
<script>
// x is an object
let x = new Number(500);
// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Result:
JavaScript Numbers
JavaScript objects cannot be compared:
false