Masks

So what do you use the bitwise logical operators for?

In many cases you have the problem of setting or clearing particular bits in a value. The value is usually stored in a variable that is usually regarded as a status variable or flag.

You can set and unset bits in a flag using another value usually called a mask that defines the bits to be changed.

For example if you only want to change the first (least significant) bit then the mask would be 0x01.

If you wanted to change the first and second bits the mask would be 0x03 and so on.

If you find working out the correct hexadecimal value needed for any particular mask then you could use the parseInt function with a radix of two. For example:

a=parseInt("1",2);

sets a to 0x01 and

a=parseInt("11",2);

sets a to 0x03 and so on.

In general just write down a string of zeros and ones with a one in the positions you want to change and use parseInt to convert to a mask value.

Ok now that you have a mask what do you do with it?

Suppose the variable mask contains a value that in binary has a one at each bit location you want to change. Then

flag | mask;

returns a bit pattern that the mask specifies set to one. Notice that the bits that the mask doesn't specify are left at their original values.

For example:

var mask=parseInt("11",2);
var flag = 0xFFF0;
var result = flag | mask;

sets result to 0xFFF3 i.e. it sets the first (least significant) two bits.

If you use

flag & ~mask;

then the bits specified in the mask are set to zero - or unset if you prefer. Notice that you have to apply a not operator to the mask.

For example:

var mask=parseInt("11",2);
var flag = 0xFFFF;
var result = flag & ~mask;

sets result to 0xFFFC i.e. it unsets the first two bits.

As well as setting and unsetting particular bits you might also want to "flip" the specified bits i.e. negate them so that if the bit was a one it is change to a zero and vice versa. You can do this using the XOR operator

flag ^ mask

flips the bits specified by the mask.

For example:

var mask=parseInt("11",2);
var flag = 0xFFFF;
var result = flag ^ mask;
alert(result.toString(16));

sets result to 0xFFFC because it changes the lower two bits from ones to zeros. Again bits not specified by the mask are unaffected.

Of course in each case you don't have to use a variable to specify the mask you could just us a numeric literal.

For example instead of:

var flag = 0xFFFF;
var result = flag ^ mask;

you can write:

var result = flag ^ 0xFFFF;

Also if you want to update the flag rather than derive a new result you can use &=, |= and ^= to perform the update directly.

For example, instead of

var flag = 0xFFF0;
flag = flag | 0xFFF0;

you can use: 

var flag = 0xFFF0;
flag |= 0xFFF0;

Using masks

What sorts of things do you use masking operations for?

Often a low level API will require that particular bits in a status work are set or unset to make it operate in a particular way. However this is unusual in JavaScript because it generally doesn't access lower level APIs. However new developments like Canvas, WebGL and so on are changing this.

One of the best known uses of bit manipulation however predates HTML5 - exctracting the color codes from an RGB color value.

For example:

var RGBcolor=0x010203;
var B=RGBcolor & 0x0000FF;
var G=RGBcolor & 0x00FF00;
var R=RGBcolor & 0xFF0000;

This takes an RGB value and splits it up into its components using appropriate masks.

The result is that you end up with 0x010000 stored in R, 0x000200 in G and 0x000003 in B. Notice that the value of B is correct but R and G are incorrect - the bits need shifting to the right.

This brings us to the use of the shift operators.