What Are Bitwise Operators?
Bitwise operators work on the binary representation of numbers. While JavaScript numbers are stored as 64-bit floating-point values, bitwise operations treat them as 32-bit signed integers.
Example: Binary Representation
The decimal number 5 is represented in binary as 00000000 00000000 00000000 00000101.
Bitwise operators directly manipulate these bits to produce a result.
Types of Bitwise Operators
Here are the commonly used bitwise operators in JavaScript:
| Operator | Name | Description | Example | Binary Result |
|---|---|---|---|---|
| & | Bitwise AND | Returns 1 if both bits are 1. | 5 & 3 | 00000001 (1) |
| ` | ` | Bitwise OR | Returns 1 if at least one bit is 1. | `5 |
| ^ | Bitwise XOR | Returns 1 if only one bit is 1. | 5 ^ 3 | 00000110 (6) |
| ~ | Bitwise NOT | Inverts all bits (one’s complement). | ~5 | 11111010 (-6) |
| << | Left Shift | Shifts bits to the left, adding zeroes. | 5 << 1 | 00001010 (10) |
| >> | Right Shift | Shifts bits to the right, preserving the sign. | 5 >> 1 | 00000010 (2) |
| >>> | Zero-Fill Right Shift | Shifts bits to the right, filling with zero. | 5 >>> 1 | 00000010 (2) |
Bitwise Operator Explanations with Examples
1. Bitwise AND (&)
The & operator compares each bit of two numbers and returns 1 only if both bits are 1.
Example:
const a = 5; // Binary: 0101
const b = 3; // Binary: 0011
const result = a & b;
console.log(result); // Output: 1 (Binary: 0001)
2. Bitwise OR ( | )
The | operator compares each bit of two numbers and returns 1 if at least one bit is 1.
Example:
const a = 5; // Binary: 0101
const b = 3; // Binary: 0011
const result = a | b;
console.log(result); // Output: 7 (Binary: 0111)
3. Bitwise XOR (^)
The ^ operator returns 1 if only one of the corresponding bits is 1.
Example:
const a = 5; // Binary: 0101
const b = 3; // Binary: 0011
const result = a ^ b;
console.log(result); // Output: 6 (Binary: 0110)
4. Bitwise NOT (~)
The ~ operator inverts all the bits of the number, including the sign bit.
Example:
const a = 5; // Binary: 0101
const result = ~a;
console.log(result); // Output: -6 (Binary: 11111010)
5. Left Shift (<<)
The << operator shifts the bits to the left by a specified number of positions, adding zeroes to the right.
Example:
const a = 5; // Binary: 0101
const result = a << 1; // Shift left by 1 position
console.log(result); // Output: 10 (Binary: 1010)
6. Right Shift (>>)
The >> operator shifts the bits to the right, preserving the sign of the number.
Example:
const a = 5; // Binary: 0101
const result = a >> 1; // Shift right by 1 position
console.log(result); // Output: 2 (Binary: 0010)
7. Zero-Fill Right Shift (>>>)
The >>> operator shifts the bits to the right and fills the leftmost bits with zero, regardless of the sign.
Example:
const a = -5;
const result = a >>> 1;
console.log(result); // Output: 2147483645
Practical Applications of Bitwise Operators
- Checking Even or Odd Numbers:
Use the bitwise AND operator to check if a number is even or odd.
function isEven(num) {
return (num & 1) === 0;
}
console.log(isEven(4)); // Output: true
console.log(isEven(5)); // Output: false
- Swapping Two Numbers Without a Temporary Variable:
Use XOR for swapping values.
let x = 10, y = 20;
x = x ^ y;
y = x ^ y;
x = x ^ y;
console.log(x, y); // Output: 20, 10
- Efficient Multiplication or Division by Powers of Two:
Left shift multiplies by 2, and right shift divides by 2.
const num = 5;
console.log(num << 1); // Output: 10 (5 * 2)
console.log(num >> 1); // Output: 2 (5 / 2)
- Masking Specific Bits:
Use AND to isolate specific bits.
const num = 29; // Binary: 11101
const mask = 15; // Binary: 01111
const result = num & mask;
console.log(result); // Output: 13 (Binary: 01101)