After landing my first developer job, I set a mission to dive deep into JavaScript. I named the adventure, NO-BS-JS. In the process of learning, I'm taking notes and sharing them with others. More information is in this link.
Number in JavaScript
Number type contains numeric values. JS uses a fixed number of bits, 64 only, to store a single number. It means that how different pieces of numbers can be represented is limited. With these many bits, you can create about 18 quintillions (an 18 with 18 zeros after it) of different numbers.
A number can be stored as a negative number.
It can be both integer and floating-point numbers.
| Integer | Floating Point |
| An integer is a positive or negative whole number, including 0 | A floating point number, is a positive or negative whole number with a decimal point |
| 4, -4, 0 | 0.23, 4.5, -9.87 |
| Number.isInteger(n) | parseInt(n) === n |
Number is also called floating-point numbers, because they have decimals even on the integers. So 23 is equal to 23.0.
The main purpose of Number is to calculate. The common operations are multiplication
✖, division ➗, addition ➕ and subtraction ➖.
Some arithmetic operations 👇
100 + 4;
// this will create a new value by adding 100 with 4 which is 104
100 + 4 * 11;
Now we've two different operations. Will it add 100 with 4 and multiply with 11 ?! Or multiply 11 with 4 and add 100. Confusing, right?
We can wrap certain parts of the numbers in parentheses to separate, just like general arithmetic.
(100 + 4) * 11;
The % operator
It's called remainder. It simply returns the remainder of the division.
30 % 4;
// 2
JS operators have precedence over other operators. MDN has a table of operators with their precedence.
Special Numbers
Besides regular numeric values, JS have three special values.
Infinity-InfinityNaN
The first two represent positive and negative infinities. It's the same as the mathematical Infinity ∞. It's bigger than any finite number or smaller than any negative finite number. Any calculation with Infinity will return Infinity. Number.isFinite() is a function to check if a number is finite or not.
Number.isFinite(-490); // true
Number.isFinite(567); // true
Number.isFinite(Infinity); // false
The usages of Infinity is less than others. One of the real use cases is while parsing numbers from inputs.
👉 Check Dmitri's blog post to know more about Infinity.
NaN stands for Not a Number. Ironic, isn't it? You'll get it when you try to divide zero by zero(0 / 0), Infinity - Infinity or any operation that is not meaningful. It is the result of a wrong mathematical operation. Once a variable gets NaN, there's no going back. Whatever you do with NaN, will return NaN.
0 / 0; // NaN
"a string" * 5; // NaN
Infinity / Infinity; // NaN
// NaN returns NaN
NaN * 54;
"a string" / NaN;
"ban" + NaN + "a"; // try this on your console 😉
We can affirm that, if JS can't handle an operation, it doesn't stop or give you an error, rather it gives you NaN.
Too Lengthy of a Number to Count
Numbers can get lengthy and hard to count. But don't worry, JavaScript got your back. We can use underscore _ to separate numbers.
const hardToCount = 123456789;
const easyToCount = 12_34_56_789;
It makes numbers more readable and doesn't change the value. JS engine ignores the _ between numbers while compiling.
Common Number Methods
JavaScript has lots of common methods for Number.
👉 Number()
It's useful to convert a string into a valid number. But make sure the string has only digits and no text. Otherwise, it'll return NaN.
Number("876"); // 876
Number("34.578"); // 34.578
Number("23_A"); // NaN
👉 parseInt()
It returns an integer from the given string. Any digit after a dot or a string will be removed. If the first character is a string, you'll get NaN.
Number.parseInt() does the same thing as well.
parseInt("234.56"); // 234
parseInt("s234"); // NaN
parseInt("23s4"); // 23
Number.parseInt(""); // NaN
ℹ If you know why it returns NaN or removes digits after the character, please let me know. 🙏
👉 parseFloat()
Similar to the parseInt(), it returns the floating-point number from a valid string of digits.
It's similar to Number.parseFloat().
parseFloat("234.56"); // 234.56
parseFloat("s234.56"); // NaN
parseFloat("23s4.34"); // 23
Number.parseFloat(""); // NaN
👉 toString()
This method returns a string representation of the given number. It can take an optional argument, usually called radix, which is an integer that specifies the base.
const x = 234.567;
const y = 12;
x.toString(); // '234.567'
y.toString(2); // '1100'
👉 tofixed()
tofixed() method returns a string that represents a fixed number formation using fixed-point notation. It accepts an optional parameter ranging from 0 to 100. The default is 0. Providing a negative parameter will return the Uncaught RangeError error.
const x = 234.567;
const y = 12;
const z = 234.123;
x.tofixed(2); // '234.56'
x.toFixed(); // '235'
z.toFixed(); // '234'
y.toFixed(2); // '12.00'
y.toFixed(20); // '12.00000000000000000000'
ℹ Remember that toFixed() method returns a string. You'll need to convert that to a number based on your need. Or you can create a helper function.
const formatNumber = (num, range) => Number(num.toFixed(range));
formatNumber(234.567, 2); // 234.57
formatNumber(234.567); // 235
👉 toPrecision()
It returns a string representing the number to the given precision or length. It accepts an optional parameter that specifies the length of the number. Similar to toFixed(), it ranges between 0 to 100.
const x = 234.567;
const y = 12;
x.toPrecision(4); // '234.6'
x.toPrecision(); // '234.567'
x.toPrecision(9); //'234.567000'
x.toPrecision(2); // '2.3e+2'
y.toPrecision(5); // '12.000'
The main difference between toPrecision() and toFixed() is that the first one returns the digits as lengthy as the parameter and the second one returns digits after the decimal point as lengthy as the parameter.
👉 toLocaleString()
This method returns a string with a language-sensitive representation. It will return the number format in the specified language.
const x = 123456.789;
x.toLocaleString("en-us"); // '123,456.789' // english US
x.toLocaleString("en-in"); // '1,23,456.789' // english India
x.toLocaleString("ar-EG"); // '١٢٣٬٤٥٦٫٧٨٩' // arabic Egypt
A more functional way to produce a number format based on country and language is by using JavaScript's in-built Intl.NumberFormat() constructor. You can learn more about this in this and this links.
👉 isInteger()
As the name suggests, it checks if the given number is an integer or not.
👉 isNaN()
Checks if the given number is NaN or not.
👉 isFinite()
Checks if the given number is finite or not.
Thank you for reading this big article. 🙏
After landing my first developer job, I set a mission to dive deep into JavaScript. I named the adventure, NO-BS-JS. In the process of learning, I'm taking notes and sharing them with others. More information is in this link.
I share my updates in my twitter handle. Feel free to say a 'hello' there.