DEV Community

Cover image for Turn 1010 into 10! Build Your Own Binary‑to‑Decimal Converter
CodeItBro
CodeItBro

Posted on

Turn 1010 into 10! Build Your Own Binary‑to‑Decimal Converter

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)