JavaScript - Bitwise Operators

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 << 1	00000000000000000000000000001010 (= 10)
5 << 2	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.