JavaScript Decimal to Binary Tutorial

tl;dr

JavaScript Decimal to Binary

function convertDecimalToBinary(number){
    var binary = "";
    var temp = number;

    while(temp > 0){
        if(temp % 2 == 0){
            binary = "0" + binary;
        }
        else {
            binary = "1" + binary;
        }

        temp = Math.floor(temp / 2);
    } 
   
    return binary;
}

JavaScript Binary to Decimal

function binaryToDecimal(binaryNumber){
    var total = 0;
    for(var i = 0; i < binaryNumber.length; i++){
        var bit = binaryNumber.charAt(binaryNumber.length - (i + 1));
        if(bit == 1){
            var temp = Math.pow(2, i* parseInt(bit));
            total += temp;
        }
    }

    return total;
}

Before learning how to convert a decimal to binary using JavaScript we have to learn how to do the conversion by hand. Once you know how to convert any decimal to binary by hand you can write it in any language.

Decimal to Binary Conversion Algorithm

The algorithm to do the conversion is not too difficult. What we will do is to take a number X and see if it is odd or even. If it is even then we write a 0, if it is odd then we write a 1. Then we are going to take the number and keep dividing it by 2 until we reach 0. Each time we divide the number we look at the answer. If the answer is an odd number then we add a 1, if it is even then we add a 0. You add them from right to left. Meaning, the first division is the least significant number. If you get a decimal number you round it down to the nearest int.

Example 1

Let us pick a pretty low and easy number for our first example.

Number: 16

Round 0: 16 is an even number so we write a 0
Round 1: 16 / 2 = 8. 8 is an even number so we write a 0.
Round 2: 2 / 2 = 4. 4 is an even number so we write a 0.
Round 3: 4 / 2 = 2. 2 is an even number so we write a 0.
Round 4: 2 / 2 = 1. 1 is an odd number so we write a 1.

The resulting binary number will then be, 10000. If you plug that into google you will see that it is correct.

Example 2

Lets do another number that is a bit more difficult than 16.

Number: 72

Round 0: 72 is an even number so we write a 0
Round 1: 72 / 2 = 36. 36 is an even number so we write a 0
Round 2: 36 / 2 = 18. 18 is an even number is even so we write a 0.
Round 3: 18 / 2 = 9. 9 is an odd number so we write a 1.
Round 4: 9 / 2 = 4.5 = 4. 4 is an even number so we write a 0.
Round 5: 4 / 2 = 2. 2 is an even number so we write a 0.
Round 5: 2 / 2 = 1. 1 is an odd number so we write a 1.

The resulting binary number is then: 1001000.

You can perhaps see from the examples that we will be using a while loop when using JavaScript to convert from decimal to binary. Also, since we round down to the nearest integer when we get a decimal number we will be using integer division to chop off the decimal values.

Example 3

Lets do one more example before we write code to convert a decimal to binary with JavaScript.

Number: 103

Round 0: 103 is an odd number so we write a 1.
Round 1: 103 / 2 = 51.5 = 51. 51 is an odd number so we write a 1.
Round 2: 51 / 2 = 25.5 = 25. 25 is an odd number so we write a 1.
Round 3: 25 / 2 = 12.5 = 12. 12 is an even number so we write a 0.
Round 4: 12 / 2 = 6. 6 is an even number so we write a 0.
Round 5: 6 / 2 = 3. 3 is an odd number so we write a 1.
Round 6: 3 / 2 = 1.5 = 1. 1 is an odd number so we write a 1.

The next number would be 0 so we can stop here. The resulting binary number is: 1100111.

Now that we know how to convert a decimal number to binary format we can write code in JavaScript.

We will write a function that takes an integer as input and returns the binary number as a string. We will use a loop and keep dividing by 2 until the resulting number is 0. We will use the modulus operator to check if the number is even or odd. Based on the result we will concatenate a 1 or a 0 onto the string. Remember that we want to add the existing string onto the new character because it works in reverse, as you can see in the examples. The last number that you divide will be the first number in the binary version. To simulate integer division in JavaScript we will use Math.floor(), which will round it down to the nearest integer for us.

Binary to Decimal in JavaScript Code

function convertDecimalToBinary(number){
    var binary = "";
    var temp = number;
 
    while(temp > 0){
        if(temp % 2 == 0){
            binary = "0" + binary;
        }
        else {
            binary = "1" + binary;
        }

        temp = Math.floor(temp / 2);
    }

    return binary;
}

You can copy the code to the console in Chrome and try it out. You should see the following results.

JavaScript decimal to binary

Now you know how to use JavaScript to convert a decimal to binary.

Using the same algorithm to convert a number from decimal to binary you can actually write it in any language now. JavaScript is probably not the language you will be using when you encounter a place where you have to solve this problem. Unless it is for an interview probably.

Binary to Decimal JavaScript

We can also use JavaScript to convert a number from binary to decimal. In order to do that conversion we have to know about the power of two. Each binary digit represents a power of two.

The first one (from right to left) is two to the power of zero, i.e. 2^0 = 1.
The second one is 2^1 = 2.
The third is 2^2 = 4.
The fourth is 2^3 = 8
The fifth is 2^4 = 16.

And on and on it goes.

So in order to convert a decimal to binary with JavaScript we have to look at each individual digit, and if it is a one then we will raise 2 to the power of what index it is. We will start at the back of the string and move our way to the front.

function binaryToDecimal(binaryNumber){
    var total = 0;
    for(var i = 0; i < binaryNumber.length; i++){
        var bit = binaryNumber.charAt(binaryNumber.length - (i + 1 ));
        if(bit == 1){
            var temp = Math.pow(2, i* parseInt(bit));
            total += temp;
        }
    }

    return total;
}

Binary to decimal javascript

This is just one way of coding the algorithm. Now that you know how to do it you can also come up with your own unique twist to it.

For more JavaScript knowledge you should have a look at how to use break and continue statements in JS loops.