/ coding

Converting base 10 to binary in JavaScript

For the last while, I’ve mostly been writing in Java for Android projects. But earlier this week, I open sourced a couple of sample web apps for the Creative SDK on GitHub. These sample web apps have been giving me a bit more of an opportunity to code in JavaScript again.

To get my JavaScript brain back in shape, I’ve been playing around on Code Wars, a site that gives you whiteboard-style problems and tests your solutions.

As an example, a question I got last night was along the lines of:

Write a function that takes two integers, and returns a string representing their sum as expressed in binary.

So, the meat of this problem is converting an integer from base 10 to binary.

In Java, you might do this:

Integer.toBinaryString(100);

Quick!

When I started the problem in JavaScript, I had a feeling that, similar to Java, there must be a built-in way to do the same thing. But I wasn’t sure what it was.

Rather than just Googling it, I figured I may as well solve the problem manually first, for the exercise of it.


I will not burden the Internet with my inelegant home-baked solution to the problem, but I did make it happen, and it was a nice enough feeling. While working through the problem, I tried not to think too much about the fact that my 40+ lines of code (hey, I’m a big believer in vertical space) was almost certainly doable in one line with some JavaScript object method.

My general approach to the problem was to:

  • deconstruct the integer into an array of decreasing powers of 2
  • iterate though the array, returning a 0 or 1 depending on whether the next smallest power of 2 is next in the array

This home-baked solution was fun to toy around with as an exercise, but once I was done, the suspense was killing me: how do you convert from an integer to a binary string in one line of JavaScript?


If you’ve been screaming the answer at your screen for a while now, I don’t blame you. But for those like me who haven’t thought about this kind of number conversion in JavaScript in a while, there’s a super simple solution to this problem:

(100).toString(2);

According to MDN, Number.prototype.toString() overrides Object.prototype.toString() with the useful distinction that you can pass in a single integer argument. This argument is an optional radix, numbers 2 to 36 allowed.

So in the example above, we’re passing in 2 to get a string representation of the binary for the base 10 number 100, i.e. 1100100.

It’s likely that you’ve written something like myNum.toString() before without incident, possibly without being aware that there is a Number object override of .toString(). This is because when you don’t pass in the optional radix, Number.prototype.toString() assumes you want a base 10 string representation, and 100 becomes "100", just as you would expect.


There’s no intended moral to this story, but for me, it was a good reminder that it’s worth reviewing the built-in JavaScript object prototype methods from time to time. It’s not like there are a whole lot of them to get familiar with anyways.

It’s also fun to think about how you would approach the problem without the aide of such a built-in method. It will make you appreciate having them all the more.