JavaScript Number Formats: As Easy As 1-2-3!

JavaScript number formats are easy! They actually are. We know  —  that’s something you don’t always hear in programming, but it’s true. In JavaScript, number formats are very straightforward, but they’re also very versatile. As a matter of fact, once you get used to it, you just may find yourself dreaming in JavaScript!

Your Type Or Not

The first thing you need to know is that JavaScript doesn’t require you to declare types when you use numbers. A lot of programming languages are typed  —  they require you to explicitly declare the type of data that you are using. That means that if you wanted to use a floating-point number, an integer, etc., you’d have to say that at some point (such as when you created the variable).

JavaScript, on the other hand, looks at the actual formatting of the number that you enter, without requiring a type declaration:

var im_a_number = 42;
var im_another_number = 42.357;

What is it Really?

“OK,” you ask, “but what is JavaScript’s actual number format – the one that it uses internally?”

JavaScript actually stores numbers in 64-bit double-precision format, following the IEEE 754 standard for floating point numbers. This means that the actual number (in binary format) consists of 64 bits, with bits 0 through 51 representing the fraction (the part that you’d generally think of as the number’s value), bits 52 through 62 representing the exponent, and bit 63 representing the sign.

Big and Small

This is what allows JavaScript to be so versatile in handling numbers without requiring you to declare their types. For example, you can use scientific notation in-line to include the exponent:

var im_a_big_number = 42e17;
var im_a_small_number = 42e-6;
document.write("Big number: " + im_a_big_number + "<br>");
document.write("Small number: " + im_a_small_number + "<br>");

The output will look like this:

Big number: 4200000000000000000
Small number: 0.000042

Getting Precise, and More

JavaScript numbers include methods which will allow you to convert them to exponential format, set the precision, or convert them to fixed decimal output.

First, let’s declare some constants, then display them as-is:

var im_a_big_number = 42024363454736353;
var im_a_small_number = .00000321;
var im_a_too_precise_number = 1.023616785;
var fix_me_at_two = 25.1;
document.write("Big number exp: " + im_a_big_number + "<br>");
document.write("Small number exp: " + im_a_small_number + "<br>");
document.write("Four-digit precision: " + im_a_too_precise_number + "<br>");
document.write("Two-decimal fixed: " + fix_me_at_two + "<br>");
With this unformatted, unconverted output:

Big number exp: 42024363454736350
Small number exp: 0.00000321
Four-digit precision: 1.023616785
Two-decimal fixed: 25.1

Now let’s set the exponents and the precision:

var im_a_big_number = 42024363454736353;
var im_a_small_number = .00000321;
var im_a_too_precise_number = 1.023616785;
var fix_me_at_two = 25.1;
document.write("Big number exp: " + im_a_big_number.toExponential(1) + "<br>");
document.write("Small number exp: " + im_a_small_number.toExponential(2) + "<br>");
document.write("Four-digit precision: " + im_a_too_precise_number.toPrecision(4) + "<br>");
document.write("Two-decimal fixed: " + fix_me_at_two.toFixed(2) + "<br>");

And now the output looks like this:

Big number exp: 4.2e+16
Small number exp: 3.21e-6
Four-digit precision: 1.024
Two-decimal fixed: 25.10

Entering Other Formats

What if you want to set a constant as a hexadecimal or an octal number? how can you tell JavaScript that that’s what you want to do?

Once again, you just do it in-line. To turn a constant into an octal number, give it a leading zero, and to create a hexadecimal constant, use the standard 0x (zero + x):

var doc_octal = 0405;
var what_the_hex = 0x3e71;
document.write("Number of octal octopi: " + doc_octal + "<br>");
document.write("A hex of a lot: " + what_the_hex + "<br>");

Here’s the output:

Number of octal octopi: 261
A hex of a lot: 15985

Note that in a hexadecimal number, JavaScript interprets “e” as the hex number e (14 in decimal), and not as a sign that the numbers which follow are an exponent. Neither octal nor hexadecimal numbers will take in-line exponents (in an octal number, “e” will produce an error).

Also note that a leading zero always tells JavaScript to convert the number to octal, so don’t use leading zeroes unless you specifically intend the number to be octal.

Making It Look Right

You probably noticed something else as well: Even though the constants are octal and hexadecimal, the output is still decimal. What if you want to display the output in octal or hex?

There’s a method for that  —  specifically, the toString() method. Here’s how it’s used:

var doc_octal = 0405;
var what_the_hex = 0x3e71;
document.write("Number of octal octopi: " + doc_octal.toString(8) + "<br>");
document.write("A hex of a lot: " + what_the_hex.toString(16) + "<br>");
document.write("Plenty of ones and zeroes: " + what_the_hex.toString(2) + "<br>");

JavaScript converts the number to a string in the appropriate format:

Number of octal octopi: 405
A hex of a lot: 3e71
Plenty of ones and zeroes: 11111001110001

See the third line? JavaScript allows you to display the output in binary, even if you can’t explicitly declare a binary constant (which you probably wouldn’t want to do, anyway).

As shown in the example above, the toString() method takes 2, 8, and 16 as arguments, converting the output to binary, octal, and hexadecimal respectively.

(Want to know a secret? The toString() method will actually take any integer from 2 to 36 as an argument, so if you ever need to convert a number to base-23, for example, in JavaScript, you can just use toString(23). Want to know an even better secret? There are some excellent JavaScript courses online where you can find out about number formats and much more.)

Not a Number?!?

If you try to do numeric operations on something that isn’t a number, JavaScript is very good about letting you know. It doesn’t throw its hands up in the air and fling an error message in your face. It just tells you very politely that it’s Not a Number (which JavaScript shortens to NaN):

var apples_and_oranges = "three apples" / "five oranges";
document.write("Three apples divided by five oranges is : " + apples_and_oranges + "<br>");

Look at how JavaScript handles it:

Three apples divided by five oranges is : NaN

You can also use the isNaN() function to see whether or not something really is a number:

var three_apples = "three apples";
var five_oranges = 5;
document.write("Three apples is Not a Number : " + isNaN(three_apples) + "<br>");
document.write("Five oranges is Not a Number : " + isNaN(five_oranges) + "<br>");

Note that the isNaN() function is checking to see if something is not a number, so “true” means “not a number,” and “false” means “is a number.”

Three apples is Not a Number : true
Five oranges is Not a Number : false

Divide by Zero Non-Error

Here’s a fun fact: You can do something like this:

var OMG_Disaster = 247/0;
document.write("OMG! Disaster! It's " + OMG_Disaster + "!!! <br>");

and the universe will not get sucked into a black hole!  What will happen?

JavaScript politely tells you that OMG_Disaster is equal to Infinity:

OMG! Disaster! It's Infinity!!!

Division by zero generates an overflow, and JavaScript treats the overflow as a number which it calls Infinity.

Is it genuine Infinity, or just an overflow error message in disguise?

var OMG_Disaster = 247/0;
var Infinity_minus_five = OMG_Disaster - 5;
document.write("Infinity minus five is " + Infinity_minus_five + ".<br>");

Look at the output:

Infinity minus five is Infinity.

That looks like genuine Infinity. And in fact, the isNaN() function will tell you that it is a number:

var OMG_Disaster = 247/0;
var Tell_me = isNaN(OMG_Disaster);
document.write("I say that OMG_Disaster is NOT a number!  Is that true? <br>" + Tell_me + ".<br>");

And here’s the output:

I say that OMG_Disaster is NOT a number! Is that true?
false.

Now, doesn’t JavaScript sound like a nice, friendly language, one that would be easy to learn from scratch (as well as being in high demand)? It really is, so why not give it a closer look?