JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Numbers
JavaScript consists of 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>
Output
JavaScript Numbers
Numbers can be written with or without decimals:
3.14
3
Extra large or extra small numbers is 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>
Output
JavaScript Numbers
Extra large or extra small numbers can be written with scientific (exponent) notation:
12300000
0.00123
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>
Output
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>
Output
JavaScript Numbers
Floating point arithmetic is not always 100% accurate.
To solve the problem above, it helps to multiply and divide:
<!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>
Output
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
Adding 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>
Output
JavaScript Numbers
If you add two numbers, the result will be a number:
30
Adding two strings will result in 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>
Output
JavaScript Numbers
If you add two numeric strings, the result will be a concatenated string:
1020
Adding 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>
Output
JavaScript Numbers
If you add a number and a numeric string, the result will be a concatenated string:
1020
Adding 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>
Output
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>
Output
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>
Output
JavaScript Numbers
A common mistake is to expect this result to be 102030:
3030
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:
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>
Output
JavaScript Numbers
JavaScript will try to convert strings to numbers when dividing:
10
NaN – Not a Number
NaN is a JavaScript reserved word indicate a number is not a legal 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>
Output
JavaScript Numbers
A number divided by a non-numeric string becomes NaN (Not a Number):
NaN
However, if the string consists of 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>
Output
JavaScript Numbers
A number divided by a numeric string becomes a number:
10
Using the global JavaScript function isNaN() finds 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>
Output
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. Using NaN in a mathematical operation, the result will also be NaN:
Example
<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>
Output
JavaScript Numbers
If you use NaN in a mathematical operation, the result will also be NaN:
NaN
Or the result can 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>
Output
JavaScript Numbers
If you use NaN in a mathematical operation, the result can be a concatenation:
NaN5
Infinity
Infinity (or -Infinity) is the value JavaScript that return if you calculate a number within 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>
Output
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>
Output
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>
Output
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>
Output
JavaScript Numbers
Numeric constants, preceded by 0x, are interpreted as hexadecimal:
0xFF = 255
By default, JavaScript displays numbers as base 10 decimals.
Using 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>” +
“Duodesimal (base 12): ” + myNumber.toString(12) + “<br>” +
“Desimal (base 10): ” + myNumber.toString(10) + “<br>” +
“Octal (base 8): ” + myNumber.toString(8) + “<br>” +
“Binary (base 2): ” + myNumber.toString(2);
</script>
</body>
</html>
Output
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 Duodesimal (base 12): 28 Desimal (base 10): 32 Octal (base 8): 40 Binary (base 2): 100000JavaScript Numbers as Objects
Normally JavaScript numbers are primitive values created from literals
let x = 123;
But numbers can 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>
Output
JavaScript Numbers
number
object