Though bitwise operators in Javascript hardly get any attention, they are actually very powerful and have a wide variety of usage. They are considered for faster numerical calculations and conversions. We can leverage them to replace certain complex coding scenarios and make our code more readable.
By the end of this tutorial, you get a basic understanding of bitwise operators, what they are, and how to use them.
Before you begin this guide you’ll need the following:
As bitwise operators work at binary level, it’s essential to understand what JavaScript provides for binary conversion. Believe me, it is much simpler than it sounds.
We can convert any number to a string using the toString()
function as shown below:
var n = 2;
console.log(n.toString());
Output2
The toString
function has one argument (called radix) which can be used to specify the base. The base determines the target conversion. You can pass “2” to get binary, “8” to get octal, and “16” to get the hexadecimal value of the number being converted. By default it is 10 and thus returns the decimal value.
var num = 18;
var binaryText = num.toString(2);
console.log(binaryText);
Output10010
As we can see, the number 18 got converted into a binary string - 10010.
Tip: To do the reverse (getting number from binary string) we can use
parseInt("binary_string",2);
So, in our case, to convert “10010” to number 18, we can use the following code:
var num = 18;
var binaryText = num.toString(2);
console.log(binaryText);
console.log(parseInt(binaryText));
Output10010
18
This covers the very basics of how binary conversion works in JavaScript. We can work with bitwise operators without actually knowing the binary conversion. However, we may not be able to understand how the result of the bitwise operator gets calculated. Let’s see this in action.
For this tutorial, let’s consider basic numbers for bitwise operations. The numbers we are going to use will be 1, 2, and 3. Here is the list of binary numbers for each of them.
1 → 001
2 → 010
3 → 011
Note: The actual binary string will have 63 0s and 1 in the end to constitute 64 bit binary representation. However, for simplicity we are just taking the last 3 digits.
The bitwise AND operator can be used using a symbol “&” (note that we use double “&” for logical AND operations among non-binary variables)
Here is what “&” returns for bits:
0 & 0 = 0
1 & 0 = 0
1 & 1 = 1
This is very similar to our logical AND operation - If both the conditions are true then return true otherwise return false. In this case, the true is replaced by 1 and 0 equals to false.
JavaScript generates the resulting binary number by comparing each binary bit. The table below shows the bitwise AND between number 1 and 3.
Number | Binary equivalent | Binary Bits | ||
---|---|---|---|---|
1 | 001 | 0 | 0 | 1 |
& | & | & | & | & |
3 | 011 | 0 | 1 | 1 |
Result = 1 | 0 & 0 = 0 | 0 & 1 = 0 | 1 & 1 = 1 |
If we convert the resulting string 001 to decimal then we will get “1” as output. So, “1” & “3” results in “1”. Internally, JavaScript recognizes the bitwise operator and converts 1 and 3 into binary format and applies bitwise AND for each bit and converts the resulting binary string to decimal number. You can quickly try this in your browser console by hitting F12 and typing:
console.log(1&3);
The Bitwise OR uses single symbol “|”.
Here is what “|” returns for bits:
0 | 0 = 0
1 | 0 = 1
1 | 1 = 1
This is similar to logical OR operation - where if any one condition is true then return true otherwise return false. In this case, the true is replaced by 1 and 0 equals to false.
The table below shows the Bitwise OR between number 1 and 3.
Number | Binary equivalent | Binary Bits | ||
---|---|---|---|---|
1 | 001 | 0 | 0 | 1 |
| | | | | | | | | |
3 | 011 | 0 | 1 | 1 |
Result = 3 | 0 | 0 = 0 | 0 | 1 = 0 | 1 | 1 = 1 |
If we convert the resulting string 011 to decimal then we will get “3” as output. So, “1” | “3” results in “3”. Internally, JavaScript recognizes the bitwise operator and converts 1 and 3 into binary format and applies bitwise OR for each bit and converts the resulting binary string to decimal number.
The symbol for bitwise XOR is “^”.
Here is what “^” returns for bits:
0 ^ 0 = 0
1 ^ 0 = 1
1 ^ 1 = 0
The rule for XOR (exclusive OR) is that if both bits are different then return “1” else “0”. The XOR between 1 and 3 would return 2. Here is the explanation:
Number | Binary equivalent | Binary Bits | ||
---|---|---|---|---|
1 | 001 | 0 | 0 | 1 |
^ | ^ | ^ | ^ | ^ |
3 | 011 | 0 | 1 | 1 |
Result = 2 | 0 ^ 0 = 0 | 0 ^ 1 = 1 | 1 ^ 1 = 0 |
The left side number of the shift operator is the actual number and the right side of the operator is the position. For example, “5 << 2” tells Javascript to perform a shift left on number 5 for two positions. Here is how JavaScript actually performs the shift left operation.
js console.log(5<<2);
will result in number 20.Shift right operator will remove binary numbers from right. How many numbers will be removed? As you might have guessed, the number mentioned as the position.
Here is an example. Let’s say we have 5 >> 2.
Bitwise operators sound very complex at the first, however, once we understand the basics, it is very simple. We can convert any number to binary using the ".toString(2)” method. The conversion will help to understand the output of the bitwise operator. All the bitwise operators work at the bit level after converting operands to binary format.
Hope this brief introduction helped to understand the bitwise operator and how its results are being calculated.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!