How to Convert Bytes to Gigabytes Using JavaScript

1. Converting to Decimal Base
2. Converting to Binary Base

Have you ever wondered how many bytes are there in a Gigabyte? Gigabyte is a commonly used unit of measurement. Gigabyte is used widely in our day to day world file size of a movie, the capacity of a hard disc, even the size of the Random Access Memory in our laptops or mobile phones all we represent with gigabytes. All the unit in these cases used to address these are in Gigabytes. There is a bit of mathematics required for the conversion of bytes to gigabytes. It is similar to converting meters to kilometres. Let us see how we can do the conversion in JavaScript. There are a couple of approaches for the conversion of bytes to gigabytes, which are as follows.

1. Converting Gigabytes to Bytes in decimal base
2. Converting Gigabytes to Bytes in Binary Base

Converting to Decimal Base

The most common doubt that arises to everyone is if a kilobyte value is 1024 bytes or 1000 bytes. On searching in Google, we get mixed responses. But the underlying concept is simple. In a decimal number system, one Kilobyte value is 1000 bytes, whereas, in a binary number system, the value is 1024 bytes. Hence the conversion parameters change based on this ideology.

Rationale to Conversion With Decimal Base

Before we begin the explanation, we shall look at the key conversion units. As we are dealing with a decimal number base, we will use the following conversion rationale.

• 1 KiloByte = 1000 Byte
• 1 Megabyte = 1000 KiloByte
• 1 GigaByte = 1000 MegaByte

Hence, 1 GigaByte = 1000 * 1000 * 1000 Bytes. In other words, One GigaByte is equivalent to 10 to the power of 9 (10^9) bytes. Hence, simply searching for 1 GB in google gives us a representation like 1e+9. 1e+9 is equal to 1 with 9 zeroes. That is the gist of the conversion calculation.

Conversion Code

We have now understood the calculation behind the conversions and the various units of Bytes. Let us quickly go through the javascript code to convert a number (number of Bytes) given as an input. The code will return the Gigabyte equivalent value for it and display it on the screen.

<h3><center>Byte to GB</center></h3>
<div>
    <center>
        <input type="text" id="bytes_input"><label>Bytes</label>
    </center>
</div>
<div>
    <center>
        <button onclick="convertToGB()">Convert</button>
        <button onclick="reset()">Reset</button>
    </center>
</div>
<center>
    <div>
        <label>Result: </label> <label id="gbValue">0</label> GB
    </div>
</center>

window.onload =
    function() {
  reset();
  updateDisplay(0);
}

function convertToGB() {
  let bytesValue = document.getElementById('bytes_input').value;
  let gbValue = (bytesValue / (1000 * 1000 * 1000)).toFixed(2);
  updateDisplay(gbValue);
}

function reset() {
  document.getElementById('bytes_input').value = 0;
  updateDisplay(0);
}


function updateDisplay(val) {
  document.getElementById('gbValue').innerHTML = val;
}

The steps are as follows.

Remarks

• In essence, we will require a byte having a value with more than seven digits to get a tangible Gigabyte equivalent for it. The minimum output value is 0.01 GB, which converts to 10000000 Bytes. That means using the above code, a byte with a value greater than 10000000 Bytes will be shown in the output. The output for values lesser than that will be 0 GB.
• There is a limitation of the number of digits that a variable can hold in javascript. JavaScript has a constant Number.MAX_SAFE_INTEGER that defines the maximum value a number variable can hold in javascript that is 9007199254740991. Hence, the code will not convert any byte number more than it to the Gigabytes representation. We may lose precision during the conversion. We do not recommend it.
• According to the code we saw above, the output value shows values rounded off to two decimal places. We use the Number.toFixed() method of JavaScript. As per the line (bytesValue / (1000 * 1000 * 1000)).toFixed(2), the output will be 2 decimal places. If we show gigabyte value with better precision, we can tweak the code with .toFixed(3) or .toFixed(4) as per the requirement.

Converting to Binary Base

The more commonly understood ways of converting a byte value to a Gigabyte is with the binary base one. Most of us are aware of the 1024 unit value. Unlike in the decimal system, where the division is by 1000, to convert to higher byte units, in the binary number system, we divide by the 1024 factor.

Basis to Conversion With Binary Base

Before looking at the code for the conversion, let us look at the conversion unit value in the binary number system. Here the rationale will be revolving around 1024 (that is 2 to the power 10 or 2^10).

• 1 KiloByte = 1024 Byte
• 1 Megabyte = 1024 KiloByte
• 1 GigaByte = 1024 MegaByte

Hence, in the binary base system, 1 GigaByte = 1024 * 1024 * 1024 Bytes. Converting a byte number value to Gigabyte will require dividing it by 1024 * 1024 * 1024.

Conversion Code

The following code converts the number of the bytes to a gigabytes representation in the binary system.

<h3><center>Byte to GB</center></h3>
<div>
    <center>
        <input type="text" id="bytes_input"><label>Bytes</label>
    </center>
</div>
<div>
    <center>
        <button onclick="convertToGB()">Convert</button>
        <button onclick="reset()">Reset</button>
    </center>
</div>
<center>
    <div>
        <label>Result: </label> <label id="gbValue">0</label> GB
    </div>
</center>

window.onload =
    function() {
  reset();
  updateDisplay(0);
}

function convertToGB() {
  let bytesValue = document.getElementById('bytes_input').value;
  let gbValue = (bytesValue / (1024 * 1024 * 1024)).toFixed(2);
  updateDisplay(gbValue);
}

function reset() {
  document.getElementById('bytes_input').value = 0;
  updateDisplay(0);
}


function updateDisplay(val) {
  document.getElementById('gbValue').innerHTML = val;
}

As compared to the code with the decimal base system conversion, the only difference here is that we use the 1024 factor instead of 1000 that is evident from the line (bytesValue / (1024 * 1024 * 1024)).toFixed(2).

Remarks

• The same limitation applies in this method for the maximum number range that can be input. A number greater than 9007199254740991 will not guarantee a successful conversion.
• We can adjust the precision with by changing the parameter of the toFixed() function in the line (bytesValue / (1024 * 1024 * 1024)).toFixed(2). Usually, in most cases, 2 or 3 digits are preferred after the decimal.
• The results may differ in both conversions, the decimal base conversion and the binary base conversion. The comparison between the two methods is invalid as it will be like comparing apple and oranges. The results are in the respective number base systems. That means, in the decimal base system of converting bytes to gigabytes, the resultant will be gigabyte representation in the decimal number system and vice-versa for the binary number base system.