Bitwise Operators in Javascript


Bitwise operators sounds similar but are different, they work on bit level, JavaScript have and(&), or(|), not(~), xor(^), left shift(<<), right shift(>>). They manipulate the bit values of the operands.

Bitwise Operators

&, |, ~, ^, <<, >>

The bitwise operators as the name suggests, work on the bit level of the operands. In the section below we will describe them in detail. The operations are similar to the logical AND and OR but with a difference that they are done at the bit level. See following bit table to understand the operations of these operators on bits.


 AND
 0 & 0 = 0
 0 & 1 = 0
 1 & 0 = 0
 1 & 1 = 1
 
 OR
 0 | 0 = 0
 0 | 1 = 1
 1 | 0 = 1
 1 | 1 = 1

 NOT
 ~0 = 1
 ~1 = 0

 XOR
 0 | 0 = 0
 0 | 1 = 1
 1 | 0 = 1
 1 | 1 = 0

 LEFT SHIFT
 111<<1 = 110

 RIGHT SHIFT
 111>>1 = 011

Now to understand better let us create the programming example using these operators, before we proceed we have created two utility functions which will help to understand these better. these are functions that will convert decimal to binary and binary to decimal to display the overall going, you don't have to bother on these functions for now, our focus is on the Operators not these functions.

 /*conversion of decimal to binary*/
function getBinary(dec){
   dec = parseInt(dec);
   return dec.toString(2);
 }

  /*conversion of binary to decimal*/
 function getDecimal(bin){
   return parseInt(bin,2);
 }

 

Now let us start one by one, starting with '&'

The AND(&) operator

 
//code
var a = 4;
console.log(&quot;Decimal value of a: &quot;+a);
console.log(&quot;Binary value of a: &quot;+getBinary(a));

 var b = 7;
 console.log(&quot;Decimal value of b: &quot;+b);
 console.log(&quot;Binary value of b: &quot;+getBinary(b));

 c = a &amp; b;
 console.log(&quot;Decimal value of c: &quot;+c);
 console.log(&quot;Binary value of c: &quot;+getBinary(c));


  
 Output:
 Decimal value of a: 4
 Binary value of a: 100
 Decimal value of b: 7
 Binary value of b: 111
 Decimal value of c: 4
 Binary value of c: 100

see how the bit wise operations have worked, 100(4) & 111(7) resulted in 100(4). Yes 1&1=1, 0&1=0. The case for the '|' is also similar as you can see in following program. we have only replaced & by | and the rest is same

The OR(|) operator

 c = a | b;
 console.log("Decimal value of c: "+c);
 console.log("Binary value of c: "+getBinary(c));
 Output:
 Decimal value of a: 4
 Binary value of a: 100
 Decimal value of b: 7
 Binary value of b: 111
 Decimal value of c: 7
 Binary value of c: 111

Now the Not Operator, it oppose the bits, as 1 to 0 and 0 to 1

The Not(~) operator

 
 //code
 c = ~a;
 console.log(&quot;Decimal value of c: &quot;+c);
 console.log(&quot;Binary value of c: &quot;+getBinary(c));
 Output:
 Decimal value of a: 4
 Binary value of a: 100
 Decimal value of b: 7
 Binary value of b: 111
 Decimal value of c: -5
 Binary value of c: -101

Now the question is why negative and if it only opposes the bits, how come it is 101 not 011, well because the operation is performed considering the sign bit that is the left most bit, and JavaScript perform operations using 32 bit system, in consideration. so, it will act like

0000 00000 0000 0000 0000 0000 0000 0100
1111 1111 1111 1111 1111 1111 1111 1011

thus -5 is the final result.

The XOR operator

c = a^b;
console.log("Decimal value of c: "+c);
console.log("Binary value of c: "+getBinary(c));
 Output:
 Decimal value of a: 4
 Binary value of a: 100
 Decimal value of b: 7
 Binary value of b: 111
 Decimal value of c: 3
 Binary value of c: 11

the js worked like 1^1 = 0, 0^1 = 1 so the final result is 011 or 11.

The SHIFT operators

they add 0(s) to the left or the right of the bit stream, thus moving it by the specified number of places. in the following examples we are going to show this.

c = a<<1;
console.log("Decimal value of c: "+c);
console.log("Binary value of c: "+getBinary(c));
 Output:
 Decimal value of a: 4
 Binary value of a: 100
 Decimal value of b: 7
 Binary value of b: 111
 Decimal value of c: 8
 Binary value of c: 1000
 c = a>>1;
 console.log("Decimal value of c: "+c);
 console.log("Binary value of c: "+getBinary(c));
 Output:
 Decimal value of a: 4
 Binary value of a: 100
 Decimal value of b: 7
 Binary value of b: 111
 Decimal value of c: 2
 Binary value of c: 10

So this is pretty much about the working of the Bitwise operators, they are sometimes a tough job to understand but on the ground level they work great, and must be proceeded with caution.