Bitwise operators or Binary operators in Javascript

In this article, we will learn everything about JavaScript Bitwise Operators or Binary Operators, which will summarize the essential concepts and utilize them off with examples.

Bitwise operators are always used on integer numbers, and the operators are applied bit by bit.

First, let us understand the different numbering system and its characteristics in computer science.

Binary

• It uses two digits 0 and 1.
• They are known as the base 2 number system.

Octal

• It uses digits 0 to 7.
• They are known as the base 8 number system.

Decimal

• This is the number system we use in our day-to-day life.
• They are known as the base 10 number system.

Hexa Decimal

• It uses ten digits and six letters. 0 to 10 and A-F.
• They are known as the base 16 number system.

Bitwise Operators or Binary Operators

We have several binary operators.

1. Bitwise NOT operator(~)

The NOT operator will reverse the input. If the input is True, then the output will be false.

0 -> 1
1 -> 0

console.log(~16);

Output:

-17

Why is the output -17?

JavaScript binary operators convert their operands to 32-bit signed integers in two’s complement format. The two’s complement of an integer B is given by -(B + 1).

~16 => -(16 + 1) => -17

The leftmost bit in the given binary is called the sign bit. The sign bit is always 0 for positive integers, and 1 for negative integers.

2. Bitwise AND operator(&)

In AND operator if any side of the input has 0 then it will result in 0. Or if both the inputs are true then the result will be true.

0 & 0 -> 0
0 & 1 -> 0
1 & 0 -> 0
1 & 1 -> 1

console.log(0 & 0)
console.log(0 & 1)
console.log(1 & 0)
console.log(1 & 1)

Output:

0
0
0
1

3. Bitwise OR operator(|)

In OR operator if any side of the input has 1 then it will result in 1. Or if any of the input is true then the result will be true.

0 | 0 -> 0
0 | 1 -> 1
1 | 0 -> 1
1 | 1 -> 1

console.log(0 | 0)
console.log(0 | 1)
console.log(1 | 0)
console.log(1 | 1)

Output:

0
1
1
1

4. Bitwise XOR operator(^)

In XOR operator if both the input are different, then it will result to 1 else 0. You can understand from the demonstration below.

0 ^ 0 -> 0
0 ^ 1 -> 1
1 ^ 0 -> 1
1 ^ 1 -> 0

console.log(0 ^ 0)
console.log(0 ^ 1)
console.log(1 ^ 0)
console.log(1 ^ 1)

Output:

0
1
1
0

5. Bitwise Shift Left operator(<<)

The left shift (<<) operator takes two operands, the first operand is an integer, while the second operand is the number of bits of the first operand to be shifted to the left.

console.log(16 << 2);

Output:

64

To understand this, let us first convert 16 to binary.

console.log((16).toString(2)); // 10000

//Since we are passing 2 in the second operand we are saying to shift the binary by two bits.

//1000000

// Now convert the shifted binary to number
console.log((0b1000000).toString(2)); // 64

6. Bitwise Shift Right operator(>>)

The tight shift (>>) operator takes two operands, the first operand is an integer, while the second operand is the number of bits of the first operand to be shifted to the right.

console.log(16 >> 2);

Output:

4

To understand this, let us first convert 16 to binary.

console.log((16).toString(2)); // 10000

//Since we are passing 2 in the second operand we are saying to shift the binary by two bits.

//100

// Now convert the shifted binary to number
console.log((0b100).toString(2)); // 4

Conclusion

I’m delighted that you made it to the end of this article. I firmly believe that you learned a thing or two while reading the article.

I hope that the insights you’ve gotten while reading this article will find expression in your day-to-day coding from now on.

Happy coding.

You may also like my other articles:

1. Console.log and other console methods to debug your code in JavaScript
2. Things to keep in mind before starting Javascript framework
3. var, let, and const – Why to avoid var 😷 and how to put the other two to good use? - Javascript

If you liked the article, feel free to share it to help others find it!

You may also follow me on LinkedIn and Twitter.

💌 If you’d like to receive more tutorials in your inbox, you can sign up for the newsletter here.