Design Patterns in Modern JavaScript

Design patterns are proven solutions to common problems. Here's how to implement classic patterns using modern JavaScript features.

Creational Patterns#

Factory Pattern#

// Create objects without specifying exact class
class UserFactory {
  static create(type, data) {
    switch (type) {
      case 'admin':
        return new AdminUser(data);
      case 'member':
        return new MemberUser(data);
      case 'guest':
        return new GuestUser(data);
      default:
        throw new Error(`Unknown user type: ${type}`);
    }
  }
}

class AdminUser {
  constructor({ name, email }) {
    this.name = name;
    this.email = email;
    this.permissions = ['read', 'write', 'delete', 'admin'];
  }
}

class MemberUser {
  constructor({ name, email }) {
    this.name = name;
    this.email = email;
    this.permissions = ['read', 'write'];
  }
}

// Usage
const admin = UserFactory.create('admin', { name: 'John', email: 'john@example.com' });
const member = UserFactory.create('member', { name: 'Jane', email: 'jane@example.com' });

Builder Pattern#

// Construct complex objects step by step
class QueryBuilder {
  constructor() {
    this.query = {
      select: [],
      from: null,
      where: [],
      orderBy: [],
      limit: null,
    };
  }

  select(...fields) {
    this.query.select.push(...fields);
    return this;
  }

  from(table) {
    this.query.from = table;
    return this;
  }

  where(condition) {
    this.query.where.push(condition);
    return this;
  }

  orderBy(field, direction = 'ASC') {
    this.query.orderBy.push({ field, direction });
    return this;
  }

  limit(count) {
    this.query.limit = count;
    return this;
  }

  build() {
    let sql = `SELECT ${this.query.select.join(', ')} FROM ${this.query.from}`;

    if (this.query.where.length) {
      sql += ` WHERE ${this.query.where.join(' AND ')}`;
    }

    if (this.query.orderBy.length) {
      const orders = this.query.orderBy.map(o => `${o.field} ${o.direction}`);
      sql += ` ORDER BY ${orders.join(', ')}`;
    }

    if (this.query.limit) {
      sql += ` LIMIT ${this.query.limit}`;
    }

    return sql;
  }
}

// Usage
const query = new QueryBuilder()
  .select('id', 'name', 'email')
  .from('users')
  .where('status = "active"')
  .where('age > 18')
  .orderBy('created_at', 'DESC')
  .limit(10)
  .build();

Singleton Pattern#

// Ensure only one instance exists
class Database {
  static #instance = null;

  constructor() {
    if (Database.#instance) {
      return Database.#instance;
    }

    this.connection = this.connect();
    Database.#instance = this;
  }

  static getInstance() {
    if (!Database.#instance) {
      Database.#instance = new Database();
    }
    return Database.#instance;
  }

  connect() {
    console.log('Connecting to database...');
    return { connected: true };
  }

  query(sql) {
    return `Executing: ${sql}`;
  }
}

// Or using module pattern (simpler)
// db.js
let connection = null;

export function getConnection() {
  if (!connection) {
    connection = createConnection();
  }
  return connection;
}

Structural Patterns#

Adapter Pattern#

// Make incompatible interfaces work together
class OldPaymentSystem {
  constructor() {
    this.name = 'LegacyPay';
  }

  makePayment(amount, currency, cardNumber) {
    return {
      status: 'success',
      transactionId: `LP-${Date.now()}`,
      amount: amount,
    };
  }
}

class NewPaymentSystem {
  constructor() {
    this.name = 'ModernPay';
  }

  processPayment({ amount, currency, paymentMethod }) {
    return {
      success: true,
      id: `MP-${Date.now()}`,
      chargedAmount: amount,
    };
  }
}

// Adapter to make old system work with new interface
class PaymentAdapter {
  constructor(legacySystem) {
    this.legacySystem = legacySystem;
  }

  processPayment({ amount, currency, paymentMethod }) {
    const result = this.legacySystem.makePayment(
      amount,
      currency,
      paymentMethod.cardNumber
    );

    return {
      success: result.status === 'success',
      id: result.transactionId,
      chargedAmount: result.amount,
    };
  }
}

// Usage
const paymentProcessor = new PaymentAdapter(new OldPaymentSystem());
const result = paymentProcessor.processPayment({
  amount: 100,
  currency: 'USD',
  paymentMethod: { cardNumber: '4111111111111111' },
});

Decorator Pattern#

// Add behavior to objects dynamically
class Coffee {
  cost() {
    return 5;
  }

  description() {
    return 'Coffee';
  }
}

// Decorators
class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 1;
  }

  description() {
    return `${this.coffee.description()} + Milk`;
  }
}

class SugarDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 0.5;
  }

  description() {
    return `${this.coffee.description()} + Sugar`;
  }
}

// Usage
let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);

console.log(coffee.description());  // Coffee + Milk + Sugar
console.log(coffee.cost());         // 6.5

// Modern alternative: Higher-order functions
const withLogging = (fn) => (...args) => {
  console.log(`Calling ${fn.name} with`, args);
  const result = fn(...args);
  console.log(`Result:`, result);
  return result;
};

const withTiming = (fn) => (...args) => {
  const start = performance.now();
  const result = fn(...args);
  console.log(`${fn.name} took ${performance.now() - start}ms`);
  return result;
};

const processData = withLogging(withTiming((data) => {
  return data.map(x => x * 2);
}));

Proxy Pattern#

// Control access to an object
const userService = {
  getUser(id) {
    console.log(`Fetching user ${id}`);
    return { id, name: 'John' };
  },
  deleteUser(id) {
    console.log(`Deleting user ${id}`);
  },
};

const userServiceProxy = new Proxy(userService, {
  get(target, prop) {
    const value = target[prop];

    if (typeof value === 'function') {
      return function (...args) {
        console.log(`[AUDIT] Calling ${prop} with args:`, args);

        // Access control
        if (prop === 'deleteUser' && !currentUser.isAdmin) {
          throw new Error('Unauthorized');
        }

        return value.apply(target, args);
      };
    }

    return value;
  },
});

// Caching proxy
function createCachingProxy(target) {
  const cache = new Map();

  return new Proxy(target, {
    apply(target, thisArg, args) {
      const key = JSON.stringify(args);

      if (cache.has(key)) {
        console.log('Cache hit');
        return cache.get(key);
      }

      console.log('Cache miss');
      const result = target.apply(thisArg, args);
      cache.set(key, result);
      return result;
    },
  });
}

const cachedFetch = createCachingProxy(fetchData);

Behavioral Patterns#

Observer Pattern#

// Define a subscription mechanism
class EventEmitter {
  constructor() {
    this.events = new Map();
  }

  on(event, listener) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event).push(listener);
    return () => this.off(event, listener);
  }

  off(event, listener) {
    const listeners = this.events.get(event);
    if (listeners) {
      const index = listeners.indexOf(listener);
      if (index > -1) {
        listeners.splice(index, 1);
      }
    }
  }

  emit(event, data) {
    const listeners = this.events.get(event);
    if (listeners) {
      listeners.forEach(listener => listener(data));
    }
  }
}

// Usage
const store = new EventEmitter();

const unsubscribe = store.on('userLoggedIn', (user) => {
  console.log(`Welcome, ${user.name}!`);
});

store.emit('userLoggedIn', { name: 'John' });

unsubscribe();  // Clean up

Strategy Pattern#

// Define a family of algorithms
const pricingStrategies = {
  regular: (price) => price,
  member: (price) => price * 0.9,
  premium: (price) => price * 0.8,
  sale: (price) => price * 0.5,
};

class ShoppingCart {
  constructor() {
    this.items = [];
    this.pricingStrategy = pricingStrategies.regular;
  }

  setPricingStrategy(strategy) {
    this.pricingStrategy = pricingStrategies[strategy] || pricingStrategies.regular;
  }

  addItem(item) {
    this.items.push(item);
  }

  calculateTotal() {
    const subtotal = this.items.reduce((sum, item) => sum + item.price, 0);
    return this.pricingStrategy(subtotal);
  }
}

// Usage
const cart = new ShoppingCart();
cart.addItem({ name: 'Laptop', price: 1000 });
cart.addItem({ name: 'Mouse', price: 50 });

console.log(cart.calculateTotal());  // 1050

cart.setPricingStrategy('premium');
console.log(cart.calculateTotal());  // 840

Command Pattern#

// Encapsulate requests as objects
class Command {
  execute() {
    throw new Error('Must implement execute');
  }

  undo() {
    throw new Error('Must implement undo');
  }
}

class AddTextCommand extends Command {
  constructor(document, text, position) {
    super();
    this.document = document;
    this.text = text;
    this.position = position;
  }

  execute() {
    this.document.insert(this.text, this.position);
  }

  undo() {
    this.document.delete(this.position, this.text.length);
  }
}

class CommandHistory {
  constructor() {
    this.history = [];
    this.position = -1;
  }

  execute(command) {
    command.execute();
    this.history = this.history.slice(0, this.position + 1);
    this.history.push(command);
    this.position++;
  }

  undo() {
    if (this.position >= 0) {
      this.history[this.position].undo();
      this.position--;
    }
  }

  redo() {
    if (this.position < this.history.length - 1) {
      this.position++;
      this.history[this.position].execute();
    }
  }
}

// Usage
const history = new CommandHistory();
history.execute(new AddTextCommand(doc, 'Hello', 0));
history.execute(new AddTextCommand(doc, ' World', 5));
history.undo();  // Removes ' World'
history.redo();  // Adds ' World' back

Conclusion#

Design patterns provide vocabulary and proven solutions for common problems. Modern JavaScript features (classes, modules, Proxy, higher-order functions) make many patterns cleaner to implement.

Don't force patterns where they're not needed. Use them when they solve real problems in your codebase.

Share this article