JavaScript Bitwise

Bitwise operators work on the individual binary digits (bits) of a number: the 1s and 0s underneath. You will not use them every day, but they show up in graphics, games, permission systems, and anywhere many yes/no settings are packed into one number. They are also a great way to understand how computers really store numbers.

// Numbers in Binary

Every whole number can be written in binary. Each position is worth double the one to its right:

//  8  4  2  1
//  0  1  0  1   = 4 + 1     = 5
//  1  1  0  1   = 8 + 4 + 1 = 13

console.log((13).toString(2));   // decimal to binary
console.log(0b1101);                // binary to decimal

Numbers with only one bit set are the powers of two: 1, 2, 4, 8, 16, 32, 64... Setting more bits adds them up: 101101 is 32 + 8 + 4 + 1 = 45.

// JavaScript Uses 32 Bits

JavaScript normally stores numbers as 64-bit floating point. But bitwise operators work on 32-bit whole numbers. Before each bitwise operation, JavaScript converts the number to a 32-bit signed integer, and afterward converts the result back. Two consequences:

• Any decimal part is dropped: 5.9 | 0 gives 5
• The leftmost of the 32 bits is the sign: 0 for positive, 1 for negative

// The Operators

// AND, OR, XOR Worked Out

Line the two numbers up bit by bit, and apply the rule to each column:

//     5 = 0101
//     3 = 0011
// ------------
// 5 & 3 = 0001 = 1   (only where both are 1)
// 5 | 3 = 0111 = 7   (where either is 1)
// 5 ^ 3 = 0110 = 6   (where they differ)

console.log(5 & 3);
console.log(5 | 3);
console.log(5 ^ 3);

// NOT and Negative Numbers

console.log(~5);
console.log(~0);

Why is ~5 equal to -6 and not 10? With only 4 bits, flipping 0101 would give 1010, which is 10. But JavaScript flips all 32 bits, including the sign bit:

//  5 = 00000000000000000000000000000101
// ~5 = 11111111111111111111111111111010   (sign bit is now 1: negative)

JavaScript stores negative numbers in a format called two's complement: a negative number is the bitwise NOT of the positive number, plus 1. So -5 is ~5 + 1, and flipping the bits of any n always gives -(n + 1):

// Shifts

Shifting left by 1 doubles a whole number; shifting right by 1 halves it (dropping any remainder):

console.log(5 << 1);    // 0101 becomes 1010
console.log(5 << 3);    // 5 × 2 × 2 × 2
console.log(20 >> 2);   // 20 ÷ 2 ÷ 2
console.log(7 >> 1);    // remainder dropped

The two right shifts only differ for negative numbers. >> copies the sign bit in from the left, so the number stays negative. >>> pushes in zeros, so the sign bit becomes 0 and the result turns into a huge positive number:

console.log(-5 >> 1);     // sign kept
console.log(-5 >>> 1);    // sign bit replaced by 0

// Bitwise Assignment Operators

Like +=, each bitwise operator has an assignment version that does the operation and stores the result:

10 is 1010 and 5 is 0101: they share no bits, which is why & gives 0 and both | and ^ give 1111 (15).

// Real Use: Permission Flags

Each bit can stand for one yes/no setting. Many settings then fit in a single number:

const READ   = 1;   // 001
const WRITE  = 2;   // 010
const DELETE = 4;   // 100

let perms = READ | WRITE;               // turn on read and write: 011 = 3

console.log((perms & WRITE) !== 0);     // check: has write?
console.log((perms & DELETE) !== 0);    // check: has delete?

perms |= DELETE;                         // turn delete on:  111 = 7
perms &= ~WRITE;                         // turn write off:  101 = 5
console.log(perms.toString(2));

// Handy Tricks

// Odd or even: the last bit of every odd number is 1
console.log(7 & 1);    // odd
console.log(8 & 1);    // even

// Decimal to binary, including negatives
console.log((-5 >>> 0).toString(2));

// Binary string to decimal
console.log(parseInt("1101", 2));

(-5).toString(2) would give "-101", a minus sign in front of 5's bits. Shifting by zero with >>> 0 first turns the number into its raw 32-bit pattern, so you see what is really stored.

// Quick Check

// Try It

▶ Open Playground

1. Click Open Playground and run it to see 12 and 10 in binary. Work out 12 & 10, 12 | 10, and 12 ^ 10 on paper, then log them to check
2. Use << to compute 3 times 16 without using *
3. Build the permission example and toggle WRITE on and off with ^=, logging perms.toString(2) each time
4. Compare -8 >> 1 and -8 >>> 1. Explain the difference