← WeakMap & WeakSet Advanced JavaScript Projects →

JavaScript Design Patterns

Design Patterns: Reusable solutions to commonly occurring problems in software design

1. Creational Patterns

Singleton Pattern

Ensures a class has only one instance and provides a global point of access to it.

JavaScript Editor

Factory Pattern

Creates objects without exposing the instantiation logic to the client.

JavaScript Editor

Builder Pattern

Constructs complex objects step by step.

JavaScript Editor

2. Structural Patterns

Decorator Pattern

Adds new functionality to an existing object without altering its structure.

JavaScript Editor

// Decorator Pattern
class Coffee {
  cost() {
    return 5;
  }

getDescription() {
    return 'Simple coffee';
  }
}

// Decorator Base
class CoffeeDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

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

getDescription() {
    return this.coffee.getDescription();
  }
}

// Concrete Decorators
class MilkDecorator extends CoffeeDecorator {
  cost() {
    return this.coffee.cost() + 2;
  }

getDescription() {
    return this.coffee.getDescription() + ', with milk';
  }
}

class SugarDecorator extends CoffeeDecorator {
  cost() {
    return this.coffee.cost() + 1;
  }

getDescription() {
    return this.coffee.getDescription() + ', with sugar';
  }
}

// Usage
let myCoffee = new Coffee();
console.log(myCoffee.getDescription() + ': $' + myCoffee.cost());

myCoffee = new MilkDecorator(myCoffee);
console.log(myCoffee.getDescription() + ': $' + myCoffee.cost());

myCoffee = new SugarDecorator(myCoffee);
console.log(myCoffee.getDescription() + ': $' + myCoffee.cost());

Adapter Pattern

Allows incompatible interfaces to work together.

JavaScript Editor

// Adapter Pattern
// Old interface
class OldCalculator {
  operations(term1, term2, operation) {
    switch(operation) {
      case 'add':
        return term1 + term2;
      case 'sub':
        return term1 - term2;
      default:
        return NaN;
    }
  }
}

// New interface
class NewCalculator {
  add(term1, term2) {
    return term1 + term2;
  }

sub(term1, term2) {
    return term1 - term2;
  }
}

// Adapter
class CalculatorAdapter {
  constructor() {
    this.newCalculator = new NewCalculator();
  }

operations(term1, term2, operation) {
    switch(operation) {
      case 'add':
        return this.newCalculator.add(term1, term2);
      case 'sub':
        return this.newCalculator.sub(term1, term2);
      default:
        return NaN;
    }
  }
}

// Usage
const oldCalc = new OldCalculator();
console.log('Old Calculator add:', oldCalc.operations(10, 5, 'add'));

const adapter = new CalculatorAdapter();
console.log('Adapter add:', adapter.operations(10, 5, 'add'));
console.log('Adapter sub:', adapter.operations(10, 5, 'sub'));

Proxy Pattern

Provides a surrogate or placeholder for another object to control access to it.

JavaScript Editor

3. Behavioral Patterns

Observer Pattern

Defines a one-to-many dependency between objects.

JavaScript Editor

Strategy Pattern

Defines a family of algorithms, encapsulates each one, and makes them interchangeable.

JavaScript Editor

// Strategy Pattern
class PaymentStrategy {
  pay(amount) {
    throw new Error('pay method must be implemented');
  }
}

class CreditCardPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class BitcoinPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid ${amount} using Bitcoin`);
  }
}

class ShoppingCart {
  constructor() {
    this.amount = 0;
    this.strategy = null;
  }

setPaymentStrategy(strategy) {
    this.strategy = strategy;
  }

checkout() {
    if (!this.strategy) {
      throw new Error('Payment strategy not set');
    }
    this.strategy.pay(this.amount);
  }

addItem(price) {
    this.amount += price;
  }
}

// Usage
const cart = new ShoppingCart();
cart.addItem(100);
cart.addItem(50);

cart.setPaymentStrategy(new CreditCardPayment());
cart.checkout();

cart.setPaymentStrategy(new PayPalPayment());
cart.checkout();

4. Module Pattern

Encapsulates code into modules with private and public parts.

JavaScript Editor

5. Revealing Module Pattern

A variation of the Module Pattern that reveals only specific parts.

JavaScript Editor

// Revealing Module Pattern
const Calculator = (function() {
  // Private
  let memory = 0;
  
  function add(a, b) {
    return a + b;
  }
  
  function subtract(a, b) {
    return a - b;
  }
  
  function multiply(a, b) {
    return a * b;
  }
  
  function divide(a, b) {
    if (b === 0) throw new Error('Cannot divide by zero');
    return a / b;
  }
  
  function storeInMemory(value) {
    memory = value;
  }
  
  function recallMemory() {
    return memory;
  }
  
  function clearMemory() {
    memory = 0;
  }
  
  // Public API
  return {
    add: add,
    subtract: subtract,
    multiply: multiply,
    divide: divide,
    recallMemory: recallMemory,
    clearMemory: clearMemory
  };
})();

// Usage
console.log('5 + 3 =', Calculator.add(5, 3));
console.log('10 - 4 =', Calculator.subtract(10, 4));
console.log('6 * 7 =', Calculator.multiply(6, 7));
console.log('20 / 5 =', Calculator.divide(20, 5));

// Memory operations would be exposed only if we reveal them
// storeInMemory is private

Best Practices:

Use design patterns only when they solve a real problem
Avoid over-engineering simple solutions
Consider the trade-offs between complexity and flexibility
Patterns should make code more maintainable, not less

← WeakMap & WeakSet Advanced JavaScript Projects →

Explore Related Tools

Hand-picked utilities and calculators related to this tool.

Related Tools

JavaScript Tutorial

JavaScript Design Patterns

1. Creational Patterns

Singleton Pattern

Factory Pattern

Builder Pattern

2. Structural Patterns

Decorator Pattern

Adapter Pattern

Proxy Pattern

3. Behavioral Patterns

Observer Pattern

Strategy Pattern

4. Module Pattern

5. Revealing Module Pattern

Best Practices:

Explore Related Tools

Advanced JavaScript Projects

JavaScript Advanced Tutorial

Advanced Array Methods

Async Javascript

Es Modules Advanced

Event Loop Advanced