Binary Numbers - Intro to Programming Tutorial

Quick Summary

Binary is the base-2 system computers use internally. Converting between binary and decimal helps you understand how data is stored and manipulated. Every number, character, and color is ultimately stored as binary.

Understanding Number Systems

We use decimal (base-10) with digits 0-9. Computers use binary (base-2) with digits 0-1.

Decimal (Base-10)

  472 = 4×100 + 7×10 + 2×1
      = 4×10² + 7×10¹ + 2×10⁰

Binary (Base-2)

  1011 = 1×8 + 0×4 + 1×2 + 1×1
       = 1×2³ + 0×2² + 1×2¹ + 1×2⁰
       = 8 + 0 + 2 + 1 = 11 (decimal)

Conversion: Decimal to Binary

Divide by 2, keep track of remainders:

13 ÷ 2 = 6 remainder 1
 6 ÷ 2 = 3 remainder 0
 3 ÷ 2 = 1 remainder 1
 1 ÷ 2 = 0 remainder 1

Read remainders bottom-up: 1101
So 13 (decimal) = 1101 (binary)

Conversion: Binary to Decimal

Add up powers of 2:

1101 = 1×8 + 1×4 + 0×2 + 1×1
     = 8 + 4 + 0 + 1
     = 13

Binary in JavaScript

// Binary literal (prefix with 0b)
const binary = 0b1101; // 13

// Parse binary string
parseInt("1101", 2); // 13

// Convert to binary string
(13).toString(2); // "1101"

Common Binary Values

| Decimal | Binary | Meaning | |---------|--------|---------| | 0 | 0000 | Zero | | 1 | 0001 | One | | 255 | 11111111 | Max byte | | 256 | 100000000 | 2⁸ |

Why Binary Matters

Understanding memory and storage
Working with colors (RGB values)
Bit manipulation for performance
Network protocols and data formats

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 literals in JavaScript (0b prefix)
const a = 0b1010;  // 10 in decimal
const b = 0b1111;  // 15 in decimal

console.log(a + b); // 25 (math works normally)

// Converting decimal to binary
const decimalNum = 42;
const binaryString = decimalNum.toString(2);
console.log(binaryString); // "101010"

// Converting binary to decimal
const binaryStr = "101010";
const decimalResult = parseInt(binaryStr, 2);
console.log(decimalResult); // 42

// Padding binary to 8 bits (byte)
function toByte(num) {
  return num.toString(2).padStart(8, '0');
}
console.log(toByte(5));   // "00000101"
console.log(toByte(255)); // "11111111"

// Binary representation of ASCII
const char = 'A';
const charCode = char.charCodeAt(0);
console.log(charCode);              // 65
console.log(charCode.toString(2));  // "1000001"

// Working with binary flags
const FLAG_A = 0b0001; // 1
const FLAG_B = 0b0010; // 2
const FLAG_C = 0b0100; // 4

let flags = FLAG_A | FLAG_C;  // 0101 (5)
console.log(flags.toString(2)); // "101"

Key Takeaways

✓Represent values with base-2 digits (0 and 1).
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics