🧠 JavaScript Bitwise Operators: A Complete Guide with Examples & Best Practices

In JavaScript, bitwise operators are used to perform operations on binary representations of numbers. These operators treat their operands as 32-bit signed integers and manipulate their individual bits. While bitwise operators are powerful tools for low-level programming and can significantly optimize certain tasks, they are often underutilized in web development.

In this guide, you’ll learn:

• What bitwise operators are and why they are important
• How each bitwise operator works, with real-world examples
• Best practices and tips for using bitwise operators in JavaScript

Let’s dive in and explore how these operators can make your code more efficient and powerful!

📌 What Are Bitwise Operators in JavaScript?

Bitwise operators perform bit-level operations on binary numbers. JavaScript converts numbers to their binary representation (base 2), processes the operation on the individual bits, and then returns the result as a number. This is different from arithmetic or logical operators, which work on whole numbers or booleans.

💡 Key Facts:

• JavaScript automatically converts numbers to 32-bit signed integers.
• Bitwise operations are performed on the binary representation of numbers.
• The results are also in binary form but are converted back to a decimal.

📘 List of Bitwise Operators in JavaScript

Here are the key bitwise operators in JavaScript:

1. AND (&)
2. OR (|)
3. XOR (^)
4. NOT (~)
5. Left Shift (<<)
6. Right Shift (>>)
7. Zero Fill Right Shift (>>>)

🧩 Types of Bitwise Operators in JavaScript

JavaScript supports several bitwise operators, each serving a specific purpose. Let’s explore them in detail.

✅ 1. Bitwise AND (&)

The bitwise AND operator compares each corresponding bit of two numbers and returns 1 if both bits are 1, otherwise, it returns 0.

📘 Syntax:

result = a & b;

📌 Example:

let a = 5;   // 0101 in binary
let b = 3;   // 0011 in binary
let result = a & b;  // 0001 in binary (which is 1 in decimal)

console.log(result); // Output: 1

🧩 Explanation:

• 5 in binary is 0101
• 3 in binary is 0011
• Performing 0101 & 0011 results in 0001, which equals 1 in decimal.

✅ 2. Bitwise OR (|)

The bitwise OR operator compares each corresponding bit of two numbers and returns 1 if at least one bit is 1, otherwise, it returns 0.

📘 Syntax:

result = a | b;

📌 Example:

let a = 5;   // 0101 in binary
let b = 3;   // 0011 in binary
let result = a | b;  // 0111 in binary (which is 7 in decimal)

console.log(result); // Output: 7

🧩 Explanation:

• 5 in binary is 0101
• 3 in binary is 0011
• Performing 0101 | 0011 results in 0111, which equals 7 in decimal.

✅ 3. Bitwise XOR (^)

The bitwise XOR (exclusive OR) operator compares each corresponding bit of two numbers and returns 1 if the bits are different, otherwise, it returns 0.

📘 Syntax:

result = a ^ b;

📌 Example:

let a = 5;   // 0101 in binary
let b = 3;   // 0011 in binary
let result = a ^ b;  // 0110 in binary (which is 6 in decimal)

console.log(result); // Output: 6

🧩 Explanation:

• 5 in binary is 0101
• 3 in binary is 0011
• Performing 0101 ^ 0011 results in 0110, which equals 6 in decimal.

✅ 4. Bitwise NOT (~)

The bitwise NOT operator inverts all the bits of a number (i.e., changes all 1 bits to 0 and all 0 bits to 1). It’s also known as the “one’s complement” operator.

📘 Syntax:

result = ~a;

📌 Example:

let a = 5;  // 0101 in binary
let result = ~a;  // 1010 in binary (which is -6 in decimal)

console.log(result); // Output: -6

🧩 Explanation:

• 5 in binary is 0101
• Performing ~0101 results in 1010, which equals -6 in decimal.

✅ 5. Bitwise Left Shift (<<)

The bitwise left shift operator shifts the bits of a number to the left by the specified number of positions. Each left shift operation effectively multiplies the number by 2.

📘 Syntax:

result = a << b;

📌 Example:

let a = 5;  // 0101 in binary
let b = 1;  // shift by 1 position
let result = a << b;  // 1010 in binary (which is 10 in decimal)

console.log(result); // Output: 10

🧩 Explanation:

• 5 in binary is 0101
• Shifting 0101 to the left by 1 results in 1010, which equals 10 in decimal.

✅ 6. Bitwise Right Shift (>>)

The bitwise right shift operator shifts the bits of a number to the right by the specified number of positions. Each right shift operation effectively divides the number by 2.

📘 Syntax:

result = a >> b;

📌 Example:

let a = 5;  // 0101 in binary
let b = 1;  // shift by 1 position
let result = a >> b;  // 0010 in binary (which is 2 in decimal)

console.log(result); // Output: 2

🧩 Explanation:

• 5 in binary is 0101
• Shifting 0101 to the right by 1 results in 0010, which equals 2 in decimal.

✅ 7. Bitwise Unsigned Right Shift (>>>)

The bitwise unsigned right shift operator shifts the bits of a number to the right, just like the regular right shift. However, it doesn’t preserve the sign of the number, making it useful for manipulating unsigned binary values.

📘 Syntax:

result = a >>> b;

📌 Example:

let a = -5;  // 11111111111111111111111111111011 in binary (32-bit signed)
let b = 1;   // shift by 1 position
let result = a >>> b;  // 01111111111111111111111111111101 in binary (which is a large positive number)

console.log(result); // Output: 2147483643

🧩 Explanation:

• -5 in 32-bit binary is 11111111111111111111111111111011
• Shifting this to the right by 1 results in 01111111111111111111111111111101, which equals 2147483643 in decimal.

📘 Best Practices for Bitwise Operators

• Use bitwise operators for performance optimization in algorithms involving low-level data manipulation, such as encryption, compression, and game development.
• Avoid overuse in higher-level applications where simple arithmetic or logical operators can accomplish the task more efficiently.
• Ensure clarity by commenting your code when using bitwise operators to make it clear why you’re performing the operation.

🧠 Conclusion

JavaScript bitwise operators allow developers to perform low-level binary operations that are crucial for specific applications such as cryptography, bit manipulation, and performance optimization. While they are not commonly used in typical JavaScript development, understanding and leveraging them can significantly enhance your programming toolkit.

❓ Frequently Asked Questions (FAQs)

❓ What is the difference between >> and >>> in JavaScript?

• The >> (right shift) operator preserves the sign of the number, shifting the bits while keeping the sign bit intact.
• The >>> (unsigned right shift) operator does not preserve the sign and treats the number as an unsigned value, effectively removing the sign bit.

❓ When should I use bitwise operators in JavaScript?

• Bitwise operators are most useful in performance-critical operations, such as manipulating flags, performing bit masking, or when working with binary data like images or video streams.

Share Now :