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 (>>>).
Table of Contents
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
1 2 3 4 | 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.
1 2 3 | 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.
1 2 3 4 5 6 7 8 9 10 | 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,
- Write out the positive number in binary
- Invert the digits
- Add one to the result.
For Example to get the number 20, start with the binary representation of 20
1 2 3 4 | +20 as binary 0 0000000000000000000000000010100 |
Invert the digits
1 2 3 | 1 1111111111111111111111111101011 |
Add 1 to the result
1 2 3 4 5 6 7 | 1 1111111111111111111111111101011 1 + --------------------------------- 1 1111111111111111111111111101100 --------------------------------- |
The result is how -20 is stored as a binary number in two complement
1 2 3 | 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
1 2 3 4 | 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
| a | b | a & b |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 1 | 1 |
Example
1 2 3 4 5 6 7 | 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 |
1 2 3 4 5 6 7 8 9 | 9 & 7 = 1 00000000000000000000000000001001 =9 00000000000000000000000000000111 =7 -------------------------------- 00000000000000000000000000000001 =1 -------------------------------- |
1 2 3 4 5 6 7 8 9 10 | -9 & -7 = -15 11111111111111111111111111110111 = -9 11111111111111111111111111111001 = -7 -------------------------------- 11111111111111111111111111110001 = -15 -------------------------------- |
1 2 3 4 5 6 7 8 9 10 | -9 & 7 = 7 11111111111111111111111111110111 = -9 00000000000000000000000000000111 = 7 -------------------------------- 00000000000000000000000000000111 = 7 -------------------------------- |
1 2 3 4 5 6 7 8 9 | 6 & 7 = 6 00000000000000000000000000000110 = 6 00000000000000000000000000000111 = 7 -------------------------------------- 00000000000000000000000000000110 = 6 -------------------------------------- |
1 2 3 4 5 6 7 8 9 | 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
| a | b | a I b |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 1 |
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 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
| a | b | a^ b |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 0 |
Examples
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | ~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
1 2 3 4 5 6 7 8 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
1 2 3 4 5 6 7 8 9 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | //+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
1 2 3 4 5 6 7 8 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | //+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
1 2 3 4 5 6 7 8 9 10 11 | 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)
| Operator | Meaning |
|---|---|
| x &= y | x =x & y |
| x |=y | x =x | y |
| x ^=y | x =x ^ y |
| x <<=y | x =x << y |
| x >>=y | x =x >> y |
| x >>>=y | x =x >>> y |
Reference
Read More
- JavaScript Tutorial
- JavaScript Operators
- Arithmetic Operators
- Unary plus (+) & Unary minus (-)
- Increment & Decrement Operators
- Comparison or Relational Operators
- Strict Equality & Loose Equality Checker
- Ternary Conditional Operator
- Logical Operators
- Bitwise Operators
- Assignment Operators
- Nullish Coalescing Operator
- Comma Operator
- Operator Precedence
