Skip to main content

Design Patterns

General Questions​

Name common design patterns

  • Singleton
  • Proxy
  • Provider
  • Prototype
  • Container/Presentational
  • Observer
  • Module
  • Mixin
  • Mediator/middleware
  • HOC
  • Render props
  • Hooks
  • Flyweight
  • Factory
  • Compound
  • Command

https://www.patterns.dev/posts/introduction

What does MVC stand for?

Model / View / Controller

Adapter​

Key aspects of the Builder pattern

The adapter must provide the same interface that the subject class provides (the same public properties and methods)

Builder​

Key aspects of the Builder pattern

  • Instead of providing and setting many parameters on a class constructor when creating an instance, you can have a builder class that has methods to set specific properties and return an instance of a class.

For example, a Person builder:

class Person {
  constructor(personBuilder) {
    this.name = personBuilder.name;
    this.isEmployee = personBuilder.isEmployee === true;
  }
}

class PersonBuilder {
  constructor(name) {
    this.name = name;
  }

  makeEmployee() {
    this.isEmployee = true;
    return this; // Return this so we can chain the methods in this class
  }

  build() {
    return new Person(this);
  }
}

// To use the PersonBuilder
let nonEmployee = new PersonBuilder("Jerry").build;
let employee = new PersonBuilder("Sally").makeEmployee().build;

Decorator​

Key aspects of the Decorator pattern

Factory​

Key aspects of the Factory pattern

  • Create a class that contains a function that creates instances of different classes based on provided parameters.

Iterator​

Key aspects of the Iterator pattern

Use an iterator class to provide utilities to move between a list of items.

Possible methods: first, last, next, prev, hasNext, current

Observer​

Key aspects of the Observer pattern

  • One-to-many relationship between the subject and all of the observers waiting for data so they can be updated.

  • Like an MVC pattern where the Model part is like a subject and the View part is like an observer of that subject.

  • Any time the state of the subject changes, all of the observers will be notified and updated.

  • https://www.freecodecamp.org/news/4-design-patterns-to-use-in-web-development/

Prototype​

Key aspects of the Prototype pattern

  • Share properties among many objects of the same type

  • The prototype is an object that's native to JavaScript, and can be accessed by objects through the prototype chain.

class Dog {
  constructor(name) {
    this.name = name;
  }

  bark() {
    return `Woof!`;
  }
}

const dog1 = new Dog("Daisy");
const dog2 = new Dog("Max");
const dog3 = new Dog("Spot");

Dog.prototype.play = () => console.log("Playing now!");

dog1.play();

Provider​

What is the Provider pattern?

The JavaScript Provider Pattern is a powerful concept in React that allows us to make data available to multiple components by wrapping all components in a Provider, which is a higher order component provided by the Context object.

  • Prevents the need to "drill down" data through props

  • Use createContext

Proxy​

Key aspects of the Proxy pattern

  • Similar to the Adapter pattern, the proxy must provide the same interface as the subject class.

  • Intercept and control interactions to target objects

  • With a Proxy object, we get more control over the interactions with certain objects. A proxy object can determine the behavior whenever we're interacting with the object, for example when we're getting a value, or setting a value.

  • A proxy can intercept and redefine fundamental operations for that object.

Singleton​

Key aspects of the Singleton pattern

  • A creational design pattern that lets you ensure that a class has only one instance, while providing a global access point to this instance.

  • Singleton pattern examples:

    • Logger

  • The Singleton pattern solves two problems at the same time, violating the Single Responsibility Principle:

Example

https://www.patterns.dev/posts/singleton-pattern

let instance;
let counter = 0;
 
class Counter {
  constructor() {
    if (instance) {
      throw new Error("You can only create one instance!");
    }
    instance = this;
  }
 
  getInstance() {
    return this;
  }
 
  getCount() {
    return counter;
  }
 
  increment() {
    return ++counter;
  }
 
  decrement() {
    return --counter;
  }
}
 
const singletonCounter = Object.freeze(new Counter());
export default singletonCounter;

NodeJS Example:

Logger.js

class Logger {
  constructor() {}

  // Other properties and methods
}

// By using this syntax, the instance will be created and Node will cache and use the single instance.
module.exports = new Logger();

someFile.js

var logger = require('./Logger');

anotherFile.js

var logger = require('./Logger');

What are some pros of using the Singleton pattern?

  • It makes sure that only a single instance of the class is created.

  • We get a single access point to the instance that can be accessed globally.

What are some cons of using the Singleton pattern?

  • It violates the single responsibility principle. That is, it tries to solve two problems at the same time. It tries to solve the following problems: Ensure that a class will have only one instance, and assigning a global access point to the singleton class instance.

  • It is difficult to write unit test cases for singleton classes. This is because the order of execution can change the value present in the global state, so the order of execution is important.

  • While writing unit tests, there is a risk of another component or a module might be changing the global state value/instance. In such scenarios, it becomes difficult to debug the error.