🧮 JavaScript Bitwise Operations: Basics, Examples, and Fun Tips

Hello dear code heroes! 👋
Today, we’re going to meet JavaScript’s a bit mysterious but super powerful weapon: bitwise operators.
Get ready: we’ll learn, get our brains slightly scrambled, and encounter some funny moments 😏

Learning bitwise operators is like peeking into a computer’s brain. We’re diving into the world of 0s and 1s! 🌐

🔹 1️⃣ What Are Bitwise Operators and Why Use Them?

Bitwise operators allow us to manipulate numbers at the binary level.
Since computers see numbers as 0s and 1s, these operators are perfect for performance-critical tasks and flags/masks.

Main bitwise operators and their meanings:

💡 Tip: Bitwise operators are mostly used for permissions, settings, masks, and performance-sensitive operations.

🔹 2️⃣ Bitwise AND (&): 1 Only if Both Are 1

Bitwise AND gives 1 only if both bits are 1, otherwise 0.
Like: “Both of us say yes → yes” logic 😏

Example 1:

let a = 5; // 0101
let b = 3; // 0011
console.log(a & b); // 0101 & 0011 = 0001 → 1

Explanation:

• Compare each bit of 0101 and 0011
• Only the rightmost bit is 1 in both → result 1
• Others are 0

💡 Practical Tip: AND is perfect for masking. If you want to check specific bits of a number, use AND.

Example 2: Flag Check

const READ = 1 << 0; // 0001
const WRITE = 1 << 1; // 0010
let permissions = READ | WRITE; // 0011

console.log((permissions & WRITE) !== 0); // true

Easy way to store and check read/write permissions in a single number 😎

🔹 3️⃣ Bitwise OR (|): One 1 Is Enough

OR gives 1 if at least one bit is 1.
Logic: “If I say yes or you say yes → yes” 😏

Example:

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a | b); // 0101 | 0011 = 0111 → 7

Explanation:

• Compare each bit, write 1 if at least one is 1
• Result: 0111 → 7

💡 Tip: OR is great for turning on bits / activating flags.

🔹 4️⃣ Bitwise XOR (^): 1 if Different

XOR gives 1 if bits are different, 0 if the same.
Perfect for toggling. 🎛️

Example:

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a ^ b); // 0101 ^ 0011 = 0110 → 6

Explanation:

• Compare 0101 and 0011
• Bits that differ → 1, same bits → 0 → 0110 → 6

💡 Tip: XOR is handy for bit toggling or simple encryption. Like flipping a light switch 💡💡

🔹 5️⃣ Bitwise NOT (~): Flip

NOT flips all bits: 0 → 1, 1 → 0.
Be careful: In JavaScript, it turns numbers negative 😅

Example:

let a = 5; // 0101
console.log(~a); // 1010 → -6 (2’s complement)

Explanation:

• 5 in binary: 0101
• Flip → 1010
• 2’s complement → -6

💡 Tip: Watch out with NOT, negative numbers can be confusing!

🔹 6️⃣ Shift Operators: Shift and Multiply/Divide

Shift operators move bits left or right:

• Left Shift (<<): shift left, new bits are 0 → like fast multiply
• Right Shift (>>): shift right, preserves sign bit → like fast divide
• Zero-fill Right Shift (>>>): shift right, fill 0 → ensures positive

Left Shift Example:

console.log(5 << 1); // 0101 → 1010 → 10

Right Shift Example:

console.log(-10 >> 1); // -5

Zero-fill Right Shift Example:

console.log(-10 >>> 1); // 2147483643

💡 Tip: Shift operators are great for performance and bit manipulation.

🔹 7️⃣ Practical Example: Permissions and Flags

Suppose you have 3 different permissions:

const READ  = 1 << 0; // 0001
const WRITE = 1 << 1; // 0010
const EXEC  = 1 << 2; // 0100

let permissions = READ | EXEC; // 0101

console.log((permissions & WRITE) !== 0); // false
console.log((permissions & READ) !== 0);  // true

💡 Tip: Bitwise operators are super useful for permissions and settings.

🔹 8️⃣ Funny Mistakes and Moments

• Toggle with XOR and a bit is wrong → “Hmm, why didn’t it change?” 😂
• NOT gives negative numbers → “Negative or positive?” 😅
• Shift large numbers → “Whoa, number jumped to 2 billion!” 😲

🔹 9️⃣ Summary and Tips

1. Bitwise operators manipulate numbers at the binary level.
2. Main operators: &, |, ^, ~, <<, >>, >>>.
3. Practical uses: masks, flags, permissions, performance tasks.
4. Shifts allow quick multiply/divide-like operations.
5. Funny mistakes and confusion are normal 😎

💡 Mini Tip: Test them in small examples, see the bits in action, and your brain will “click”!