Ever stared at 1011 and wondered how on earth it becomes the number 11? You’re not alone. Many of us first encounter binary numbers in a programming class or during a coding challenge, and it can feel like a secret language.
The good news? Converting from binary to decimal is straightforward once you understand the pattern — and JavaScript gives us a few handy tools to do it.
By the end of this tutorial, you’ll know three different ways to turn a string of 0s and 1s into a base-10 number.
We’ll start with a built-in method, then roll up our sleeves to write our own converter, and finally explore bitwise operations.
Ready to demystify binary? Let’s go.
Why Bother with Binary?
Computers represent numbers using the binary numeral system, which only uses two symbols: 0 and 1. Each position in a binary number is a power of two.
For example, converting the binary string 1011 to decimal:
1×2³ + 0×2² + 1×2¹ + 1×2⁰
= 8 + 0 + 2 + 1
= 11
Understanding this pattern helps you reason about what’s happening under the hood when you write conversion code. It also explains why computers rely on bits instead of the decimal digits we use every day.
Method 1: Using parseInt()
JavaScript’s built-in parseInt() function makes binary conversion almost effortless.
function binaryToDecimalParseInt(binaryString) {
return parseInt(binaryString, 2);
}
console.log(binaryToDecimalParseInt("1011")); // 11
This works because parseInt() accepts a radix (base) as its second argument.
Why it works
First argument → the string you want to convert
Second argument → the base of that number
Passing 2 tells JavaScript to treat the string as binary
Try this in your browser console:
parseInt("1101", 2);
Quick, clean, and perfect when you just need a result.
Method 2: Building Your Own Loop
If you want to fully understand the mechanics, writing your own converter is a great exercise.
function binaryToDecimalIterative(binaryString) {
let decimal = 0;
const n = binaryString.length;
for (let i = 0; i < n; i++) {
const digit = parseInt(binaryString[n - i - 1]);
decimal += digit * Math.pow(2, i);
}
return decimal;
}
console.log(binaryToDecimalIterative("1011")); // 11
Breaking it down
Start with decimal = 0
Loop from right to left
Multiply each bit by the correct power of two
Add the result to the running total
This mirrors exactly how you would convert binary to decimal by hand.
Method 3: Using Bitwise Operators
For a lower-level and more “computer-sciencey” approach, JavaScript’s bitwise operators get the job done.
function binaryToDecimalBitwise(binaryString) {
let decimal = 0;
const n = binaryString.length;
for (let i = 0; i < n; i++) {
if (binaryString[i] === "1") {
decimal |= 1 << (n - i - 1);
}
}
return decimal;
}
console.log(binaryToDecimalBitwise("1011")); // 11
What’s happening here?
<< shifts a bit into position
|= sets that bit on the result
Each 1 in the binary string flips the correct bit in decimal
It looks advanced, but it’s the same logic as Method 2 — just expressed in binary operations.
🔍 Bonus: Using Math.pow()
Another custom approach sticks very closely to the math definition
function binaryToDecimalPow(binaryString) {
let decimal = 0;
const length = binaryString.length;
for (let i = length - 1; i >= 0; i--) {
if (binaryString[i] === "1") {
decimal += Math.pow(2, length - 1 - i);
}
}
return decimal;
}
console.log(binaryToDecimalPow("110")); // 6
This version is slightly less concise, but excellent for learning and clarity.
Conclusion
Binary-to-decimal conversion isn’t magic. It’s just patterns and powers of two.
Pick the approach that fits your use case — or try all three to solidify your understanding.
If you’ve got a cleaner implementation or an interesting variation, share it in the comments.
Thanks for reading. Happy coding! ❤️
Top comments (0)