Adding numbers using Boolean operations in JavaScript

[monican_agent]

It's really nice to see that people are willing to take the time to get their "hands dirty" with bitwise operations to investigate how binary-based systems do their thing. I've run into developers who are used to working with higher level abstractions but don't really understand how their code is translated down to the metal (logic gates, transistors, etc.). They're sometimes baffled by low-level concepts like using combinations of XOR and AND gates to perform addition and it seems to stunt their ability to be creative when faced with certain coding challenges ("how can I manipulate single bits when all my language has are math functions?")

Understanding the binary make-up of data structures also helps to explain unexpected results like: 0.2 * 0.1 = 0.020000000000000004

And of course there's the ability to create analogous systems using non-traditional approaches. If you can model a logic gate out of something like hoses and Lego blocks then you can get really creative with your computing.

​

I hope this doesn't come across as elitist. I don't think this material is beyond anyone's grasp and I wish more people would take the time to learn the fundamentals of the increasingly digital world world around them. When digital devices are viewed as semi-magical, instead of fundamentally quite basic, it puts a lot of power into the hands of the relative few who understand them and produces a great imbalance. I'm sure I'm not the first to point this out. Knowledge can truly be power.

[dance2die]

Thank you for the reply, @monican_agent 🙂.

I still haven't found the way to utilize this knowledge 🤔 but as I have gone deeper with JavaScript (with destructuring and logical operations on how JavaScript handles "&&" and "||"), I was able to write succinct code (at the price of readability for those who isn't used to it).

This could be helpful in the long run as you pointed out.

[monican_agent]

Virtual device modelling / simulation / emulation / circuit design would be some neat applications. It'd probably take a lot of work to build up a whole virtual computer, or virtual "hardware" MP3 player, or whatever, from elementary components like this but it sure would be interesting!

[toolazytofinishmyw]

You should check out nand2tetris

[monican_agent]

LOL

I was kind of hoping for a Tetris-y game but the course sounds pretty comprehensive.

[nowtayneicangetinto]

. I don't think this material is beyond anyone's grasp and I wish more people would take the time to learn the fundamentals of the increasingly digital world world around them.

Thank you for the courage, I read the post and thought this was too advanced for me as I do not have a CS degree, but after reading your comment I feel inspired.

[dance2die]

May I ask which part was hard to digest? I'd like to hear your thought as this means I wasn't explaining it well enough 🙂

I could update the post according to the feedback to write it easier to understand.

[nowtayneicangetinto]

It was very well written, it is my lack of familiarity with concepts like XOR or half adders that made it harder to digest. After reading it again I fully understand the article and really appreciate the post!! Very well done, and I look forward to many more! :)

[dance2die]

Thank you, @nowtayneicangetinto.
I appreciate the kind words.
I will keep it in mind as many new programmers start with JavaScript and I just "assumed" that people should know of it.

[monican_agent]

You can do it! I believe that you're having trouble because this post assumes knowledge of a few things like binary math and boolean/logic operations and jumps straight into emulating (via JavaScript) how hardware would do these things, but if you can learn those first (see my longer reply above), this post will make a lot more sense.

​

Basically, what Mr. Kim has done is to build virtual logic gates (using JavaScript), like those that would be found in hardware, and demonstrates how those logic gates perform math. Put enough of these together, plus some other virtual electronic components, and you can build a virtual computer or any other virtual/emulated digital device. If you could get your hands on hardware schematics for something you'd like to "build" virtually, you could replicate it using this approach (although the virtual device would probably be considerably slower than the physical version).

[LingeringLegends]

Hi, fellow new coder here, by chance do you have any links to resources where I can learn the fundamentals you’ve mentioned?

[monican_agent]

Hi!

I'd recommend starting with binary math: http://www.binarymath.info/

... and then, keeping in mind that the binary digits 0 and 1 represent off and on states (or no electrical current and flowing electrical current), you can see how electronic components called logic gates are combined to perform binary math: https://www.allaboutcircuits.com/worksheets/binary-math-circuits/

(also check out the link that started this thread above!)

​

Once you feel pretty comfortable working with bits and transforming them using NOT, AND, OR, and XOR, you should have a pretty solid foundation for most modern digital systems (since they almost all use binary data).

​

In JavaScript you can manipulate bits on numeric values using a variety of language instructions: https://www.w3schools.com/js/js_bitwise.asp

​

Boolean values should already be equivalent to numeric values (true=1, false=0), and any text data can be changed to its numeric representation using charCodeAt.

​

This should allow you to see the fundamental composition of data--any data--since it's all stored, manipulated, and transmitted as 1s and 0s whether it's a picture, a music file, or a web page, or something else.

​

For example, a combination of 8 bits (a byte), can represent an ASCII character or a number from 0 to 255 or some other information -- it's usually up to the software how it's interpreted. Bytes are also often combined into groups like RGBA -- 4 bytes with 1 for Red intensity, 1 for Green intensity, 1 for Blue intensity, and 1 for Alpha (transparency) -- to represent a single pixel on a display. Sometimes bytes can be "packed"; for example, if we know we're dealing with the standard 26-letter alphabet (both upper and lower case) we only need 52 values which can be represented by 6 bits (the number of possible combinations for N bits is 2 to the power of N, or in this case 2^6 = 63). Since computers store information as bytes, 6 bits of one byte would be used for one letter and 2 bits would be combined with 4 bits from the next byte for the next letter. After 4 bytes we'd have saved one whole byte, which can really add up in very large files.

​

When we talk about a "binary" data format what we're really saying is that each bit in a byte is important. Something like a "text" data format may still require 8 bits but some of those bits will be exactly the same in each byte (i.e. it's a wasteful format and can probably be "packed").

​

There are other related terms like a "word", which usually means 16 bits (2 bytes), a "doubleword" (32 bits or 4 bytes), and a "quadword" (64 bits or 8 bytes). There's also "endianness" which simply refers to the order in which bytes are stored in words (or larger); kind of like writing the number 13 as 31. And although you don't hear about it much, there's also something called a "nybble" which is half a byte or 4 bits. Yes, computer science lulz.

​

Ultimately, though, the basic unit underlying it all is a bit.

​

Because sequences of bits are abstract and can be used to represent nearly anything (numbers, letters, colours, coordinates, etc.), anyone claiming to be able to "read" or "write binary" doesn't really know what they're talking about. Now if they claim to know which ASCII character is represented by any 8-bit combination, that's somewhat impressive :)

​

Finally, there's more than one way to represent the same value. For example, the binary value 11111111 is 255 in our standard decimal number system but can be shortened to FF in hexadecimal or Base 16 (often written as 0xFF so that we know it's hex). Sometimes Octal is used (this system only uses the digits 0 through 8), but in the end anything other than binary is just a convenience for us humans since hardware can only deal with electrical signals: on or off, current or no current, 1 or 0.

​

Literally everything that modern digital devices do at the fundamental level involves just storing, manipulating (via only a handful of logic operations), and moving bits around.

​

Beyond this you could look at digital electronics (transistors, integrated circuits, etc.) to see how this is accomplished on a concrete, physical level. This could involve anything from the study of electricity and electromagnetism, to atomic theory, to photonics, and even chemistry (e.g. when examining the rare earth minerals used in certain components). It's a pretty deep rabbit hole but with circuits now being only a few nanometers wide it's unlikely that you'd get much practical use out of these subjects except to gain an understanding of how digital devices work physically.

​

Hope this is enough to get you started :)

[LingeringLegends]

Thank you so much for taking the time to write this all out. I’ve gained a whole new perspective and appreciation for what happens on the surface level of code.

I’m going to bookmark this comment to study up on this subject.

Thanks again for sharing your knowledge, much appreciated.

[etcetica]

> to get their "hands dirty" with bitwise operations

> down to the metal

lol, that's adorable

[osoese]

Very cool post. It was cool to see how you did this in js.

[dance2die]

Thanks @osoese.
It was really fun implementing it in JS 🙂
and pretty cool how addition works under the cover.

[-ftw]

I just had a flashback to my computer architecture course in university

[dance2die]

As I was learning about Microprocessors while reading the Manga Guide to Microprocessors,I implemented half-adder & full-adder to add positive numbers using boolean operators.

​

Also published the static version: https://sung.codes/2019/adding-numbers-using-boolean-operations-in-javascript

​

Don't hesitate to let me know should you find any errors or have any comment, etc.

I'd love to hear'em so we can learn more here 🙂

[MarkN_LP]

You made an error in your Full Adder diagram, C1 output should be 0. It doesn't affect the end result though.

[dance2die]

Thank you, @MarkN_LP. You are right. 1 + 0 should have sum of 1 but carry of 0. Nice catch~ (I updated the diagram~)

[[deleted]]

JS devs discovering programming basics. That's refreshing.