Working with Numbers
var x = 2; // integer number var y = 3.14; // floating-point number var z = 0xff; // hexadecimal number
Extra large numbers can be represented in exponential notation e.g. 6.02e+23 (same as 6.02x1023).
var x = 1.57e4; // same as 15700 var y = 4.25e+6; // same as 4.25e6 or 4250000 var z = 4.25e-6; // same as 0.00000425
9007199254740991 (253-1), whereas the smallest safe integer is
Numbers can also be represented in hexadecimal notation (base 16). Hexadecimal numbers are prefixed with
0x. They are commonly used to represent colors. Here's an example:
var x = 0xff; // same as 255 var y = 0xb4; // same as 180 var z = 0x00; // same as 0
Note: Integers can be represented in decimal, hexadecimal, and octal notation. Floating-point numbers can be represented in decimal or exponential notation.
Operating on Numbers and Strings
As you know from the previous chapters, the
+ operator is used for both addition and concatenation. So, performing mathematical operations on numbers and strings may produce interesting results. The following example will show you what happens when you add numbers and strings:
var x = 10; var y = 20; var z = "30"; // Adding a number with a number, the result will be sum of numbers console.log(x + y); // 30 // Adding a string with a string, the result will be string concatenation console.log(z + z); // '3030' // Adding a number with a string, the result will be string concatenation console.log(x + z); // '1030' // Adding a string with a number, the result will be string concatenation console.log(z + x); // '3010' // Adding strings and numbers, the result will be string concatenation console.log("The result is: " + x + y); // 'The result is: 1020' // Adding numbers and strings, calculation performed from left to right console.log(x + y + z); // 'The result is: 3030'
If you observe the above example carefully, you will find that the result of the last operation is not just a simple string concatenation, because operators with the same precedence are evaluated from left to right. That's why, since variables x and y both are numbers they are added first then the result is concatenated with the variable z which is a string, hence final result is
30 + "30" = "3030".
var x = 10; var y = 20; var z = "30"; // Subtracting a number from a number console.log(y - x); // 10 // Subtracting a number from a numeric string console.log(z - x); // 20 // Multiplying a number with a numeric string console.log(x * z); // 300 // Dividing a number with a numeric string console.log(z / x); // 3
Moreover, if you try to multiply or divide numbers with strings that are not numeric, it returns
NaN (Not a Number). Also, if you use
NaN in a mathematical operation, the result will also be
var x = 10; var y = "foo"; var z = NaN; // Subtracting a number from a non-numeric string console.log(y - x); // NaN // Multiplying a number with a non-numeric string console.log(x * y); // NaN // Dividing a number with a non-numeric string console.log(x / y); // NaN // Adding NaN to a number console.log(x + z); // NaN // Adding NaN to a string console.log(y + z); // fooNaN
-Infinity to represent positive and negative infinity respectively. For example, dividing by
Infinity, as demonstrated below:
var x = 5 / 0; console.log(x); // Infinity var y = -5 / 0; console.log(y); // -Infinity
Note: Infinity is a special value that represents the mathematical Infinity
∞, which is greater than any number. The
typeof operator return number for an Infinity value.
Avoiding Precision Problems
Sometimes, operations on floating-point numbers produce unexpected results, as shown here:
var x = 0.1 + 0.2; console.log(x) // 0.30000000000000004
As you can see the result is
0.30000000000000004 rather than the expected
To avoid this problem you can use the solution something like this:
var x = (0.1 * 10 + 0.2 * 10) / 10; console.log(x) // 0.3
var x = 999999999999999; console.log(x); // 999999999999999 var y = 9999999999999999; console.log(y); // 10000000000000000
Performing Operations on Numbers
In the following sections, we will look at the number methods that are most commonly used.
Parsing Integers from Strings
parseInt() method can be used to parse an integer from a string. This method is particularly handy in situations when you are dealing with the values like CSS units e.g.
12pt, etc. and you would like to extract the numeric value out of it.
parseInt() method encounters a character that is not numeric in the specified base, it stops parsing and returns the integer value parsed up to that point. If the first character cannot be converted into a number, the method will return
NaN (not a number).
Leading and trailing spaces are allowed. Here's an example:
console.log(parseInt("3.14")); // 3 console.log(parseInt("50px")); // 50 console.log(parseInt("12pt")); // 12 console.log(parseInt("0xFF", 16)); // 255 console.log(parseInt("20 years")); // 20 console.log(parseInt("Year 2048")); // NaN console.log(parseInt("10 12 2018")); // 10
parseInt() method truncates numbers to integer values, but it should not be used as a substitute for
Similarly, you can use the
parseFloat() method to parse floating-point number from a string. The
parseFloat() method works the same way as the
parseInt() method, except that it retrieves both integers and numbers with decimals.
console.log(parseFloat("3.14")); // 3.14 console.log(parseFloat("50px")); // 50 console.log(parseFloat("1.6em")); // 1.6 console.log(parseFloat("124.5 lbs")); // 124.5 console.log(parseFloat("weight 124.5 lbs")); // NaN console.log(parseFloat("6.5 acres")); // 6.5
Converting Numbers to Strings
toString() method can be used to convert a number to its string equivalent. This method optionally accepts an integer parameter in the range 2 through 36 specifying the base to use for representing numeric values. Here's an example:
var x = 10; var y = x.toString(); console.log(y); // '10' console.log(typeof y); // string console.log(typeof x); // number console.log((12).toString()); // '12' console.log((15.6).toString()); // '15.6' console.log((6).toString(2)); // '110' console.log((255).toString(16)); // 'ff'
Formatting Numbers in Exponential Notation
You can use the
toExponential() method to format or represent a number in exponential notation. This method optionally accepts an integer parameter specifying the number of digits after the decimal point. Also, the returned value is a string not a number. Here's an example:
var x = 67.1234; console.log(x.toExponential()); // 6.71234e+1 console.log(x.toExponential(6)); // 6.712340e+1 console.log(x.toExponential(4)); // 6.7123e+1 console.log(x.toExponential(2)); // 6.71e+1
Note: Exponential notation is useful for representing numbers that are either very large or very small in magnitude. For example, 62500000000 can be written as 625e+8 or 6.25e+10.
Formatting Numbers to Fixed Decimals
You can use the
toFixed() method when you want to format a number with a fixed number of digits to the right of the decimal point. The value returned by this method is a string and it has exactly specified number of
digits after the decimal point. If the
digits parameter is not specified or omitted, it is treated as 0. Here's an example:
var x = 72.635; console.log(x.toFixed()); // '73' (note rounding, no fractional part) console.log(x.toPrecision(2)); // '72.64' (note rounding) console.log(x.toPrecision(1)); // '72.6' var y = 6.25e+5; console.log(y.toFixed(2)); // '625000.00' var z = 1.58e-4; console.log(z.toFixed(2)); // '0.00' (since 1.58e-4 is equal to 0.000158)
Formatting Numbers with Precision
If you want most appropriate form of a number, you can use the
toPrecision() method instead. This method returns a string representing the number to the specified precision.
If precision is large enough to include all the digits of the integer part of number, then the number is formatted using fixed-point notation. Otherwise, the number is formatted using exponential notation. The precision parameter is optional. Here's an example:
var x = 6.235; console.log(x.toPrecision()); // '6.235' console.log(x.toPrecision(3)); // '6.24' (note rounding) console.log(x.toPrecision(2)); // '6.2' console.log(x.toPrecision(1)); // '6' var y = 47.63; console.log(y.toPrecision(2)); // '48' (note rounding, no fractional part) var z = 1234.5; console.log(z.toPrecision(2)); // '1.2e+3'
Finding the Largest and Smallest Possible Numbers
The Number object also has several properties associated with it. The
A number that falls outside of the range of possible numbers is represented by a constant
Number.NEGATIVE_INFINITY. Here's an example:
var a = Number.MAX_VALUE; console.log(a); // 1.7976931348623157e+308 var b = Number.MIN_VALUE; console.log(b); // 5e-324 var x = Number.MAX_VALUE * 2; console.log(x); // Infinity var y = -1 * Number.MAX_VALUE * 2; console.log(y); // -Infinity