JS Bitwise

JavaScript Bitwise Operators: Working with 32-Bit Binary Flags

JavaScript bitwise operators treat numbers as 32-bit signed integers and manipulate their individual binary bits (0 and 1). Although rarely needed in everyday UI code, bitwise flags power compact permission systems, color channel math, and binary protocols.

Bitwise Operators Reference

Every bitwise operator converts its numeric operands into 32-bit signed integers using two's complement binary format before applying the bit operation:

Bitwise masks save space when storing dozens of boolean options inside a single database integer column, and they appear frequently in graphics code, hashing helpers, and binary file parsers. Unlike standard arithmetic operators, bitwise operations discard any fractional digits before shifting or masking bits.

Practical Permission Bitmask Example

Developers use powers of two (1, 2, 4, 8) with | to combine flags and & to test whether a specific permission bit is set.

const READ = 1 << 0;    // 001 (1)
const WRITE = 1 << 1;   // 010 (2)
const DELETE = 1 << 2;  // 100 (4)

// Combine permissions with bitwise OR
let userPerms = READ | WRITE;

const canWrite = (userPerms & WRITE) !== 0;
const canDelete = (userPerms & DELETE) !== 0;

// Toggle WRITE permission with XOR
userPerms ^= WRITE;

console.log({ canWrite, canDelete, updatedMask: userPerms });

Common Mistakes to Avoid

• Typing & instead of && in conditions: && is logical AND with short-circuiting, whereas & evaluates both sides and performs 32-bit binary math.
• Using bitwise operators on numbers over 32 bits: JavaScript truncates numbers to 32-bit signed integers before running &, |, or <<, silently destroying values larger than 2,147,483,647 (unless using BigInt).
• Using | 0 or ~~x instead of Math.trunc(): Bitwise truncation hacks fail on numbers larger than 2^31 - 1; write Math.trunc() for clarity.

Frequently Asked Questions

What is the difference between >> and >>>?

>> is a sign-preserving right shift that keeps negative numbers negative by copying the sign bit. >>> fills leftmost bits with 0, turning any 32-bit integer into an unsigned positive number.

Can I use bitwise operators with BigInt?

Yes, BigInt supports &, |, ^, ~, <<, and >> without the 32-bit truncation limit, except >>> is unsupported on BigInt.

How do I extract the green channel from a 24-bit hex color?

Shift right by 8 bits and mask with 0xff: const green = (0x34a853 >> 8) & 0xff; returns 168.