Bitwise Operators in JavaScript

Bitwise operators convert their operands into a binary number and operate on each bit. There are several operators available Bitwise AND (&), Bitwise OR (|), Bitwise XOR (^), Bitwise NOT (~), Left Shift (<<), Sign-propagating right shift (>>) and Zero-fill right shift (>>>).

Bitwise Operators & Binary Numbers

Bitwise operators operate on Binary numbers i.e. zeros & ones. Hence it is important to understand how they are stored to understand the Bitwise operators

A binary number is a number expressed in the base-2 numeral system or binary numeral system. It uses 0 (zero) and 1 (one) to represent the numbers.

For Example, the number 20 is represented as follows in the binary system

Decimal     Binary 
20          10100

You can convert a decimal number to a binary number using the toString method and passing the 2 as the radix.

console.log(Number(20).toString(2))   //10100

JavaScript uses 64-bit floating-point numbers to represent numbers. But when we use the Bitwise Operators, it converts them to 32-bit signed integers, performs the Bitwise operations, and converts them back to floating-point representation.

Signed 32-bit integers use the first bit to store the sign, and the remaining 31 bits to represent the numeric value of the integer. Hence number 20 in signed 32-bit binary is represented as below.

sign       Remaining 31 Bits for Numbers
bit

0          0000000000000000000000000010100       Total 32 Bits

Sign bit
0 is positive number
1 is negative number

Since the most significant bit (leftmost) is the sign bit, which gives you only 31 bits for the number value. Hence the max value that can use with the Bitwise operators is 2147483647, above which you will not get the correct results.

Negative Numbers

The positive number is stored in a true binary format. But Negative numbers are stored in a format called two’s complement.

To get the two’s complement of an integer,

1. Write out the positive number in binary
2. Invert the digits
3. Add one to the result.

For Example to get the number 20, start with the binary representation of 20

+20 as binary
0 0000000000000000000000000010100     

Invert the digits

1 1111111111111111111111111101011    

Add 1 to the result

1 1111111111111111111111111101011    
                                1 +
---------------------------------
1 1111111111111111111111111101100 
---------------------------------   

The result is how -20 is stored as a binary number in two complement

11111111111111111111111111101100

You can refer to the Binary to the Decimal converter to check the result. Make sure to choose the signed 32 bit in the dropdown.

If the number has more than 32-bit integers get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32-bit integer

Before: 11100110111110100000000000000110000000000001
After:              10100000000000000110000000000001

Bitwise AND &

The Bitwise AND operator accept two operands. It compares each binary digit of the left operand with the digit at the corresponding position in the right operand. If both the bits are 1, then it returns 1, else returns 0. The following table shows how the digits are compared

Example

console.log(9  & 7)     //1
console.log(-9 & -7)    //-15
console.log(-9 & 7)     //7
console.log(6  & 7)     //6
console.log(37 & 23)    //5

9 & 7   =  1

00000000000000000000000000001001   =9
00000000000000000000000000000111   =7
--------------------------------
00000000000000000000000000000001   =1
--------------------------------

-9 & -7  = -15

11111111111111111111111111110111   = -9
11111111111111111111111111111001   = -7
--------------------------------
11111111111111111111111111110001   = -15
--------------------------------

-9 & 7  = 7

11111111111111111111111111110111   = -9
00000000000000000000000000000111   =  7
--------------------------------
00000000000000000000000000000111   =  7
--------------------------------

6 & 7  = 6

00000000000000000000000000000110   = 6
00000000000000000000000000000111   = 7
--------------------------------------
00000000000000000000000000000110   = 6
--------------------------------------

37 & 23 = 5

00000000000000000000000000100101   = 37
00000000000000000000000000010111   = 23
--------------------------------
00000000000000000000000000000101   = 5
--------------------------------

Bitwise OR |

The Bitwise OR operator accepts two operands. It compares each binary digit of the left operand with the digit at the corresponding position in the right operand. If both the bits are 0, then it returns 0, else returns 1. The following table shows how the digits are compared

Example

console.log(9  | 7)     //15
console.log(-9 | -7)    //-1
console.log(-9 | 7)     //-9
console.log(6  | 7)     //7
console.log(37 | 23)    //55


9 | 7   =  1

00000000000000000000000000001001   =9
00000000000000000000000000000111   =7
--------------------------------
00000000000000000000000000001111   =1
5
--------------------------------


-9 & -7  = -15

11111111111111111111111111110111   = -9
11111111111111111111111111111001   = -7
--------------------------------
11111111111111111111111111111111   = -1
--------------------------------



-9 & 7  = 7

11111111111111111111111111110111   = -9
00000000000000000000000000000111   =  7
--------------------------------
11111111111111111111111111110111   =  -9
--------------------------------


6 & 7  = 6

00000000000000000000000000000110   = 6
00000000000000000000000000000111   = 7
--------------------------------------
00000000000000000000000000000111   = 7
--------------------------------------


37 & 23 = 5

00000000000000000000000000100101   = 37
00000000000000000000000000010111   = 23
--------------------------------
00000000000000000000000000110111   = 55
--------------------------------

Bitwise XOR ^

The Bitwise XOR operator accepts two operands. It compares each binary digit of the left operand with the digit at the corresponding position in the right operand. If both the bits are different then it returns 1, else 0. The following table shows how the digits are compared

Examples

console.log(9  ^ 7)     //14
console.log(-9 ^ -7)    //14
console.log(-9 ^ 7)     //-16
console.log(6  ^ 7)     //1
console.log(37 ^ 23)    //50


9 | 7   =  1
4

00000000000000000000000000001001   =9
00000000000000000000000000000111   =7
--------------------------------
00000000000000000000000000001110   =1
4
--------------------------------


-9 & -7  = 14

11111111111111111111111111110111   = -9
11111111111111111111111111111001   = -7
--------------------------------
00000000000000000000000000001110   = 14
--------------------------------



-9 & 7  = -16

11111111111111111111111111110111   = -9
00000000000000000000000000000111   =  7
--------------------------------
11111111111111111111111111110000   =  -16
--------------------------------


6 & 7  = 1

00000000000000000000000000000110   = 6
00000000000000000000000000000111   = 7
--------------------------------------
00000000000000000000000000000001   = 1
--------------------------------------


37 & 23 = 5
0

00000000000000000000000000100101   = 37
00000000000000000000000000010111   = 23
--------------------------------
00000000000000000000000000110010   = 50
--------------------------------       

Bitwise NOT ~

Bitwise NOT ~ is a unary operator, hence it takes only one operand. It just flips the binary digits from 1 to 0 & 0 to 1.

~5 = 6
00000000000000000000000000000101   = 5
11111111111111111111111111111010   = -6

~6 = 7
00000000000000000000000000000110   = 6
11111111111111111111111111111001   = -7

~-6 = 5
11111111111111111111111111111010   = -6
00000000000000000000000000000101   = 5

Left Shift <<

The left Shift operator shift (<<) the specified number of digits of the first operand to the left. The right operand specifies the number of digits to shift

Syntax

a << b

Where

a: The first operand, whose digits to shift left
b: Number of digits to shift.

• The bits are shifted to the left
• Excess bits shifted off to the left are discarded
• Zero bits are added from the right

Example

9
00000000000000000000000000001001   = 9

9 << 1
00000000000000000000000000010010   = 18

9 << 2
00000000000000000000000000100100   = 36


Negative Number

-9
11111111111111111111111111110111   = -9

-9 << 1
11111111111111111111111111101110   = -18

-9 << 2
11111111111111111111111111011100   = -36

Right shift >>

The Right Shift operator (>>) shifts the specified number of digits of the first operand to the right. The right operand specifies the number of digits to shift

a >> b

Where

a: The first operand, whose digits to shift
 right
b: Number of digits to shift.

• The bits are shifted to the right
• Excess bits shifted off to the right are discarded
• Copy of the leftmost bit is added to the left. The leftmost bit is the sign bit. The +ve numbers have 0 as their left most bit, and -ve numbers have 1 as their left most bit. Hence they preserve their sign.

//+Ve Number

console.log(9 >> 1)    //4
console.log(9 >> 2)    //2

9
00000000000000000000000000001001   = 9

9 >> 1
00000000000000000000000000000100   = 4

9 >> 2
00000000000000000000000000000010   = 2


//-Ve Number
console.log(-9 >> 1)   //-5
console.log(-9 >> 2)   //-3

-9
11111111111111111111111111110111   = -9

-9 >> 1

11111111111111111111111111111011   = -5

-9 >> 2
11111111111111111111111111111101   = -3

Unsigned right shift >>>

The Unsigned right Shift (also known as zero-fill right shift) operator (>>>) shift the specified number of digits of the first operand to the right. The right operand specifies the number of digits to shift

a >>> b

Where

a: The first operand, whose digits to shift right
b: Number of digits to shift.

• The bits are shifted to the right
• Excess bits shifted off to the right are discarded
• Zero bits are added from the left. Hence the the sign bit becomes 0, so the result is always non-negative

//+Ve Number

console.log(9 >>> 1)    //4
console.log(9 >>> 2)    //2

9
00000000000000000000000000001001   = 9

9 >> 1
00000000000000000000000000000100   = 4

9 >> 2
00000000000000000000000000000010   = 2


//-Ve Number
console.log(-9 >>> 1)   //2147483643
console.log(-9 >>> 2)   //1073741821

-9
11111111111111111111111111110111   = -9

-9 >> 1

01111111111111111111111111111011   = 2147483643

-9 >> 2
00111111111111111111111111111101   = 1073741821

Bitwise assignment operators

Bitwise Assignment operators assign values to a JavaScript variable after performing the bitwise operation between the variable & the right operand.

Example

let y=9
y &=7
console.log(y)  //1


//is same as 
let y = 9
y = y & 7 ;
console.log(y)  //1

List of Bitwise Assignment Operators

• &= (bitwise AND assignment)
• |= (bitwise OR assignment)
• ^= (bitwise XOR assignment)
• <<= (bitwise left shift and assignment)
• >>= (bitwise right shift and assignment)
• >>>= (bitwise unsigned right shift and assignment)

Reference

1. Expressions & Operators
2. Precedency & Associativity