JS Numbers

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): 100000

JavaScript 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