Being self taught for 10 years and beginning formal education in Computer Science, I have learned much more than I was expecting to, including the math behind binary numbers. And while it might seem like useless information at first glance, I’m actually glad I learned it because understanding binary to a certain degree means that you also understand how much memory numbers take up, and it also its foundations in the basic abstractions of computing: by default, things are either on or off. You can’t exactly send the number “37” through an electrical signal and expect a computer to process it. What’s actually happening deep down is a series of simple “yes/no” logic gates, and they all add up to the complexity that we know as modern computers.
To help other people better understand how simple “on/off” switches add up to make a number (and to hone my JavaScript skills) I’ve created a simple webapp using React. You can press the corresponding buttons to toggle each number to 1 or 0 (on or off).
https://gavynbryan.github.io/BinaryButtons/
I designed it with the assumption that you already know the basics of how the math works, but just in case this article shows up in a Google search, I’ll give a quick explanation. Binary numbers are actually best read from right to left. Each number adds 2, to the power of whatever column it’s in, starting with zero. So, the rightmost column, would be 2^0, if it were activated. That would be 1. The leftmost number here it’s the 8th column. But, because the columns start with 0, it would actually be 2^7, which is 128. Therefore, if you had 10000001, it would equal 129.
If it sounds confusing to you, then don’t worry. It also took me a minute or two of thinking before things clicked and I said, “I get it now!”. That’s why I built this app, to create a visual and interactive demonstration that you can use for yourself, so it will take other people less than a minute or two. I hope future CS students find this useful.
How I programmed it
I used React, which is a JavaScript library for making UI development much easier. There were 2 reasons I used JS.
- I wanted the app to be lightweight and web-based.
- I needed practice because I don’t use JavaScript very often
It’s not usually my go-to language when making things, I much prefer using C++, C# or Python. However it has become a very common language now that things are becoming mobile/cloud-based and I think that brushing up on it would help maintain relevance in the job market.
I initialized an array of size 8, filling it all with 0s as default values. These do not directly point to the columns displayed on the page, but instead (inversely) represent their place and allow me to do the math directly from the core of the app as opposed to collecting a bunch of values stored inside of other objects.
Per click on the buttons, the corresponding columns[] index is changed to either 1 or 0, and I call the calculate() function. The calculate function iterates through every value in the array. Notice how I set the exponent to 7 minus the index of the for loop. This is because I chose to write the columns from left to right and the binary math actually works from right to left. So when the for loop is on column #0, the app will bring 2 to the power of 7, multiplied by either 1 or 0. This adds up to the total, after which it’s rendered to the screen.
Gavyn Bryan - Programming Blog 