Juggling bits in JavaScript: bitmasks

U. Rinat
Engineer’s Notes
Published in
3 min readMay 28, 2016

--

After giving a small talk at the HBC Digital Technology Meetup, I finally decided to write a short blog post, summarizing my topic and finally putting my words on “paper”.

My first ever encounter with bitmasks happened about two years ago when I was looking into LDAP implementation with Node.js (it was a nightmare), apparently AD (Active Directory) is using bitmasks to create, control and manipulate user account’s properties (flags), which was very interesting. Now we can take the same concept a cook something similar and interesting with our all-time favorite JavaScript :)

Bitmasks.

There is a good Wikipedia article that explains what bitmasks are and what you can do with it, so I will not go much into details, assuming that all of you are familiar with bitmasks and now you came here to you see how we can say what we know using JavaScript language.

As we know bitwise operators are very performant, because these guys are super close to the metal, and the closer you are to the hardware the more precise and faster you can be, assuming you know exactly what you are doing. Unfortunately this is not the case with JavaScript. JavaScript’s bitwise operators are far from the hardware, can only be performed on numbers and there is layer of float to int back and forth conversions underneath. Nevertheless bitwise operators in JavaScript are still fast. And if we will start doing benchmarking bitwise operators will win (thats for another bog post).

JavaScript has 7 bitwise operators: | (OR), & (AND), ^ (XOR), ~ (NOT), >> (RIGHT SHIT), << (LEFT SHIFT) and >>> 0-FILL RIGTH SHIFT

For our simple bitmask we will need only these two:

| (OR) and & (AND)

Lets start by creating 3 flags:

Now when we have our flags it’s time to create a bitmask (just mask from now on) that will include only 2 of our flags, for this task we will need | (OR) bitwise operator. In order to create a mask we just need to OR a couple flags together:

Now when we have a mask (look at it as a black box), we can tell exactly which of the flags this mask (black box) contains. In other words, now if you have a closed box and you are given an item (flag) you can tell if this item is in the box without opening it.

We can do it by using bitwise & (AND) operator, MASK & ANY_FLAG. If result is anything other than Falsy zero, the this flag is in the mask:

Bam! That’s it. We did bitmask in JavaScript.

I understand that everything above was abstract and (probably) hard to follow, so now it’s time to get back to earth with real-life usage example.

For the real-life example we will take AD-like concept of the user groups that have different permissions.

Each permission will be a FLAG and each user group will be a MASK.

Here is a full code:

Lets check it out in action:

When we set a user group to SUPERUSER first (you can see in the code on line 4 that SUPERUSERs can only see INFO messages and DEBUG messages) we were not able to generate and see the error message, but when we changed user group to ADMIN, everything worked fine.

Thats it. Very short, simple and hopefully useful.

Slides from the talk are available here: http://slides.com/rinchik/deck#/

--

--