”;
JavaScript Bitwise Operators
The bitwise operators in JavaScript perform operations on the integer values at the binary level. They are used to manipulate each bit of the integer values. Bitwise operators are similar to logical operators but they work on individual bits.
JavaScript bitwise operators works on 32-bits operands. In JavaScript, numbers are stored as 64-bit floating point number. JavaScript converts the numbers to 32-bit signed integer before performing the operation. After bitwise operation, it converts the result to 64-bits number.
There are seven bitwise operators in JavaScript. Following is the list of bitwise operators with description.
| Operator | Name | Description |
|---|---|---|
| & | Bitwise AND | Returns 1 if both bits are 1, otherwise 0. |
| | | Bitwise OR | Returns 1 if either bit is 1, otherwise 0. |
| ^ | Bitwise XOR | Returns 1 if both bits are different, otherwise 0. |
| ! | Bitwise NOT | Returns 1 if bit is 0, otherwise 0. |
| << | Left Shift | Shifts the bits left by pushing zeros in from right and discarding leftmost bits. |
| >> | Right Shift | Shifts the bits right by pushing copies of leftmost bit in from left and discarding rightmost bits. |
| >>> | Right Shift with Zero | Shifts the bits right by pushing zeros in from left and discarding rightmost bits. |
JavaScript Bitwise AND (&) Operator
The bitwise AND (&) operator performs AND operation on each pair of bits of its integer operands. After the operation, it returns a new integer value with the updated bits.
When bitwise AND operator is applied on a pair of bits, it returns 1 if both bits are 1, otherwise returns 0.
Following is the truth table for bitwise AND operation −
| A | B | A & B |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |
Let”s understand bitwise AND operation taking an example of 4-bit operands.
| A | B | A & B |
|---|---|---|
| 1111 | 0001 | 0001 |
| 1111 | 0010 | 0010 |
| 1111 | 0100 | 0100 |
| 1111 | 1000 | 1000 |
Example
Let”s perform bitwise AND (&) operation on 5 and 7. These numbers are represented as 32-bits integer.
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 7 | 00000000000000000000000000000111 |
| 5 & 7 | 00000000000000000000000000000101 (= 5) |
The resultant value of the OR operation of each bit of the 101 and 111 binary numbers is the same as below.
- 1 & 1 = 1
- 1 & 0 = 0
- 1 & 1 = 1
So, the resultant binary number is 111, which is equal to 7 in the decimal representation.
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML = "a & b = " + (a & b);
</script>
</body>
</html>
It will produce the following result −
a & b = 5
JavaScript Bitwise OR (|) Operator
The bitwise OR (|) operator performs OR operation on each pair of bits of its integer operands. After the operation, it returns an integer value with the updated bits.
When bitwise OR operator is applied on a pair of bits, it returns 1 if either of bits is 1, otherwise returns 0.
Following is the truth table for bitwise OR operation.
| A | B | A | B |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |
Let”s understand bitwise OR operation taking an example of 4-bit operands.
| A | B | A | B |
|---|---|---|
| 1111 | 0001 | 1111 |
| 1111 | 0010 | 1111 |
| 1111 | 0100 | 1111 |
| 1111 | 1000 | 1111 |
Example
Let”s perform bitwise OR (|) operation on 5 and 7. These numbers are represented as 32-bits integer.
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 7 | 00000000000000000000000000000111 |
| 5 | 7 | 00000000000000000000000000000111 (= 7) |
The resultant value of the OR operation of each bit of the 101 and 111 binary numbers is the same as below.
- 1 | 1 = 1
- 1 | 0 = 1
- 1 | 1 = 1
So, the resultant binary number is 111, which is equal to 7 in the decimal representation.
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML = "a | b = " + (a | b);
</script>
</body>
</html>
It will produce the following result −
a | b = 7
JavaScript Bitwise XOR (^) Operator
The bitwise XOR (^) operator performs exclusive OR operation on each pair of bits of its integer operands. After the operation, it returns an integer value with the updated bits.
When bitwise XOR operator is applied on a pair of bits, it returns 1 if both bits are different, otherwise returns 0.
Following is the truth table for Bitwise XOR operation −
| A | B | A ^ B |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
Example
Let”s perform bitwise XOR (^) operation on 5 and 7.
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 7 | 00000000000000000000000000000111 |
| 5 ^ 7 | 00000000000000000000000000000010 (= 2) |
After performing the bitwise XOR operation of 101 and 111, the resultant binary number is given below.
- 1 ^ 1 = 0
- 1 ^ 0 = 1
- 1 ^ 1 = 0
So, the resultant binary number is 010, which is equal to 2.
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML = "a ^ b = " + (a ^ b);
</script>
</body>
</html>
It will produce the following output −
a ^ b = 2
JavaScript Bitwise NOT (~) Operator
The bitwise NOT (~) operator performs the NOT operation on each bit of the binary number. It is a unary operator that inverts each bit of the binary number and returns the 2’s complement to the binary number.
Following is the truth table for the Bitwise XOR operation.
| Input (A) | Output (~A) |
|---|---|
| 0 | 1 |
| 1 | 0 |
Example
Let”s perform bitwise NOT (~) operation.
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 7 | 00000000000000000000000000000111 |
| ~5 | 11111111111111111111111111111010 (= -6) |
| ~7 | 11111111111111111111111111111000 (= -8) |
Try to execute the below code −
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML =
"~a = " + (~a) + "<br>" +
"~b = " + (~b)
</script>
</body>
</html>
It will produce the following output −
~a = -6 ~b = -8
Bitwise Left Shift (<<) Operator
The JavaScript bitwise left shift (<<) operator moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros from the right and left most bits are discarded.
Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.
Example
When you left shift 5 (101) by 1, a value becomes 10 (1010). When you perform the left shift operation by 2 places, the resultant value is 20 (10100).
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 5 | 00000000000000000000000000001010 (= 10) |
| 5 | 00000000000000000000000000010100 (= 20) |
The following JavaScript program demonstrates the bitwise left shift operation −
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
document.getElementById("output").innerHTML =
"a << 1 = " + (a << 1) + "<br>" +
"a << 2 = " + (a << 2);
</script>
</body>
</html>
It will produce the following output −
a << 1 = 10 a << 2 = 20
Bitwise Right Shift (>>) Operator
The bitwise right shift (>>) operator moves all the bits in its first operand to the right by the number of places specified in the second operand. It inserts copies of leftmost bit in from left and discard rightmost bits. In this way it preserves the sign of the number.
In short, it removes the N last bits from the number. Here, N is a second operand. Right-shifting the binary number is equivalent to dividing the decimal number by 2.
Example
In the below example, when we perform the right shift operation on 101 for the first time, the value of a becomes equal to 010. After performing the right-shift operation for the second time, the resultant value is 001, equal to 1 in the decimal representation.
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 5 >> 1 | 00000000000000000000000000000010 (= 2) |
| ~5 | 11111111111111111111111111111010 (= -6) |
| ~5 >>1 | 11111111111111111111111111111101 (= -3) |
Try to execute the following program −
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
document.getElementById("output").innerHTML =
"a >> 1 = " + (a >> 1) + "<br>" +
"~a >> 1 = " + (~a >> 1);
</script>
</body>
</html>
It will produce the following output −
a >> 1 = 2 ~a >> 1 = -3
Bitwise Right Shift with Zero (>>>) Operator
The Right Shift with Zero (>>>) operator is very similar to the right shift operator. It always fills the left bits with zero without worrying about the sign of the bit.
Example
Here, the binary representation of 10 is 1010. When we perform the right shift with zero operation, it moves all bits 2 times in the right direction and inserts two 0 at the start. So, the resultant value will be 0010, equal to 1.
| Decimal Number | Binary Equivalent (32-bits) |
|---|---|
| 5 | 00000000000000000000000000000101 |
| 5 >>> 1 | 00000000000000000000000000000010 (= 2) |
The following JavaScript program demonstrate the use of >>> operator.
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
document.getElementById("output").innerHTML = "a >>> 1 = " + (a >>> 1);
</script>
</body>
</html>
It will produce the following result −
a >>> 1 = 2
You may try to use the different inputs with each operator and observe the output for more practices.
”;