Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert Decimal to Binary in JavaScript?
This tutorial will teach us to convert the decimal number to a binary number string. The binary number is the string of only 0 and 1. The computer doesn't understand the high-level programming language, so we need to instruct the computer in a low-level language, represented as the binary string.
Also, binary string is used in digital electronics. Here, we have three methods to convert the decimal number to a binary string.
Using the toString() Method
Using the right shift Operation
Using the modulo Operator
Using the toString() Method
The toString() method is JavaScript built-in string method that we can use to convert any variable into a string. Also, we can use it to convert the number to a string. If we don't pass any parameter to the toString() method, it converts a number to a decimal string with base 10. If we pass a different base, it converts a number to the string with a defined base.
Syntax
Users can follow the below syntax to use the toString() method to convert decimal to binary.
let decimal = 10; // to convert positive decimal to binary let binary = decimal.toString(radix); // to convert negative decimal to binary let binary = (decimal >>> 0).toString(radix);
In the above syntax, to convert the negative decimal number to a binary string, users can see we need to shift the number by 0 bit. The >>> shifts the signed number by a fake bit to convert it to its corresponding positive number. When we apply a fake bit shift operation, the bit of signed number remains the same, but it just converts the number to positive.
If the user performs the decimal to binary on negative numbers without using the fake bit shift operation, the toString() method appends only the '-' sign before the integer. It doesn't return the actual binary string of the negative number.
Parameters
radix ? It is the base for that base users want to convert the number to a string. In our case, radix will always be 2 as we need to convert decimal numbers to strings with base 2, meaning binary string.
Example
<html>
<head>
<title>Convert decimal to binary using JavaScript.</title>
</head>
<body>
<h2>Convert decimal to binary using JavaScript <i> toString(2) </i> method.</h2>
<h4>Examples of decimal and its binary string.</h4>
<div id = "binary"> </div>
</body>
<script>
var binaryOutput = document.getElementById("binary");
let decimal = 1435;
binaryOutput.innerHTML += "1435 == " + decimal.toString(2) + ". <br/> ";
decimal = -1435;
binaryOutput.innerHTML += "-1435 == " + (decimal >>> 0).toString(2) + ". <br/> "; // shifting the fake bit
decimal = 0;
binaryOutput.innerHTML += "0 == " + decimal.toString(2) + ". <br/> ";
decimal = 9658798;
binaryOutput.innerHTML += "9658798 == " + decimal.toString(2) + ". <br/> ";
</script>
</html>
1435 == 10110011011. -1435 == 11111111111111111111101001100101. 0 == 0. 9658798 == 100100110111010000101110.
Using the Right Shift Operation
This method will use the right shift operator to convert the decimal number to a binary string. Users can follow the below algorithm and syntax to achieve our goal.
Syntax
while (decimal > 0) {
if (decimal & 1) {
binary = "1" + binary;
} else {
binary = "0" + binary;
}
decimal = decimal >> 1;
}
Algorithm
STEP 1 ? Create an empty string and a decimal number.
STEP 2 ? Iterate through the decimal number while it is greater than 0.
STEP 3 ? To get the last bit of the decimal number, perform bitwise & operation of 1 with decimal number. If the last bit is 1, append "1" in the front of the binary string. Otherwise, append '0' in the front of the binary string.
STEP 4 ? Remove the last bit from the decimal number using the right shift operator.
Example
In the below example, we have implemented the above algorithm to convert decimal number to binary string.
<html>
<head>
<title> Convert decimal to binary using JavaScript. </title>
</head>
<body>
<h2> Convert decimal to binary using <i> Right shift operator </i> in JavaScript. </h2>
<h4> Converting 756435 to binary string. </h4>
<div id = "binary"> </div>
</body>
<script>
var binaryOutput = document.getElementById("binary");
let decimal = 756435;
let binary = "";
while (decimal > 0) {
if (decimal & 1) {
binary = "1" + binary;
} else {
binary = "0" + binary;
}
decimal = decimal >> 1;
}
binaryOutput.innerHTML = binary;
</script>
</html>
10111000101001010011
Using the Modulo Operator
We will use the modulo and division operation in this method. We will take the modulo of number with 2 and keep dividing it by 2. If the modulo with the number is 1, we will append "1" in front of the binary string. Otherwise, we will append "0" in front of the binary string.
Syntax
Users can follow the below syntax to implement this method.
// iterate through the number till it becomes 0.
while (decimal > 0) {
// if modulo of number with 2 is '1', append 1 in front of binary string. Otherwise append 0.
if (decimal % 2 == 1) {
binary = "1" + binary;
} else {
binary = "0" + binary;
}
// divide number by 2.
decimal = Math.floor(decimal / 2);
}
Example
In the below example, we have implemented the above method to convert decimal to binary using the modulo operator.
<html>
<head>
<title> Convert decimal to binary using JavaScript. </title>
</head>
<body>
<h2> Convert decimal to binary using <i> Modulo operator </i> in JavaScript. </h2>
<h4> Converting 98 to binary string. </h4>
<div id="binary"></div>
</body>
<script>
var binaryOutput = document.getElementById("binary");
let decimal = 98;
let binary = "";
while (decimal > 0) {
if (decimal % 2 == 1) {
binary = "1" + binary;
} else {
binary = "0" + binary;
}
binaryOutput.innerHTML += "decimal is = " + decimal + " remainder is = " + decimal % 2 + " Quotient is = " + Math.floor(decimal / 2) + ". <br/>";
decimal = Math.floor(decimal / 2);
}
binaryOutput.innerHTML += "Binary string is " + binary;
</script>
</html>
decimal is = 98 remainder is = 0 Quotient is = 49. decimal is = 49 remainder is = 1 Quotient is = 24. decimal is = 24 remainder is = 0 Quotient is = 12. decimal is = 12 remainder is = 0 Quotient is = 6. decimal is = 6 remainder is = 0 Quotient is = 3. decimal is = 3 remainder is = 1 Quotient is = 1. decimal is = 1 remainder is = 1 Quotient is = 0. Binary string is 1100010
In the above output, we have rendered the output of every step.
Comparison
| Method | Handles Negative Numbers | Code Complexity | Performance |
|---|---|---|---|
toString(2) |
Yes (with >>> 0) | Single line | Fastest |
| Right Shift Operator | Positive only | Loop required | Good |
| Modulo Operator | Positive only | Loop required | Good |
Conclusion
The first approach using toString(2) is the most practical solution as it handles both positive and negative numbers with minimal code. The second and third approaches are useful for understanding the binary conversion algorithm manually.
21K+ Views
