Understanding bitwise operations in javascript

Question

I am currently storing data inside an XML doc as binary, 20 digits long, each representing a boolean value.

<matrix> 

    <resource type="single"> 
     <map>10001010100011110000</map> 
     <name>Resource Title</name> 
     <url>http://www.yoursite.com&lt;/url&gt; 
    </resource>

</matrix>

I am parsing this with jQuery and am currently using a for loop and charAt() to determine whether to do stuff if the value is == "1".

for (var i = 0; i < _mapLength; i++) {

if (map.charAt(i) == "1") { //perform something here }

}

This takes place a few times as part of a HUGE loop that has run sort of slow. Someone told me that I should use bitwise operators to process this and it would run faster.

My question is either:

Can someone offer me an example of how I could do this? I've tried to read tutorials online and they seem to be flying right over my head. (FYI: I am planning on creating a Ruby script that will convert my binary 0 & 1's into bits in my XML.)

Or does anyone know of a good, simple (maybe even dumbed down version) tutorial or something that could help me grasp these bitwise operator concepts?

Answer 1

Assuming you have no more than 32 bits, you can use JavaScript's built-in parseInt() function to convert your string of 1s and 0s into an integer, and then test the flags using the & (and) operator:

var flags = parseInt("10001010100011110000", 2); // base 2

if ( flags & 0x1 )
{
   // do something
}

...

See also: How to check my byte flag?

(question is on the use in C, but applies to the same operators in JS as well)

Answer 2

Bitwise operators will certainly be faster but only linearly and not by much. You'll probably save a few milliseconds (unless you're processing HUGE amounts of data in Javascript, which is most likely a bad idea anyway).

You should think about profiling other code in your loop to see what's slowing it down the most. What other algorithms, data structures and allocations do you have in there that could use refactoring?

Answer 3

Single ampersand (&, as opposed to &&) does bit-wise comparison. But first you need to convert your strings to numbers using parseInt().

var map = parseInt("10010", 2); // the 2 tells it to treat the string as binary

var maskForOperation1 = parseInt("10000", 2);
var maskForOperation2 = parseInt("01000", 2);
// ...

if (map & maskForOperation1) { Operation1(); }
if (map & maskForOperation2) { Operation2(); }
// ...

Answer 4

Be extremely wary. Javascript does not have integers -- numbers are stored as 64 bit floating-point. You should get accurate conversion out to 52 bits. If you get more flags than that, bad things will happen as your "number" gets rounded to the nearest representable floating-point number. (ouch!)

Also, bitwise performance in javascript is not-so-great, because the Floating point number will be converted to an integer, tested, and then converted back.

If you have several places that you want to check the flags, I'd set the flags on an object, preferably with names, like so:

var flags = {};
flags.use_apples = map.charAt(4);
flags.use_bananas = map.charAt(10);

etc...

Then you can test those flags inside your loop:

if(flags.use_apples) {
    do_apple_thing();
}

An object slot test will be faster than a bitwise check, since Javascript is not optimized for bitwise operators. However, if your loop is slow, I fear that decoding these flags is probably not the source of the slowness.