When I started learning JavaScript, bitwise operators were the topic every tutorial quietly skipped. "You'll almost never use these," they said. So I avoided them for years.
But recently, I decided to jump into Vue's source code to understand the framework better. The first thing I saw in the reactivity system was a bunch of flags and bitwise operations — and I had no idea what I was looking at. Not anymore — let's fix that together.
Why do bitwise operators exist?
Before jumping into operators, we need to understand why anyone uses them.
The idea is simple: instead of storing 8 separate boolean variables, you pack them all into one integer. Each bit represents one flag. It's compact, and checking or updating a state becomes a single operation — which is exactly why you'll find this pattern in frameworks and compilers where the same checks run thousands of times per second.
A classic real-world example I've already used without knowing it: Unix file permissions.
When you see 764 on a file:
-
7=111in binary → owner has read + write + execute -
6=110in binary → group has read + write (no execute) -
4=100in binary → everyone else has read only
Each bit is a flag. That's it. Now let's learn how to read and manipulate those flags.
One important JavaScript detail before we start
JavaScript stores numbers as 64-bit floating point numbers, but all bitwise operations are performed on 32-bit binary numbers. Before a bitwise operation is performed, JavaScript converts numbers to 32-bit signed integers. After the bitwise operation is performed, the result is converted back to 64-bit JavaScript numbers. — W3Schools
This is why these operators behave similarly to low-level languages even though JavaScript doesn't expose raw memory directly. It also means when defining flags with <<, you have 32 bit positions — but the top bit (bit 31) is the sign bit, so if you set it the number will read as negative. For any flag system you'll build in practice, staying within the lower 31 bits is the safe default.
The operators, one by one
1. & — AND
Compares two numbers bit by bit and returns 1 only where both bits are 1.
Here we compare 11 (1011) and 12 (1100):
1 0 1 1 (11)
& 1 1 0 0 (12)
-----------
1 0 0 0 (8)
Use case example: you have a userFlags variable that stores all of a user's active permission flags combined into one integer, and READ_PERMISSION is the constant for the read bit. AND-ing them isolates that specific bit — if the result is non-zero, the user has read access.
// userFlags = some integer holding multiple permissions combined with |
// READ_PERMISSION = 4 (100 in binary) — the read bit
const canRead = userFlags & READ_PERMISSION // non-zero = has read access, 0 = doesn't
2. | — OR
Compares two numbers bit by bit and returns 1 wherever at least one of the bits is 1.
Here we combine 11 (1011) and 12 (1100):
1 0 1 1 (11)
| 1 1 0 0 (12)
-----------
1 1 1 1 (15)
Use case example: userFlags starts as an integer with some permissions already set. OR-ing it with WRITE_PERMISSION switches on the write bit without touching any of the others.
// userFlags = current permissions (e.g. READ only = 4)
// WRITE_PERMISSION = 2 (010 in binary) — the write bit
userFlags = userFlags | WRITE_PERMISSION // now has READ + WRITE
// shorthand:
userFlags |= WRITE_PERMISSION
3. ^ — XOR (Exclusive OR)
Returns 1 only where the two bits are different. Same bits → 0, different bits → 1.
Here we XOR 11 (1011) and 12 (1100):
1 0 1 1 (11)
^ 1 1 0 0 (12)
-----------
0 1 1 1 (7)
Use case example: XOR is the natural toggle. If the execute bit is 0 it flips to 1, if it's 1 it flips to 0 — one operation, no if needed.
// userFlags = current permissions
// EXECUTE_PERMISSION = 1 (001 in binary) — the execute bit
userFlags ^= EXECUTE_PERMISSION // was off → now on, was on → now off
4. ~ — NOT (Bitwise complement)
Flips every single bit in the number. Every 0 becomes 1, every 1 becomes 0. Because JavaScript converts to signed 32-bit integers before operating, ~n always gives you -(n + 1).
~ 0 0 0 0 1 1 0 0 (12)
-----------
1 1 1 1 0 0 1 1 (-13)
Use case example: ~WRITE_PERMISSION flips all bits, turning 00000010 into 11111101. AND-ing that result with userFlags clears only the write bit and leaves every other bit exactly as it was — this is how you turn a specific flag OFF.
// userFlags = current permissions (e.g. READ + WRITE = 6)
// WRITE_PERMISSION = 2 (010 in binary)
userFlags &= ~WRITE_PERMISSION // removes write access, READ survives
You'll see this exact &= ~FLAG pattern in Vue's source — more on that below.
5. << — Left Shift
Takes a number and moves all its bits a given number of positions to the left, padding the right side with zeros.
The easiest way to see it: start with 1 (which is 00000001) and shift it left step by step.
1 << 0 → 00000001 = 1 (moved 0 places, still 1)
1 << 1 → 00000010 = 2 (moved 1 place left)
1 << 2 → 00000100 = 4 (moved 2 places left)
1 << 3 → 00001000 = 8 (moved 3 places left)
Each left shift is a multiplication by 2. Shifting left once doubles the number, shifting twice quadruples it, and so on. The 1 bit is essentially moving into a fresh position each time.
This is exactly why left shift is the standard way to define flag constants: each flag gets its own bit position and can never accidentally collide with another.
Use case example:
const ACTIVE = 1 << 0 // 00000001 = 1
const RUNNING = 1 << 1 // 00000010 = 2
const DIRTY = 1 << 2 // 00000100 = 4
You could write 1, 2, 4 directly — but 1 << 0, 1 << 1, 1 << 2 makes the intent obvious: these are bit positions, not arbitrary numbers.
6. >> — Right Shift
The mirror of left shift — moves all bits to the right by a given number of positions. For positive integers, each right shift divides by 2 (dropping any remainder).
8 in binary → 00001000
8 >> 1 → 00000100 = 4 (8 ÷ 2)
8 >> 2 → 00000010 = 2 (8 ÷ 4)
8 >> 3 → 00000001 = 1 (8 ÷ 8)
Think of it as the reverse journey: if left shift moves a 1 into a higher bit position, right shift brings it back down. Worth knowing: >> preserves the sign bit for negative numbers. If you need an unsigned right shift, JavaScript also has >>>.
Use case example: Unix permissions pack three groups (owner, group, others) into one number. Right shift lets you pull out each group individually, then & 0b111 masks off everything except the three bits you care about.
const permissions = 0b111110100 // owner=7, group=6, others=4
const ownerPerms = (permissions >> 6) & 0b111 // shift owner bits down → 7
const groupPerms = (permissions >> 3) & 0b111 // shift group bits down → 6
const othersPerms = permissions & 0b111 // already at the bottom → 4
A complete example: file permissions in JavaScript
Let's make it concrete with a working permission system — the same mental model as Unix, written in JavaScript.
// Define our permission flags (each is a unique bit)
const READ = 1 << 2 // 100 in binary = 4
const WRITE = 1 << 1 // 010 in binary = 2
const EXECUTE = 1 << 0 // 001 in binary = 1
// Grant read and write to a user
let userPermissions = READ | WRITE
// userPermissions = 100 | 010 = 110 = 6
// Check if the user can read
if (userPermissions & READ) {
console.log('Can read ✓')
}
// Grant execute permission
userPermissions |= EXECUTE
// userPermissions = 110 | 001 = 111 = 7
// Revoke write permission
userPermissions &= ~WRITE
// ~WRITE = ~010 = ...11111101
// 111 & ...11111101 = 101 = 5 (read + execute only)
// Toggle read
userPermissions ^= READ
// 101 ^ 100 = 001 (now execute only)
The full power here: one variable holds the complete state of three permissions. No objects, no arrays, no booleans scattered across your code.
Now let's read Vue's source code
At the time of writing, Vue 3 defines its effect flags like this in effect.ts:
// From: packages/reactivity/src/effect.ts
export enum EffectFlags {
ACTIVE = 1 << 0, // 00000001 = 1
RUNNING = 1 << 1, // 00000010 = 2
TRACKING = 1 << 2, // 00000100 = 4
NOTIFIED = 1 << 3, // 00001000 = 8
DIRTY = 1 << 4, // 00010000 = 16
ALLOW_RECURSE = 1 << 5, // 00100000 = 32
PAUSED = 1 << 6, // 01000000 = 64
EVALUATED = 1 << 7, // 10000000 = 128
}
Eight independent flags packed into one number. A ReactiveEffect can be ACTIVE, TRACKING, and DIRTY all at the same time — you just | the flags together.
Setting a flag (pause an effect)
At the time of writing, this is from Vue's effect.ts:
// From: packages/reactivity/src/effect.ts
pause(): void {
this.flags |= EffectFlags.PAUSED
}
|= turns ON the PAUSED bit. Every other flag is untouched. One line. No conditionals.
Checking and clearing a flag (resume an effect)
Also from Vue's effect.ts at the time of writing:
// From: packages/reactivity/src/effect.ts
resume(): void {
if (this.flags & EffectFlags.PAUSED) { // ← Is the PAUSED bit set?
this.flags &= ~EffectFlags.PAUSED // ← Clear it
if (pausedQueueEffects.has(this)) {
pausedQueueEffects.delete(this)
this.trigger()
}
}
}
Let's trace through the flag manipulation:
PAUSED = 1 << 6 = 01000000
Assume this.flags = 01000101 (ACTIVE | TRACKING | PAUSED)
// Check: is PAUSED set?
this.flags & PAUSED
= 01000101
& 01000000
= 01000000 ← non-zero, so yes
// Clear PAUSED (shown as 8-bit for brevity; JS uses 32-bit internally):
~PAUSED = ~01000000 = 10111111
this.flags & ~PAUSED
= 01000101
& 10111111
= 00000101 ← ACTIVE | TRACKING, PAUSED is gone
One line clears exactly one bit. The others survive.
When should you use this in your own code?
Bitwise flags shine when:
- You have a fixed set of boolean states that can be active at the same time — that's the key thing. A
ReactiveEffectin Vue can beACTIVE,TRACKING, andDIRTYall at once, stored in a single integer. That's what makes this pattern worth it. - You want clean, non-overlapping flag definitions —
1 << 0,1 << 1,1 << 2guarantees each flag lives in its own bit, so there's zero risk of two flags accidentally sharing a value. - Performance and predictability matter — bitwise operations are more efficient and predictable than managing many separate boolean properties, which is why you'll find them in hot paths inside compilers, game engines, and reactive systems.
- Got another reason? Drop it in the comments — I'd love to know where you've seen this pattern in the wild.
They're overkill when you just have two or three booleans that never combine. Use good judgment.
That's it
I hope this makes bitwise operators click for you and shows you how they're actually used in the wild. And flags are just one corner of it — people use bitwise operators for color channel manipulation in image processing, for hash functions, for compression algorithms, for cryptography. There's a lot to explore once you're comfortable with the basics.
Go read more source code. It's less scary than it looks.
Top comments (0)