Bitwise operators in JavaScript are used to perform operations directly on the binary representation of numbers. These operators work on the individual bits of a number and are useful for tasks such as bit manipulation, flags, permissions, low-level programming, and certain performance-oriented operations. JavaScript provides several bitwise operators, including AND (&), OR (|), XOR (^), NOT (~), left shift (<<), right shift (>>), and unsigned right shift (>>>).

Table of Contents

---

What Are Bitwise Operators in JavaScript?

Bitwise operators perform operations on the binary representation of numbers. Before performing a bitwise operation, JavaScript converts the numeric operands to 32-bit integers and operates on their individual bits.For example, the number 5 has the binary representation 0101, while 3 has the binary representation 0011. A bitwise AND operation compares these individual bits to produce a new result.

How Bitwise Operators Work

Bitwise operations work with individual binary digits called bits. Each bit can have a value of either 0 or 1.

For example:

5 = 0101
3 = 0011

When the bitwise AND operator is applied:

0101
0011
0001

The resulting binary value 0001 represents the decimal number 1.

Types of Bitwise Operators

JavaScript provides the following bitwise operators:

Operator	Name	Description
&	Bitwise AND	Performs AND operation on each corresponding bit.
`	`	Bitwise OR
^	Bitwise XOR	Returns 1 when corresponding bits are different.
~	Bitwise NOT	Reverses every bit of the operand.
<<	Left Shift	Shifts bits to the left.
>>	Sign-Propagating Right Shift	Shifts bits to the right while preserving the sign bit.
>>>	Zero-Fill Right Shift	Shifts bits to the right and fills the left side with zeros.

Bitwise AND (&)

The bitwise AND operator & compares corresponding bits of two numbers. A resulting bit is 1 only when both corresponding bits are 1.

Syntax:

value1 & value2

Example:

// JavaScript program to demonstrate the bitwise AND operator
let a = 5;
let b = 3;
console.log(a & b);

Output:

1

The binary representations are:

5 = 0101
3 = 0011
Result = 0001

Therefore, the decimal result is 1.

Bitwise AND Truth Table

Bit 1	Bit 2	Result
0	0	0
0	1	0
1	0	0
1	1	1

Bitwise OR (|)

The bitwise OR operator | compares corresponding bits. A resulting bit is 1 when at least one of the corresponding bits is 1.

Syntax:

value1 | value2

Example:

// JavaScript program to demonstrate the bitwise OR operator
let a = 5;
let b = 3;
console.log(a | b);

Output:

7

The binary operation is:

0101
0011
0111

The binary value 0111 represents the decimal number 7.

Bitwise OR Truth Table

Bit 1	Bit 2	Result
0	0	0
0	1	1
1	0	1
1	1	1

Bitwise XOR (^)

The bitwise XOR operator ^ compares corresponding bits. It returns 1 when the corresponding bits are different and returns 0 when they are the same.

Syntax:

value1 ^ value2

Example:

// JavaScript program to demonstrate the bitwise XOR operator
let a = 5;
let b = 3;
console.log(a ^ b);

Output:

6

The binary operation is:

0101
0011
0110

The binary value 0110 represents the decimal number 6.

Bitwise XOR Truth Table

Bit 1	Bit 2	Result
0	0	0
0	1	1
1	0	1
1	1	0

Bitwise NOT (~)

The bitwise NOT operator ~ reverses every bit of a number. It changes 0 to 1 and 1 to 0.

Syntax:

~value

Example:

// JavaScript program to demonstrate the bitwise NOT operator
let a = 5;
console.log(~a);

Output:

-6

The result may look unexpected because JavaScript uses signed 32-bit integers for bitwise operations. The bitwise NOT operation follows the relationship:

~n = -(n + 1)

Therefore:

~5 = -(5 + 1) = -6

Left Shift (<<)

The left-shift operator << moves the bits of a number to the left by the specified number of positions. Zeros are added on the right side.

Syntax:

value << positions

Example:

// JavaScript program to demonstrate the left shift operator
let a = 5;
console.log(a << 1);

Output:

10

The binary representation is:

5 = 0101
5 << 1 = 1010

The binary value 1010 represents the decimal number 10.

Right Shift (>>)

The right-shift operator >> moves the bits to the right by the specified number of positions. It preserves the sign of the number.

Syntax:

value >> positions

Example:

// JavaScript program to demonstrate the right shift operator
let a = 10;
console.log(a >> 1);

Output:

5

The binary value of 10 is shifted one position to the right, producing the value 5.

Unsigned Right Shift (>>>)

The unsigned right-shift operator >>> moves the bits to the right and fills the leftmost positions with zeros. Unlike >>, it does not preserve the sign bit.

Syntax:

value >>> positions

Example:

// JavaScript program to demonstrate the unsigned right shift operator
let a = 10;
console.log(a >>> 1);

Output:

5

For positive numbers, >> and >>> generally produce the same result. The difference becomes important when negative numbers are used.

Bitwise Operators with Binary Numbers

Bitwise operators can be understood more easily by looking at binary values.

Consider two numbers:

6 = 0110
3 = 0011

Using bitwise AND:

0110
0011
0010

The result is:

2

Using bitwise OR:

0110
0011
0111

The result is:

7

Using bitwise XOR:

0110
0011
0101

The result is:

5

Bitwise Operators in Conditional Statements

Bitwise operators can also be used in conditions when individual bits represent flags or permissions.

Example:

// JavaScript program to demonstrate bitwise operators in a condition
let permissions = 5;
let readPermission = 1;
if ((permissions & readPermission) !== 0) {
    console.log("Read permission is available");
} else {
    console.log("Read permission is not available");
}

Output:

Read permission is available

Here, the bitwise AND operator checks whether the bit representing read permission is set.

Complete Program Using Bitwise Operators

The following program demonstrates the major bitwise operators in JavaScript.

// JavaScript program to demonstrate different bitwise operators
let a = 5;
let b = 3;
console.log("Bitwise AND:", a & b);
console.log("Bitwise OR:", a | b);
console.log("Bitwise XOR:", a ^ b);
console.log("Bitwise NOT:", ~a);
console.log("Left Shift:", a << 1);
console.log("Right Shift:", a >> 1);
console.log("Unsigned Right Shift:", a >>> 1);

Output:

Bitwise AND: 1
Bitwise OR: 7
Bitwise XOR: 6
Bitwise NOT: -6
Left Shift: 10
Right Shift: 2
Unsigned Right Shift: 2

Advantages of Bitwise Operators

1. Bit Manipulation: Bitwise operators allow programs to directly manipulate individual bits of integer values.
2. Efficient Operations: Bitwise operations can perform certain integer calculations efficiently.
3. Permission Management: Bitwise operators can be used to store and check multiple permissions or flags within a single number.
4. Memory Usage: Multiple Boolean flags can sometimes be represented using individual bits of one integer.
5. Low-Level Programming: Bitwise operations are useful when working with binary data, protocols, encoding, and other low-level operations.

Common Beginner Mistakes

1. Confusing Logical and Bitwise Operators: The logical operators && and || are different from the bitwise operators & and |.
2. Forgetting Binary Representation: Bitwise operators work on the binary representation of numbers, so understanding binary values makes their behavior easier to understand.
3. Expecting ~5 to Return a Positive Value: The bitwise NOT operator uses signed 32-bit integer representation, so ~5 produces -6.
4. Confusing >> and >>>: The >> operator preserves the sign bit, while >>> fills the left side with zeros.
5. Using Bitwise Operators Without Understanding Integer Conversion: JavaScript converts values to 32-bit integers for bitwise operations, which can produce unexpected results when non-integer or very large values are used.

Conclusion

Bitwise operators in JavaScript perform operations on the individual bits of numbers. The & operator performs bitwise AND, | performs bitwise OR, ^ performs XOR, and ~ reverses the bits. The <<, >>, and >>> operators are used to shift bits left or right. Understanding binary representation and 32-bit integer behavior is important when working with bitwise operations. These operators are particularly useful for flags, permissions, binary data, and low-level programming tasks.

FAQs

1. What are bitwise operators in JavaScript?

Bitwise operators are operators that perform operations on the individual bits of numbers. JavaScript provides operators such as &, |, ^, ~, <<, >>, and >>>.

2. What is the difference between & and && in JavaScript?

The & operator performs a bitwise AND operation on the bits of numbers, while && is a logical AND operator used to evaluate conditions.

3. What is the difference between | and || in JavaScript?

The | operator performs a bitwise OR operation, while || is a logical OR operator used to combine conditions.

4. What does the ^ operator do in JavaScript?

The ^ operator performs a bitwise XOR operation and returns 1 for a bit position when the corresponding bits are different.

5. Why does ~5 return -6 in JavaScript?

JavaScript performs bitwise operations using signed 32-bit integers. The bitwise NOT operation follows the rule ~n = -(n + 1), so ~5 produces -6.