Twenty-Three Well-Known Design Patterns With Code Samples In JavaScript

There are twenty-three well-known design patterns in software development, categorized into three groups: creational, structural, and behavioral patterns. I'll provide a list of all the design patterns and further give explanations and code samples for five of these patterns, including the State design pattern.

A list of the 23 well-known design patterns in software development, categorized into three groups: creational, structural, and behavioral patterns.

Creational Patterns:

1. Singleton Pattern

Factory Method Pattern
Abstract Factory Pattern
Builder Pattern
Prototype Pattern
Object Pool Pattern

Structural Patterns:

Adapter Pattern
Bridge Pattern
Composite Pattern
Decorator Pattern
Facade Pattern
Flyweight Pattern
Proxy Pattern

Behavioral Patterns:

Chain of Responsibility Pattern
Command Pattern
Interpreter Pattern
Iterator Pattern
Mediator Pattern
Memento Pattern
Observer Pattern
State Pattern
Strategy Pattern
Template Method Pattern

These design patterns provide solutions to common software design problems and are widely used in various software development contexts to improve code quality, maintainability, and flexibility.

Creational Patterns:

Singleton Pattern:

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

JS Code Snippet

 
         class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true

Factory Method Pattern:

Defines an interface for creating an object but allows subclasses to alter the type of objects that will be created.

JS Code Snippet

 
        class Creator {
  factoryMethod() {}
}

class ConcreteCreator extends Creator {
  factoryMethod() {
    return new ConcreteProduct();
  }
}

class Product {
  operation() {}
}

class ConcreteProduct extends Product {
  operation() {
    return 'Product created.';
  }
}

const creator = new ConcreteCreator();
const product = creator.factoryMethod();
console.log(product.operation()); // "Product created."

Structural Patterns:

Adapter Pattern:

Allows the interface of an existing class to be used as another interface.

JS Code Snippet

 
        class Target {
  request() {}
}

class Adaptee {
  specificRequest() {
    return 'Adaptee request.';
  }
}

class Adapter extends Target {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }

  request() {
    return this.adaptee.specificRequest();
  }
}

const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
console.log(adapter.request()); // "Adaptee request."
Decorator Pattern:

javascript
Copy code
class Component {
  operation() {}
}

class ConcreteComponent extends Component {
  operation() {
    return 'ConcreteComponent operation.';
  }
}

class Decorator extends Component {
  constructor(component) {
    super();
    this.component = component;
  }

  operation() {
    return `${this.component.operation()} Decorated.`;
  }
}

const concreteComponent = new ConcreteComponent();
const decoratedComponent = new Decorator(concreteComponent);
console.log(decoratedComponent.operation()); // "ConcreteComponent operation. Decorated."

Behavioral Patterns:

State Pattern:

Allows an object to alter its behavior when its internal state changes.

JS Code Snippet

		
          class State {
  handle() {}
}

class ConcreteStateA extends State {
  handle() {
    return 'State A';
  }
}

class ConcreteStateB extends State {
  handle() {
    return 'State B';
  }
}

class Context {
  constructor() {
    this.state = new ConcreteStateA();
  }

  request() {
    return this.state.handle();
  }

  setState(state) {
    this.state = state;
  }
}

const context = new Context();
console.log(context.request()); // "State A"
context.setState(new ConcreteStateB());
console.log(context.request()); // "State B"

In the State Pattern example above, we have a Context class that can switch between different states (ConcreteStateA and ConcreteStateB). The Context class delegates the handle method to its current state, allowing it to change its behavior dynamically based on its internal state.

Conclusion

These are the well-known design patterns in software development. Each pattern serves a specific purpose and can greatly improve the maintainability, flexibility, and readability of your code when applied appropriately.

Happy coding!!!

Search This Blog

Coders Congress Blog

Twenty-Three Well-Known Design Patterns With Code Samples In JavaScript

JS Code Snippet

JS Code Snippet

JS Code Snippet

JS Code Snippet

Comments

Post a Comment