JavaScript Numbers

JavaScript allows you to use integer and floating-point numbers. You can easily represent these numbers in decimal, hexadecimal, or octal notations.

JavaScript doesn’t differentiate between integers and decimal numbers. All the numbers are displayed as floating-point numbers.

Example:

script.js
var x = 6;  // integer number
var y = 2.56;  // floating-point number
var z = 0abc;  // hexadecimal number

You can represent large numbers in exponential form. For example: 5.65e+32 (5.65x1032)

Example:

script.js
var x = 2.53e4; // same as 25300
var y = 8.13e+6; // same as 8.13e6 or 8130000
var z = 8.13e-6; // same as 0.00000813

Did you know?

9007199254740991 (253-1) is the largest safe integer in JavaScript.

-9007199254740991 (-(253-1)) is the smallest safe integer in JavaScript.

You can represent numbers in hexadecimal notation with 16 as a base. 0x is used as a prefix for hexadecimal numbers.

Example:

script.js
var x = 0x00; // same as 0
var y = 0xc6; // same as 198

How can you operate on numbers and strings?

Let’s have a close look at the below mentioned examples.

script.js
var x = 5;
var y = 10;
var z = "15";

// Adding a number with a number, the result will be sum of numbers

document.write(x + y); // 15
document.write("<br>");

// Adding a string with a string, the result will be string concatenation

document.write(z + z); // '1515'
document.write("<br>");

// Adding a number with a string, the result will be string concatenation

document.write(x + z); // '515'
document.write("<br>");

// Adding a string with a number, the result will be string concatenation

document.write(z + x); // '155'
document.write("<br>");

// Adding strings and numbers, the result will be string concatenation

document.write("The result is: " + x + y); // 'The result is: 510'
document.write("<br>");

// Adding numbers and strings, calculation performed from left to right

document.write(x + y + z); // 'The result is: 1515'

Here, the output of the last operation is not a string concatenation. This is because the operators having the same precedence are calculated from left to right. Variables x and y are added and their output is added to Z (string variable). Therefore the final output is 15 + “15” = “1515”.

However, you will get different outputs with mathematical operations such as multiplication, division, and subtraction. The numeric strings are converted to numbers as follows:

script.js
var x = 5;
var y = 10;
var z = "10";

// Subtracting a number from a number

document.write(y - x); // 5
document.write("<br>");

// Subtracting a number from a numeric string

document.write(z - x); // 5
document.write("<br>");

// Multiplying a number with a numeric string

document.write(x * z); // 50
document.write("<br>");

// Dividing a number with a numeric string

document.write(z / x); // 2

When you multiply or divide numbers with non-numeric strings, you get NaN (Not a Number) as output.

Example:

script.js
var x = 5;
var y = "apple";
var z = NaN;

// Subtracting a number from a non-numeric string

document.write(y - x); // NaN
document.write("<br>");

// Multiplying a number with a non-numeric string

document.write(x * y); // NaN
document.write("<br>");

// Dividing a number with a non-numeric string

document.write(x / y); // NaN
document.write("<br>");

// Adding NaN to a number

document.write(x + z); // NaN
document.write("<br>");

// Adding NaN to a string
document.write(y + z); // appleNaN

How can you represent infinity?

You can use the keywords Infinity and –Infinity to display positive and negative infinity.

Example:

script.js
var x = 10 / 0;
console.log(x); // Infinity

var y = -10 / 0;
console.log(y); // -Infinity

Tip: If you want a number for an infinity value, use the typeof operator.

How can you handle precision problems?

When you perform operations on decimal numbers, it may give unpredictable outputs.

Example:

script.js
var x = 0.1 + 0.2;

console.log(x) // 0.30000000000000004

The expected output is 0.3, however you get 0. 30000000000000004. This variation is known as the roundoff error or representation error. JavaScript uses a binary number system to handle decimal numbers. This causes the difference.

The below example explains how you can solve the above problem.

script.js
var x = (0.1 * 10 + 0.2 * 10) / 10;

console.log(x) // 0.3

How can you carry out operations on numbers?

JavaScript offers methods and properties that help you carry out operations on numeric values.

Here are some number methods that you can use:

Parsing Integers from Strings: The parseInt( ) allows you to parse an integer from a string value. You can use this method when you are working with CSS units such as 40 px, 8 pt, where you need to retrieve the numeric value.

When the parseInt( ) method comes across a character in the predefined base, it puts parsing to end and gives back the integer value parsed up to that point. When the first character can’t be changed into a number, you will get NaN (not a number).

Example:

script.js
document.write(parseInt("6.28") + "<br>"); // 6
document.write(parseInt("25px") + "<br>"); // 25
document.write(parseInt("8pt") + "<br>"); // 8
document.write(parseInt("0xcb", 16) + "<br>"); // 203
document.write(parseInt("15 years") + "<br>"); // 15
document.write(parseInt("Year 2067") + "<br>"); // NaN
document.write(parseInt("10 11 2022")); // 10

The parseFloat( ) method helps you parse floating-point numbers from a string.

script.js
document.write(parseFloat("6.28") + "<br>"); // 6.28
document.write(parseFloat("25px") + "<br>"); // 25
document.write(parseFloat("2.8em") + "<br>"); // 2.8
document.write(parseFloat("144.9 lbs") + "<br>"); // 144.9
document.write(parseFloat("weight 111.7 lbs") + "<br>"); // NaN
document.write(parseFloat("11.15 acres")); // 11.15

How can you convert numbers into strings?

The toString( ) method helps you convert numbers into strings.

Example:

script.js
var x = 15;

var y = x.toString();

document.write(y); // '10'
document.write(typeof y + "<br>"); // 15string
document.write(typeof x + "<br>"); // number
document.write((15).toString() + "<br>"); // '15'
document.write((19.3).toString() + "<br>"); // '19.3'
document.write((7).toString(2) + "<br>"); // '111'
document.write((155).toString(16)); // '9b'

How can you format numbers in Exponential Notation?

The toExponential( ) method is used to format a number in exponential notation. The exponential notation helps you with very small and very big numbers. You can even pass an integer argument that specifies the number of digits following the decimal.

Example:

script.js
var x = 49.1354;

document.write(x.toExponential() + "<br>"); // 4.91354e+1
document.write(x.toExponential(6) + "<br>"); // 4.913540e+1
document.write(x.toExponential(4) + "<br>"); // 4.9135e+1
document.write(x.toExponential(2)); // 4.91e+1

How can you format numbers to fixed decimals?

The toFixed( ) method helps you format a number according to the fixed number of digits present to the right of the decimal. You get a string as the output and it contains the pre-defined number of digits following the decimal point. When you omit the digits parameter, it is considered as 0.

Example:

script.js
var x = 51.635;

document.write(x.toFixed() + "<br>"); // '52' (note rounding, no fractional part)
document.write(x.toFixed(2) + "<br>"); // '51.63' (note rounding)
document.write(x.toFixed(1) + "<br>"); // '51.6'

var y = 8.35e+9;

document.write(y.toFixed(2) + "<br>"); // '8350000000.00'

var z = 2.34e-3;

document.write(z.toFixed(2)); // '0.00'

How can you format numbers with precision?

The toPrecision( ) method helps you get the appropriate form of a number. You get a string that represents the number to the predefined precision.

script.js
var x = 3.456;

document.write(x.toPrecision() + "<br>"); // '3.456'
document.write(x.toPrecision(3) + "<br>"); // '3.46' (note rounding)
document.write(x.toPrecision(2) + "<br>"); // '3.5'
document.write(x.toPrecision(1) + "<br>"); // '3'

var y = 15.86;
document.write(y.toPrecision(2) + "<br>"); // '16' (note rounding, no fractional part)

var z = 4567.2;
document.write(z.toPrecision(2)); // '4.6e+3'

How can you find the biggest and smallest possible numbers?

The Number.MAX_VALUE helps you represent the biggest numbers. The Number.MIN_VALUE helps you represent the smallest numbers.

Example:

script.js
var a = Number.MAX_VALUE;
document.write(a + "<br>"); // 1.7976931348623157e+308

var b = Number.MIN_VALUE;
document.write(b + "<br>"); // 5e-324

How can you return a number as a number?

The valueOf( ) method helps you return a number as a number.

Example:

script.js
var x = 678;

document.getElementById("demo").innerHTML = x.valueOf() + "<br>" + (678).valueOf() + "<br>" + (600 + 78).valueOf();