Updated March 18, 2023
Introduction to Bitwise Operators in JavaScript
The Bitwise operators in JavaScript act on their operand by operating on them in their binary number (Base 2) representation form (in particular 32-bit numbers form), rather than in their decimal number (Base 10), octal numbers (Base 8), or hexadecimal number (Base 16) notation. For example, 1010 is the binary representation of the decimal number ten. Bitwise operations in JavaScript are performed on the operands of the operators in their binary representations, but the output is always returned in the standard numerical value form.
A bitwise operator in JavaScript converts their operands to the 2’s complement form of their 32-bit signed integer form. Hence, whenever an operator is worked upon an integer, the deriving value is the 2’s complement form of that integer. The 2’s complement of an integer is the 1’s complement of the number (i.e. bitwise Not of the number) plus 1.
For Example, the following is the 32-bit representation of the number 7
00000000000000000000000000000111
The below is 1’ complement i.e. ~7
11111111111111111111111111111000
The below is 2’s complement form which is equal to -7
11111111111111111111111111111001
| Bitwise Operator | Usage | Meaning |
| Bitwise AND | x & y | Will return 1 in each bit position if both the corresponding bits are 1 otherwise 0. |
| Bitwise OR | x | y | Will return 1 in each bit position if any of the corresponding bits is 1 otherwise 0. |
| Bitwise XOR | x ^ y | Will return 0 in each bit position if both the corresponding bits are either 1 or 0 elsewise 1 whenever the bits are different. |
| Bitwise NOT | ~ x | Will flip the bits of the operand x from 1 to 0 and vice versa. |
| Left shift | x << y | Will shift the bits to their left on the binary number x by y bits while pushing 0 in place from the right. |
| Sign propagating right shift | x >> y | Will shift the bits to the right on the binary number x by y bits while copying the leftmost bits to the left to complete 32 bits. |
| Zero fill right shift | x >>> y | Will shift the bits to their right on the binary number x by y bits while pushing 0 in place from the left. |
Bitwise Logical Operators in JavaScript
Bitwise Logical operators consist of all the logical operators used in most of the languages but they are different in a way as bitwise logical operators operate bit by bit. The following are bitwise logical operators used in JavaScript:
1. Bitwise AND
This is a binary operator denoted by the symbol of ampersand “&” which performs an AND operation on the consecutive pair of corresponding bits of its arguments. The “&” operator would return 1 only if both the bits 1 are else it will return 0. Therefore we can also correlate AND operation with multiplication because both will give the same answer.
| X | Y | X & Y |
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |
Example
10 (base 10) = 00000000000000000000000000001010
13 (base 10) = 00000000000000000000000000001101
————————————————————————————
10 & 13 00000000000000000000000000001000 = 8 (base 10)
2. Bitwise OR
This is a binary operator denoted by the symbol of a vertical bar “|” which performs an OR operation on the consecutive pair of corresponding bits of its arguments. The “|” operator would return 1 if either of the bits is 1 or both are 1 else it will return 0. The Bitwise OR “|” is different from logical OR “||” as it works bit by bit.
| X | Y | X | Y |
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |
Example
10 (base 10) = 00000000000000000000000000001010
13 (base 10) = 00000000000000000000000000001101
————————————————————————————
10 | 13 00000000000000000000000000001111 = 15 (base 10)
3. Bitwise XOR
This is a binary operator denoted by the symbol of caret “^” which performs an XOR operation on the consecutive pair of corresponding bits of its arguments. The “^” operator would return 0 if both of the bits are the same (i.e. both are 1 or both are 0) else it will return 1.
| X | Y | X ^ Y |
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
Example
10 (base 10) = 00000000000000000000000000001010
13 (base 10) = 00000000000000000000000000001101
————————————————————————————
10 ^ 13 00000000000000000000000000000111 = 7 (base 10)
4. Bitwise NOT
This is a unary operator denoted by the symbol of tilde “~” which performs a NOT operation on the corresponding bits of its argument. The “~” operator would invert the bits of the operand i.e. convert 0 to 1 or 1 to 0.
| X | ~X |
| 0 | 1 |
| 1 | 0 |
Example
10 (base 10) = 00000000000000000000000000001010
————————————————————————————
~10 11111111111111111111111111110101
Bitwise Shift Operators in JavaScript
In bitwise shift operating also takes two arguments where the first argument is the binary number on which the shift operation will be done and the second argument specifies the number of bits by which the first argument has to be shifted. The Operator being used specifies the direction of the shift operation in the binary number.
1. Bitwise Left Shift
This is a binary operator denoted by the symbol “<<”. This operator will shift the rightmost bits of the first argument to their left by the value of the second argument times. The bits shifted from the right are replaced by 0 in the rightmost part for each shift operation performed.
Example: 8 << 3 yields 64
8 (base 10) = 00000000000000000000000000001000
————————————————————————————
8 << 3 00000000000000000000000001000000 = 64 (base 10)
2. Bitwise Right Shift
This is binary operator denoted by the symbol “>>>”. This operator will shift the rightmost bits of the first argument to their right by the value of the second argument times. The bits shifted from the left are replaced by 0 in the leftmost part for each shift operation performed.
Example: 8 >>> 3 yields 1
8 (base 10) = 00000000000000000000000000001000
————————————————————————————
8 >>> 3 00000000000000000000000000000001 = 1 (base 10)
-8 (base 10) = 11111111111111111111111111111000
————————————————————————————
-8 >>> 3 00011111111111111111111111111111 = 536870911 (base 10)
3. Bitwise Sign Propagating Right Shift
This is a binary operator denoted by the symbol “>>”. This operator will shift the rightmost bits of the first argument to their right by the value of the second argument times. The bits shifted from the left are replaced by leftmost bit (i.e. sign bit) in the leftmost part for each shift operation performed.
Example: 8 >>> 3 yields 1
8 (base 10) = 00000000000000000000000000001000
————————————————————————————
8 >> 3 00000000000000000000000000000001 = 1 (base 10)
-8 (base 10) = 11111111111111111111111111111000
————————————————————————————
-8 >> 3 11111111111111111111111111111111 = -1 (base 10)
Conclusion
The Arguments are converted into 32-bit binary numbers and expressed in the form of bits (i.e. 0’s and 1’s). Numbers in the arguments resulting with more than 32 bits get their msb’s (most significant bit) discarded. The same rule applies when during shift operation if the bit shift left then the extra bits at msb are discarded and during the right shift, the extra bit growing in the rightmost part is discarded.
Before: 110011010100011101001000100000001110010010001
————————————————————————————
After: 11101001000100000001110010010001
Each corresponding bit is paired with each other i.e. the first bit with the first bit of other arguments, the second bit with second bit and so on.
The operator is being applied at each bit (for the binary operator it should be a pair of bit), hence called bitwise operators in JavaScript.
Practical Application of bitwise operator is Bit flags, communication over socket/ports, compression, encryption, finite state machines, graphics, etc.
Recommended Articles
This is a guide to Bitwise Operators in JavaScript. Here we discuss the introduction, types of bitwise operators in JavaScript such as logical and shift operators along with its operations. You may also look at the following articles to learn more-
