More about Numbers in JavaScript

More about Numbers in JavaScript

ยท

8 min read

We have seen enough about arrays and objects. Now, Let's shift our focus to numbers and dates.

Converting into numbers

To work with numbers, we first need to make sure it IS a number. The input might be given in form of a string. To do that, we have conversion techniques.

First method

The most used and basic method is by writing 'Number' before the string in parenthesis. This converts the string into a number.

console.log(Number('78')); // 78
console.log(Number('3890')); // 3890

Number is an object. It has its method which can also be used to convert strings into numbers. Let's see that method now.

Second method

parseInt and parseFloat are the two methods which were used alone without calling it on the Number object and that works. But in modern JavaScript, we are encouraged to use it along with the object names.

// Old way
console.log(parseInt('120km')); // 120
console.log(parseFloat('12.78m')); // 12.78

// New way
console.log(Number.parseInt('n90')); // NaN
console.log(Number.parseFloat('e12.7')); // NaN

Did you see that? Does the new way not work? Is that really the case? NO. It is because we passed a string which has a character at its beginning. This is the drawback of parseInt and parseFloat functions - They should have numbers at the beginning. Lets try again.

console.log(Number.parseInt('9abc0')); // 90
console.log(Number.parseFloat('12q.7io')); // 12.7

It works !

Third method

Let's take a look whats happening in the code block below.

console.log( +'2' + 2 ); // 4
console.log( +'2' + +'2' ); // 4

You must be thinking, what just happened? Why did we use three plus operators? Here is a trick, we can say... JavaScript does type coercion when it sees plus operator. So while passing a string, just use a plus operator before it and ta-da! We get a number!

Checking the numbers

First method

To check if a value is a number or not a number, we can use a method - isNaN. It returns true if it is not a number and false if it is a number.

console.log(Number.isNaN(20)); // false
console.log(Number.isNaN("20")); // false
console.log(Number.isNaN("20km")); // false
console.log(Number.isNaN(+"20km")); // true
console.log(Number.isNaN(20 / 0)); // false

20 and string 20, string 20km is not a NaN, therefore it returns false. When string 20km is converted into number uising a plus operator, it becomes NaN, hence returning true. When we divide 20 by 0, we get infinty. Infinity is a value in JavaScript, hence it is not NaN, hence returning false.

This method doesn't really meet our needs, right? Let's see another method which might...

Second method

In this method, we use a function - isInteger. It returns true ONLY if the given value is a number and false for NaN and even infinity.

console.log(Number.isInteger(20)); // true
console.log(Number.isInteger("20")); // false
console.log(Number.isInteger("20km")); // false
console.log(Number.isInteger(+"20km")); // false
console.log(Number.isInteger(20 / 0)); // false

Only returned true for a number. Definitely a better option than isNan method. But what about infinity values? Is it a number or NaN ?

Third method

Infinity is a number. Infinity is positive and -Infinity is negative. To check that, we have a method - isFinite. It returns true it given value is finite and false if it is infinite.

console.log(Number.isFinite(20)); // true
console.log(Number.isFinite(20/0)); // false
console.log(Number.isFinite(-20/0)); // false

Simple. 20 is a finite value, hence returned true and 20/0 and -20/0 result in infinity and -infinity, hence returned false.

Some math functions

Square roots and cubic roots

To calculate square roots, we have a function.

console.log(Math.sqrt(100)); // 10

Mathematically, โˆš100 is equal to 100 raised to (1/2). So we can also use the exponential operator to find the square root.

console.log(100 ** (1/2)); // 10

Since there is no function to calculate cubic root, we can use the exponential operator to find cubic root as well.

console.log(1000 ** (1/3)); // 10

Maximum and minimum values

To calculate maximum and minimum values, we have two functions - Math.max and Math.min .

console.log(Math.max(10, 50, 100)); // 100
console.log(Math.min(10, 50, 100)); // 10

This works even if values are in form of strings.

console.log(Math.max("10", "50", "100")); // 100
console.log(Math.min("10", "50", "100")); // 10

PI constant

To calculate the area or circumference of a circle, we need a Pi value. Math object has that function too.

console.log(Math.PI); // 3.141592653589793
// To find area = PI * r * r
console.log(Math.PI * parseInt('20px') ** 2); // 1256.6370614359173
// To find circumference = PI * r * 2
console.log(Math.PI * parseInt('20px') * 2); // 125.66370614359172

But this doesn't return a decimal value. To do so, we have to round off these results.

To round off numbers, we use Math.trunc method.

console.log(Math.trunc(Math.PI * parseInt('20px') ** 2)); // 1256
console.log(Math.trunc(Math.PI * parseInt('20px') * 2)); // 125

Rounding off numbers

We can either round it off to the nearest integer or the next integer or the previous integer.

Round-off

To round off a number to its nearest integer, we use the roundoff function.

console.log(Math.roundoff(12.7)); // 13

Next integer

To round off a number to its next integer, we use the ceil function.

console.log(Math.ceil(49.2)); // 50
consolelog(Math.ceil(49.8)); // 50

Previous integer

To round off a number to its previous integer, we use the floor function.

console.log(Math.floor(49.2)); // 49
consolelog(Math.floor(49.8)); // 49

Fixed decimal places

To round off a number to a specified number of decimals, we use toFixed method.

console.log((23.12345).toFixed(2)); // 23.12
console.log(23.56789).toFixed(3)); // 23.568

It rounds up the last digit according to the nearest interger value.

Random numbers

In some cases like generating random dice rolls, guessing the number games and hex values to make colour pallete, we need random numbers. To do that, we have a function on the Math object.

// Returns a random number between 0 and 1
console.log(Math.random()); 
// Returns a random number between 0 and 10
console.log(Math.random() * 10);
// Returns a decimal number
console.log(Math.trunc(Math.random() * 10));

Keep in mind that the number we multiply by a random function is not included in those random numbers. To include that either multiply it by an incremented number or add 1 to the function.

console.log(Math.trunc(Math.random() * 11)); // Incremented value
console.log(Math.trunc(Math.random() * 10 + 1)); // Added 1

The Remainder Operator

This operator simply returns the remainder of a division. However, other than that, it has other use cases.

console.log(3 % 2); // 1
console.log(5 % 3); // 2
console.log(11 % 4); // 3

We can use it to differentiate between even and odd numbers. If the number is completely divisible by two, it is even else it is odd. Similarly, if the remainder is 0, it is even else it is odd.

let num = 7;
let result;
if (num % 2 === 0)
    result = "Even number";
else 
    result = "Odd number";
console.log(result); // Odd number

BigInt

BigInt is never talked about before. It is a special type of integer that was introduced in ES2020. As we know, numbers are represented internally as 64 bits, out of which only 53 are used. Rest bits are used to store decimal points and signs.

If only 53 bits are used to store digits, it means there is a limit to the storage of numbers. There is a variable 'MAX_SAFE_INTEGER' which holds that limit, We can calculate the biggest number. Let's see if they are same.

console.log(2 ** 53 - 1 ); // 9007199254740991
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

Yes, they are the same.

What if we keep incrementing them?

console.log(2 ** 53 - 1 ); // 9007199254740991
console.log(2 ** 53 + 0 ); // 9007199254740992
console.log(2 ** 53 + 1 ); // 9007199254740994
console.log(2 ** 53 + 2 ); // 9007199254740996
console.log(2 ** 53 + 3 ); // 9007199254740996

We do get result, but we lose the precision. That's why these are not safe numbers.

At some point, me might need numbers larger than max safest number, let's say for database IDs or actual 60 bit numbers. That's when BigInt comes into the picture - which stands for Big Integer which can store numbers as large as we want.

To transform any normal number into BigInt, add 'n' after last integer of the number.

console.log(1234567898765432123456789); // 1.2345678987654322e+24
console.log(1234567898765432123456789n); // 1234567898765432123456789n

Operations on BigInt

Operations on BigInt are pretty much the same as normal integers but both or all operands need to be BigInt, if not we have to transform them using BigInt constructor.

const num = 100;
const hugeNum = 6427873483742567239784373540935n;
const sum = hugeNum + BigInt(num);
console.log(sum); // 6427873483742567239784373541035n

Let's see some basic operations :

const num_1 = 100n;
const num_2 = 10n;

const sum = num_1 + num_2;
const difference = num_1 - num_2;
const product = num_1 * num_2;
const quotient = num_1 / num_2;
const remainder = num_1 % num_2;

console.log("Sum = ", sum); // 110n
console.log("Difference = ", difference); // 90n
console.log("Product = ", product); // 1000n
console.log("Quotient = ", quotient); // 10n
console.log("Remainder = ", remainder); // 0n

Exceptions:

  1. Comparison operator :

     console.log(100n === 100); // false
    
  2. Plus operator with strings :

     const hugeNum = 1234567898765432123456789;
     console.log(hugeNum + ' is a BigInt');
     // 1234567898765432123456789 is a BigInt
    

Math operations :

const num = 100n;
console.log(Math.sqrt(num));
// cannot convert BigInt value to a number

If you liked this blog, make sure you check out JavaScript series. ๐Ÿ˜„

ย