Design Patterns

// The Observer pattern — notify multiple listeners when something happens
const newsletter = {
  subscribers: [],
  
  subscribe(callback) {
    this.subscribers.push(callback)
  },
  
  publish(article) {
    this.subscribers.forEach(callback => callback(article))
  }
}

// Anyone can subscribe
newsletter.subscribe(article => console.log(`New article: ${article}`))
newsletter.subscribe(article => console.log(`Saving "${article}" for later`))

// When we publish, all subscribers get notified
newsletter.publish("Design Patterns in JavaScript")
// "New article: Design Patterns in JavaScript"
// "Saving "Design Patterns in JavaScript" for later"

┌─────────────────────────────────────────────────────────────────────────┐
│                     DESIGN PATTERNS TOOLKIT                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   CREATIONAL                 STRUCTURAL               BEHAVIORAL         │
│   ───────────                ──────────               ──────────         │
│   How objects               How objects              How objects         │
│   are created               are composed             communicate         │
│                                                                          │
│   ┌─────────────┐           ┌─────────────┐         ┌─────────────┐     │
│   │  Singleton  │           │   Proxy     │         │  Observer   │     │
│   │  Factory    │           │  Decorator  │         │             │     │
│   └─────────────┘           └─────────────┘         └─────────────┘     │
│                                                                          │
│   Use when you need         Use when you need       Use when objects    │
│   to control object         to wrap or extend       need to react to    │
│   creation                  objects                 changes in others   │
│                                                                          │
│   ┌─────────────────────────────────────────────────────────────────┐   │
│   │  MODULE (JS-specific) — Encapsulates code with private state    │   │
│   └─────────────────────────────────────────────────────────────────┘   │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// counter.js — A module with private state
let count = 0  // Private — not exported, not accessible outside

export function increment() {
  count++
  return count
}

export function decrement() {
  count--
  return count
}

export function getCount() {
  return count
}

// main.js — Using the module
import { increment, getCount } from './counter.js'

increment()
increment()
console.log(getCount())  // 2

// Trying to access private state
// console.log(count)  // ReferenceError: count is not defined

// The revealing module pattern using IIFE
const Counter = (function() {
  // Private variables and functions
  let count = 0
  
  function logChange(action) {
    console.log(`Counter ${action}: ${count}`)
  }
  
  // Public API — "revealed" by returning an object
  return {
    increment() {
      count++
      logChange('incremented')
      return count
    },
    decrement() {
      count--
      logChange('decremented')
      return count
    },
    getCount() {
      return count
    }
  }
})()

Counter.increment()  // "Counter incremented: 1"
Counter.increment()  // "Counter incremented: 2"
console.log(Counter.getCount())  // 2

// Private members are truly private
console.log(Counter.count)       // undefined
console.log(Counter.logChange)   // undefined

// Singleton using Object.freeze — immutable configuration
const Config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  debug: false
}

Object.freeze(Config)  // Prevent all modifications

// Usage anywhere in your app
console.log(Config.apiUrl)  // "https://api.example.com"

// Attempting to modify throws an error in strict mode (silently fails otherwise)
Config.apiUrl = 'https://evil.com'
console.log(Config.apiUrl)  // Still "https://api.example.com"

Config.debug = true
console.log(Config.debug)   // Still false — frozen objects are immutable

let instance = null

class Database {
  constructor() {
    if (instance) {
      return instance  // Return existing instance
    }
    
    this.connection = null
    instance = this
  }
  
  connect(url) {
    if (!this.connection) {
      this.connection = `Connected to ${url}`
      console.log(this.connection)
    }
    return this.connection
  }
}

const db1 = new Database()
const db2 = new Database()

console.log(db1 === db2)  // true — Same instance!

db1.connect('mongodb://localhost')  // "Connected to mongodb://localhost"
db2.connect('mongodb://other')      // Returns same connection, doesn't reconnect

// ES Modules are already singletons!
// config.js
export const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
}

// main.js
import { config } from './config.js'

// other.js
import { config } from './config.js'

// Both files get the SAME object — modules are cached!

// Factory function — creates different user types
function createUser(type, name) {
  const baseUser = {
    name,
    createdAt: new Date(),
    greet() {
      return `Hi, I'm ${this.name}`
    }
  }
  
  switch (type) {
    case 'admin':
      return {
        ...baseUser,
        role: 'admin',
        permissions: ['read', 'write', 'delete', 'manage-users'],
        promote(user) {
          console.log(`${this.name} promoted ${user.name}`)
        }
      }
    
    case 'editor':
      return {
        ...baseUser,
        role: 'editor',
        permissions: ['read', 'write']
      }
    
    case 'viewer':
    default:
      return {
        ...baseUser,
        role: 'viewer',
        permissions: ['read']
      }
  }
}

// Usage — no need to know the internal structure
const admin = createUser('admin', 'Alice')
const editor = createUser('editor', 'Bob')
const viewer = createUser('viewer', 'Charlie')

console.log(admin.permissions)   // ['read', 'write', 'delete', 'manage-users']
console.log(editor.permissions)  // ['read', 'write']
console.log(viewer.greet())      // "Hi, I'm Charlie"

class Observable {
  constructor() {
    this.observers = []
  }
  
  subscribe(fn) {
    this.observers.push(fn)
    // Return an unsubscribe function
    return () => {
      this.observers = this.observers.filter(observer => observer !== fn)
    }
  }
  
  notify(data) {
    this.observers.forEach(observer => observer(data))
  }
}

// Usage: A stock price tracker
const stockPrice = new Observable()

// Subscriber 1: Log to console
const unsubscribeLogger = stockPrice.subscribe(price => {
  console.log(`Stock price updated: $${price}`)
})

// Subscriber 2: Check for alerts
stockPrice.subscribe(price => {
  if (price > 150) {
    console.log('ALERT: Price above $150!')
  }
})

// Subscriber 3: Update UI (simulated)
stockPrice.subscribe(price => {
  console.log(`Updating chart with price: $${price}`)
})

// When price changes, all subscribers are notified
stockPrice.notify(145)
// "Stock price updated: $145"
// "Updating chart with price: $145"

stockPrice.notify(155)
// "Stock price updated: $155"
// "ALERT: Price above $150!"
// "Updating chart with price: $155"

// Unsubscribe the logger
unsubscribeLogger()

stockPrice.notify(160)
// No log message, but alert and chart still update

┌─────────────────────────────────────────────────────────────────────────┐
│                     THE OBSERVER PATTERN                                 │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   PUBLISHER (Observable)              SUBSCRIBERS (Observers)            │
│   ──────────────────────              ───────────────────────            │
│                                                                          │
│   ┌─────────────────────┐             ┌─────────────┐                   │
│   │                     │ ──────────► │ Reader #1   │                   │
│   │   Magazine          │             └─────────────┘                   │
│   │   Publisher         │             ┌─────────────┐                   │
│   │                     │ ──────────► │ Reader #2   │                   │
│   │   • subscribers[]   │             └─────────────┘                   │
│   │   • subscribe()     │             ┌─────────────┐                   │
│   │   • unsubscribe()   │ ──────────► │ Reader #3   │                   │
│   │   • notify()        │             └─────────────┘                   │
│   │                     │                                               │
│   └─────────────────────┘                                               │
│                                                                          │
│   When a new issue publishes, all subscribers receive it automatically.  │
│   Readers can subscribe or unsubscribe at any time.                      │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// Observable form field
class FormField {
  constructor(initialValue = '') {
    this.value = initialValue
    this.observers = []
  }
  
  subscribe(fn) {
    this.observers.push(fn)
    return () => {
      this.observers = this.observers.filter(o => o !== fn)
    }
  }
  
  setValue(newValue) {
    this.value = newValue
    this.observers.forEach(fn => fn(newValue))
  }
}

// Usage
const emailField = new FormField('')

// Validator subscriber
emailField.subscribe(value => {
  const isValid = value.includes('@')
  console.log(isValid ? 'Valid email' : 'Invalid email')
})

// Character counter subscriber
emailField.subscribe(value => {
  console.log(`Characters: ${value.length}`)
})

emailField.setValue('test')
// "Invalid email"
// "Characters: 4"

emailField.setValue('[email protected]')
// "Valid email"
// "Characters: 16"

const user = {
  name: 'Alice',
  age: 25,
  email: '[email protected]'
}

const userProxy = new Proxy(user, {
  // Intercept property reads
  get(target, property) {
    console.log(`Accessing property: ${property}`)
    return target[property]
  },
  
  // Intercept property writes
  set(target, property, value) {
    console.log(`Setting ${property} to ${value}`)
    
    // Validation: age must be a non-negative number
    if (property === 'age') {
      if (typeof value !== 'number' || value < 0) {
        throw new Error('Age must be a non-negative number')
      }
    }
    
    // Validation: email must contain @
    if (property === 'email') {
      if (!value.includes('@')) {
        throw new Error('Invalid email format')
      }
    }
    
    target[property] = value
    return true
  }
})

// All access goes through the proxy
console.log(userProxy.name)
// "Accessing property: name"
// "Alice"

userProxy.age = 26
// "Setting age to 26"

userProxy.age = -5
// Error: Age must be a non-negative number

userProxy.email = 'invalid'
// Error: Invalid email format

// Expensive object that we don't want to create until needed
function createExpensiveResource() {
  console.log('Creating expensive resource...')
  return {
    data: 'Loaded data from database',
    process() {
      return `Processing: ${this.data}`
    }
  }
}

// Proxy that delays creation until first use
function createLazyResource() {
  let resource = null
  
  return new Proxy({}, {
    get(target, property) {
      // Create resource on first access
      if (!resource) {
        resource = createExpensiveResource()
      }
      
      const value = resource[property]
      // If it's a method, bind it to the resource
      return typeof value === 'function' ? value.bind(resource) : value
    }
  })
}

const lazyResource = createLazyResource()
console.log('Proxy created, resource not loaded yet')

// Resource is only created when we actually use it
console.log(lazyResource.data)
// "Creating expensive resource..."
// "Loaded data from database"

console.log(lazyResource.process())
// "Processing: Loaded data from database"

// Base object
const createCharacter = (name) => ({
  name,
  health: 100,
  describe() {
    return `${this.name} (${this.health} HP)`
  }
})

// Decorator: Add flying ability
const withFlying = (character) => ({
  ...character,
  fly() {
    return `${character.name} soars through the sky!`
  },
  describe() {
    return `${character.describe()} [Can fly]`
  }
})

// Decorator: Add swimming ability
const withSwimming = (character) => ({
  ...character,
  swim() {
    return `${character.name} dives into the water!`
  },
  describe() {
    return `${character.describe()} [Can swim]`
  }
})

// Decorator: Add armor
const withArmor = (character, armorPoints) => ({
  ...character,
  armor: armorPoints,
  takeDamage(amount) {
    const reducedDamage = Math.max(0, amount - armorPoints)
    character.health -= reducedDamage
    return `${character.name} takes ${reducedDamage} damage (${armorPoints} blocked)`
  },
  describe() {
    return `${character.describe()} [Armor: ${armorPoints}]`
  }
})

// Compose decorators to build characters
const duck = withSwimming(withFlying(createCharacter('Duck')))
console.log(duck.describe())  // "Duck (100 HP) [Can fly] [Can swim]"
console.log(duck.fly())       // "Duck soars through the sky!"
console.log(duck.swim())      // "Duck dives into the water!"

const knight = withArmor(createCharacter('Knight'), 20)
console.log(knight.describe())     // "Knight (100 HP) [Armor: 20]"
console.log(knight.takeDamage(50)) // "Knight takes 30 damage (20 blocked)"

// Decorator: Log function calls
const withLogging = (fn, fnName) => {
  return function(...args) {
    console.log(`Calling ${fnName} with:`, args)
    const result = fn.apply(this, args)
    console.log(`${fnName} returned:`, result)
    return result
  }
}

// Decorator: Memoize (cache) results
const withMemoization = (fn) => {
  const cache = new Map()
  
  return function(...args) {
    const key = JSON.stringify(args)
    
    if (cache.has(key)) {
      console.log('Cache hit!')
      return cache.get(key)
    }
    
    const result = fn.apply(this, args)
    cache.set(key, result)
    return result
  }
}

// Original function
function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

// Decorated version with logging
const loggedAdd = withLogging((a, b) => a + b, 'add')
loggedAdd(2, 3)
// "Calling add with: [2, 3]"
// "add returned: 5"

// Decorated fibonacci with memoization
const memoizedFib = withMemoization(function fib(n) {
  if (n <= 1) return n
  return memoizedFib(n - 1) + memoizedFib(n - 2)
})

console.log(memoizedFib(10))  // 55
console.log(memoizedFib(10))  // "Cache hit!" — 55

┌─────────────────────────────────────────────────────────────────────────┐
│                    DESIGN PATTERN MISTAKES                               │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   MISTAKE #1: PATTERN OVERUSE                                            │
│   ───────────────────────────                                            │
│   Using patterns where simple code would work better.                    │
│   A plain function is often better than a Factory class.                 │
│                                                                          │
│   MISTAKE #2: WRONG PATTERN CHOICE                                       │
│   ─────────────────────────────                                          │
│   Using Singleton when you just need a module export.                    │
│   Using Observer when a simple callback would suffice.                   │
│                                                                          │
│   MISTAKE #3: IGNORING JAVASCRIPT IDIOMS                                 │
│   ────────────────────────────────────                                   │
│   JavaScript has closures, first-class functions, and ES modules.        │
│   Many classical patterns simplify dramatically in JavaScript.           │
│                                                                          │
│   MISTAKE #4: PREMATURE ABSTRACTION                                      │
│   ────────────────────────────────                                       │
│   Adding patterns before you have a real problem to solve.               │
│   "You Ain't Gonna Need It" (YAGNI) applies to patterns too.            │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// ❌ OVERKILL: Factory for simple objects
class UserFactory {
  createUser(name) {
    return new User(name)
  }
}
const factory = new UserFactory()
const user = factory.createUser('Alice')

// ✓ SIMPLE: Just create the object
const user = { name: 'Alice' }
// or
const user = new User('Alice')