Bits and Bytes

Quick Summary

A bit is 0 or 1, and a byte is 8 bits. JavaScript's bitwise operators convert numbers to 32-bit signed integers, which is useful for flags and masks but can change large numbers. Understanding binary helps you work with low-level data, colors, and performance optimization.

Binary: The Language of Computers

Computers only understand two states: ON (1) and OFF (0). Everything — numbers, text, images — is stored as patterns of 1s and 0s.

Bit: Single binary digit (0 or 1)
Byte: 8 bits (can represent 0-255 or 256 values)
Kilobyte (KB): ~1,000 bytes
Megabyte (MB): ~1,000,000 bytes

Binary Numbers

Each position is a power of 2:

Position:  7   6   5   4   3   2   1   0
Value:   128  64  32  16   8   4   2   1

Binary:    1   0   1   0   1   0   0   1
         128 + 0 + 32 + 0 + 8 + 0 + 0 + 1 = 169

Bitwise Operators in JavaScript

| Operator | Name | Description | |----------|------|-------------| | & | AND | 1 if both bits are 1 | | | | OR | 1 if either bit is 1 | | ^ | XOR | 1 if bits are different | | ~ | NOT | Inverts all bits | | << | Left shift | Multiply by 2 | | >> | Right shift | Divide by 2 |

Common Uses

Flags (multiple booleans in one number):

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

let permissions = READ | WRITE; // 011 (read + write)

// Check permission
if (permissions & READ) {
  console.log("Can read");
}

Colors (RGB):

const color = 0xFF5733; // Orange in hex
const red = (color >> 16) & 0xFF;   // 255
const green = (color >> 8) & 0xFF;  // 87
const blue = color & 0xFF;          // 51

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

// Binary to decimal conversion
const binary = "11001010";
const decimal = parseInt(binary, 2);
console.log(decimal); // 202

// Decimal to binary conversion
const num = 202;
const binaryStr = num.toString(2);
console.log(binaryStr); // "11001010"

// Bitwise operations
const a = 5;  // Binary: 0101
const b = 3;  // Binary: 0011

console.log(a & b);  // 1  (AND: 0001)
console.log(a | b);  // 7  (OR:  0111)
console.log(a ^ b);  // 6  (XOR: 0110)
console.log(~a);     // -6 (NOT: inverts all bits)
console.log(a << 1); // 10 (left shift: multiply by 2)
console.log(a >> 1); // 2  (right shift: divide by 2)

// Practical: Check if number is even/odd
const isEven = (n) => (n & 1) === 0;
console.log(isEven(4)); // true
console.log(isEven(7)); // false

// Practical: Permission flags
const READ = 1;    // 001
const WRITE = 2;   // 010
const DELETE = 4;  // 100

let userPermissions = READ | WRITE; // 011

// Check if user can write
if (userPermissions & WRITE) {
  console.log("User can write"); // This prints
}

Key Takeaways

✓Understand how computers store data at the lowest level.
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics