# Convert Bytes to Gigabytes Using JavaScript

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.

- Converting Gigabytes to Bytes in decimal base
- 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.

##### We design an HTML GUI to capture the number of bytes from the user. The GUI has a

`Convert`

and a`Reset`

button. We bind the`Convert`

button to the`convertToGB()`

function that converts the given byte value to gigabytes. The`Reset`

button is bound with the`reset()`

function to reset the values so that the user can try newer values to convert.##### The execution of the code starts with the

`window.onload()`

function.`window.onload()`

function is the first one to get executed when the page loads. In this function, we reset the values for the input and the output Gigabyte to 0.##### Once the user enters a byte value and clicks on the

`Convert`

button, the`convertToGB()`

function is triggered.##### In the

`convertToGB()`

function, we capture the value entered by the user in the byte field by using the`document.getElementById("bytes_input").value`

function of javascript and capture it in the`bytesValue`

variable. In the next step, we convert that byte value to gigabytes by dividing the`bytesValue`

by`(1000 * 1000 * 1000)`

. Remember, dividing the value of the byte by 1000 gives us the kilobyte value dividing it further by thousand returns the megabyte value and dividing the megabytes value gives us the gigabytes representation for the bytes.##### We do these calculations and store the result in the

`gbValue`

variable. In the next line, we display the`gbValue`

into the GUI by setting the`label`

value using the`document.getElementById("gbValue").innerHTML`

. And hence the converted value is displayed in the HTML.

### 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
`Number.toFixed()`

function 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.