JS Bitwise

JavaScript Bitwise: Operators, Binary Representation, & Bit Flags

Bitwise operators treat their operands as 32-bit binary integers (zeros and ones) rather than standard floating-point numbers, performing operations directly at the bit level.

Bitwise Operators Reference

flowchart LR
    BitOps["Bitwise Operators (32-Bit Integers)"] --> AND["Bitwise AND (&)"]
    BitOps --> OR["Bitwise OR (|)"]
    BitOps --> XOR["Bitwise XOR (^)"]
    BitOps --> NOT["Bitwise NOT (~)"]
    BitOps --> Shifts["Shifts: Left (<<), Sign-Right (>>), Zero-Fill-Right (>>>)"]

Bitwise Operators Summary Table

Practical Code Example

// Demonstrating Bitwise operations for permission bit-flags

// Defining permission bit-flags (Powers of 2)
const READ_PERMISSION    = 1 << 0; // 0001 (1)
const WRITE_PERMISSION   = 1 << 1; // 0010 (2)
const EXECUTE_PERMISSION = 1 << 2; // 0100 (4)
const DELETE_PERMISSION  = 1 << 3; // 1000 (8)

// 1. Combining permissions using Bitwise OR (|)
let userPermissions = READ_PERMISSION | WRITE_PERMISSION; // 0011 (3)
console.log(`User Permission Bitmask: ${userPermissions}`);

// 2. Checking permission using Bitwise AND (&)
const canWrite = (userPermissions & WRITE_PERMISSION) !== 0;
const canDelete = (userPermissions & DELETE_PERMISSION) !== 0;

console.log(`Can Write? ${canWrite}`);   // true
console.log(`Can Delete? ${canDelete}`); // false

// 3. Fast Truncation with Bitwise OR 0
const floatValue = 42.95;
const truncatedInt = floatValue | 0; // Truncates float to 32-bit int
console.log(`Truncated Float (floatValue | 0): ${truncatedInt}`); // 42

Best Practices & Gotchas

• Operands Are Converted to 32-Bit Integers: Bitwise operators convert 64-bit floats into signed 32-bit integers before operating, discarding decimals.
• Use Bit Flags for High-Performance State Systems: Bitmasking is widely used in graphics engines, permission systems, and binary protocols to store multiple boolean flags in a single integer.
• Readability Warning: Avoid using bitwise tricks like ~arr.indexOf(item) in general application code; explicit methods like includes() are far more readable.

Self-Check Challenge

Toggle a permission flag using Bitwise XOR (userPermissions ^= WRITE_PERMISSION). What does this accomplish?