JavaScript Numbers
In JavaScript, there's only one kind of number. You can write numbers with or without decimals.
Extra large or extra small numbers can be written with scientific (exponent) notation:
JavaScript Numbers are Always 64-bit Floating Point
JavaScript is unique among programming languages because it doesn't categorize numbers into various types, such as integers, short numbers, long numbers, or floating-point numbers.
In JavaScript, numbers are saved as double precision floating point numbers, using a worldwide standard known as IEEE 754. This means that numbers are stored using 64 bits, with the fraction 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
Whole numbers (numbers without a dot or special notation) are correct up to 15 digits.
The maximum number of decimals is 17.
Floating Precision
Adding Numbers and Strings
WARNING !!
JavaScript employs the + sign for addition and joining strings.
Numbers are added. Strings are concatenated.
When you combine two numbers, you get another number.
When you combine two pieces of text, you get a longer piece of text.
When you add a number and a string, the outcome is a combination of both as a string.
Adding a string and a number also results in a string.
One common error is anticipating the outcome to be 30.
A typical error is assuming the outcome will be 102030:
The JavaScript interpreter works from left to right.
To begin, add 10 and 20 together because x and y are both numbers.
When you add 30 to the string "30," it becomes a combined string because "z" is a text.
Numeric Strings
JavaScript strings can have numeric content:
let x = 100;
let y = "100";
In JavaScript, whenever you perform a mathematical operation, the language will attempt to change strings into numbers.
This will work:
This will also work:
And this will work:
But this will not work:
In the last example JavaScript uses the + operator to concatenate the strings.
NaN - Not a Number
NaN is a special word in JavaScript. It tells us that a number is not a valid number.
Doing math with something that's not a number will give you a result of NaN (which means Not a Number):
But if the text consists of numbers, the outcome will also be a number:
You can check if a value is not a number in JavaScript by using the global function called isNaN().
Watch out for NaN. If you use NaN in a mathematical operation, the result will also be NaN:
Or the result might be a concatenation like NaN5:
NaN is a number: when we check its type using typeof NaN, it tells us that NaN is of the number type.
Infinity
Infinity is what JavaScript gives you when you try to work with a number that's beyond the biggest number it can handle.
Division by 0 (zero) also generates Infinity:
Infinity is like a number. When we check the type of Infinity, it tells us that it is of the type number.
Hexadecimal
JavaScript reads numeric constants as hexadecimal if they start with "0x".
Don't use a leading zero in numbers (e.g., 07).
Some JavaScript versions may read numbers as octal when they start with a zero.
Usually, JavaScript shows numbers in their regular decimal form, which is also known as base 10 decimals.
You can employ the toString() method to display numbers in various bases, from base 2 to base 36.
Hexadecimal is like counting to 16. Decimal is like counting to 10. Octal is like counting to 8. Binary is like counting to 2.
JavaScript Numbers as Objects
Normally JavaScript numbers are primitive values created from literals:
Numbers can also be described as things using the new keyword.
Do not create Number objects.
The new keyword makes the code harder to understand and reduces performance speed.
Number Objects can produce unexpected results:
Note the difference between (x==y) and (x===y).
Comparing two JavaScript objects always returns false.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written in two ways: 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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Large or small numbers can be written using 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>
<p>Whole numbers (numbers without decimal points or scientific notation) can be precise 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Floating Point Precision</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>
<!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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you put together two numbers written as strings, you'll get a longer string that combines them.</p>
<p id="demo"></p>
<script>
let x = "10";
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add a number and a group of numbers written as text, the outcome will be a combined 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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you put together a number and a set of numbers, you'll get a longer string of numbers.</p>
<p id="demo"></p>
<script>
let x = "10";
let y = 20;
document.getElementById("demo").innerHTML = "The result is: " + x + y;
</script>
</body>
</html>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>When you subtract in JavaScript, it will attempt to change strings into numbers.</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript doesn't change words to numbers when you add them together.</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>You can check if a value is not a number using the global JavaScript function called isNaN().</p>
<p id="demo"></p>
<script>
let x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you try to do math with something that's NaN, your answer 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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you include NaN in a math calculation, the outcome might turn into a combination:</p>
<p id="demo"></p>
<script>
let x = NaN;
let y = "5";
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you try to calculate a number that's bigger than the largest possible number, the result will be Infinity.</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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
HTML
CSS
Javascript
Jquery