# Getting Bitwise with JavaScript

00000001 // 1 — truthy, so LED 7 is ON

Throw in the iteration from 0 to 255, a timeout, and some Johnny Five code, and we end up with this:

## Part 2: Learning to Write

If all we wanted to do was count from 0 to 255 in blinking lights, then the best we can say about bitwise operators is that they save us a few lines. A few days after I got the LEDs blinking, I saw this code for making a two-line liquid crystal display (LCD) work with Johnny Five.

This code was using an array-based approach for sending bits, but from my experience with the LEDs and the shift register, I thought that a bitwise approach might make more sense. Over the course of a few days of working with Andreas Haugstrup and Rick to develop a full API for LCDs in Johnny Five, I got to understand bitwise operations a whole lot better.

As you can imagine, an LCD is a lot more complex than an LED. Instead of simply turning it on or off, you tell it what to do — which character to display next, whether to show the cursor, whether to blink the cursor, where to write the next character — by sending a number between 0 and 255 as eight bits of data. Sound familiar?

Indeed, we already know from the LED example how to send a number between 0 and 255 as eight bits of data. The standard set of ASCII characters take up the numbers 32-127, but that leaves us the numbers 0-31 and 128-255 for commands.

Some of the commands we need to send to our LCD are actually combinations of instructions. For example, if we want to position the cursor somewhere on the LCD, we need to send a single command that says both “we want to position the cursor” and “this is where we want to put it.” Unlike in JavaScript, we can only send a single argument: a number between 0 and 255. The bitwise OR operator, `|`, provides a way to send several pieces of information in that single number.

Let’s look at the Johnny Five method that sets the cursor position:

``````LCD.prototype.setCursor = function( col, row ) {
var rowOffsets = [ 0x00, 0x40, 0x14, 0x54 ];
this.command( LCD.SETDDRAMADDR | ( rowOffsets[ row ] + col ) );

return this;
};
``````

(If you need a refresher on hexadecimal numbers like 0x00, you’re probably not alone.)

The bitwise OR operator looks at the binary representation of two numbers and returns a number that represents the bits that are “on” in either of the two numbers.

For example, consider again the numbers 9 and 128. If you look at the `setCursor` method above, the value 9 is what we’d end up with for `rowOffsets[ row ] + col` if we wanted to position the cursor in the first row (0x00) at the 10th column. The value of `LCD.SETDDRAMADDR` happens to be 0x80, which is 128. In binary, these two numbers look like this:

When we combine these two values using `|`, we arrive at a single number that we can send as a command to the LCD to tell it to put the cursor in the tenth column of the first row:

``````  10000000  // 128 (LCD.SETDDRAMADDR)
| 00001001  // 9 (row 0 + col 9, eg. 0x00 + 9)
__________________
10001001  // 137
``````

We can send other numbers to put the cursor elsewhere, to make the cursor blink, to turn the LCD on and off, and, most importantly, to write characters to the screen. Understanding and using bitwise operators makes all of it quite straightforward — much moreso than with an array-based approach — and after a few days of work, Johnny Five now supports the same LCD features as the C-based API.

## More Bitwise Fun

The Mozilla Developer Network has incredible documentation about all of the bitwise operators, and more discussion and examples of how they can be used.

If you’ve ever wondered why you can do `~myArray.indexOf(targetVal)` and get a useful boolean, pay special attention to the discussion of the bitwise NOT operator `~`, which flips the bits of the binary representation of a number, and to the discussion of signed 32-bit integers, where you’ll learn that -1 is represented in binary as 32 1’s in a row. Flipping the binary bits of -1 (the value returned by `indexOf` when an item is not found in an array) returns 0, a falsy value. Flipping the bits of any value that indicates an item was found in an array will return a truthy value.

Finally, I’ve put together a JSBin that simulates the fun you can have with LEDs and bitwise operators. It’s a fun way to see some of what we’ve covered in this post without having to wire up an Arduino:

That said: if you like JavaScript, you should get an Arduino, and you should build things with Johnny Five. Rick said it best with his initial encouragement to me: as people who make things on computer screens all day, it’s incredibly cool the first time you make an LED light up in the real world. I haven’t had this much fun with JavaScript — or poked in so many of its nooks and crannies — in a long time.

We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.

1. Cool writeup, I played with the Arduino stuff a while ago and was turned off of it by having to write in C. I didn’t know about Johnny Five and now that I do I’ll have to go back to it and see what I can accomplish with my favorite language ðŸ™‚

• Yes — that’s what I’m doing in the `numToBinaryArray` method. However, as you can see in that method, to get an eight-bit representation of the number requires padding the number with leading 0’s, and then you’re still left with a string rather than a real number. All in all, working with a number, rather than a string, felt more straightforward — and opened the door to more useful things like bitwise AND and OR operations — once I got the hang of it.

2. Thanks for writing this, Rebecca! I admit I’m also one of those developers who has avoided bitwise operators for far too long. Thanks for making the whole concept approachable. In related news, I’m working on getting Johnny-Five to work with the other type of shift register, Parallel-In-Serial-Out (aka \”74HC165\”), which is used for more input [1], like buttons or switches. Hopefully, there will be some pull requests to the main Johnny-Five repo in the not too distant future!

[1]: Short Circuit – \”More Input\”: http://youtu.be/Pj-qBUWOYfE ðŸ™‚