What are Design Patterns in javascript?

What are Design Patterns?
A design pattern in software engineering is a general, reusable solution to a commonly occurring problem, such as building JavaScript web applications or designing a common computer system.

Types of Design Patterns

Creational Design Pattern:

• Factory Pattern

The creational design pattern provides optimized object creation techniques. They are useful in a number of scenarios, such as when:

Multiple objects that share similar characteristics need to be created.
Implementations of a class library needs to be hidden
A system should be independent of how its objects and products are created.

A common example in this category is the Factory Pattern.

class CreateCarFactor {
  constructor() {
    this.getCarInstance = function (brand) {
      if (brand === "MARUTI") {
        return new MarutiCar();
      } else if (brand === "BMW") {
        return new BMWCar();
      }
    };
  }
}

class MarutiCar {
  message = function () {
    return "Instance of Maruti Car";
  };
}

class BMWCar {
  message = function () {
    return "Instance of BMW Car";
  };
}

let carInstance = new CreateCarFactor();
let marutiInstance = carInstance.getCarInstance("MARUTI");
console.log(marutiInstance.message());
let bmwInstance = carInstance.getCarInstance("BMW");
console.log(bmwInstance.message());

• Singleton Pattern:

const singleton = (function () {
  let instance = null;
  function createInstanceofCar() {
    return { name: "Zeeshan", age: 30, randon: Math.floor(Math.random() * 10) };
  }
  return {
    getInstanceofCar: function () {
      if (!instance) {
        instance = createInstanceofCar();
      }
      return instance;
    },
  };
})();

const instance1 = singleton.getInstanceofCar();
console.log(instance1);
const instance2 = singleton.getInstanceofCar();
console.log(instance2);

Module Design Pattern:

JavaScript modules are the most prevalently used design patterns for keeping particular pieces of code independent of other components. This provides loose coupling to support well-structured code.

For those that are familiar with object-oriented languages, modules are JavaScript “classes”. One of the many advantages of classes is encapsulation - protecting states and behaviors from being accessed from other classes. The module pattern allows for public and private (plus the lesser-know protected and privileged) access levels.

var Exposer = (function() {
    var privateVariable = 10;

    var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
    }

    var methodToExpose = function() {
    console.log('This is a method I want to expose!');
    }

    var otherMethodIWantToExpose = function() {
    privateMethod();
    }

    return {
        first: methodToExpose,
        second: otherMethodIWantToExpose
    };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.methodToExpose; // undefined

Structural Design Pattern:

• The Decorator Pattern

The Decorator Pattern is a structural pattern that allows behavior to be added to an individual object dynamically without affecting the behavior of other objects from the same class. It’s useful in applications that have many distinct objects with the same underlying code. Instead of creating all of them using different subclasses, additional functionalities can be added to the objects using the decorator pattern.

class Text {
  constructor(value) {
    this.value = value;
  }
}

function applyHeadingStyles(text) {
  text.color = "gray";
  text.size = "18px";
  return text;
}

function changeFont(text, font) {
  text.font = font;
  return text;
}

const text = new Text("Hello world.");
const heading = applyHeadingStyles(text);
const textWithFont = changeFont(text, "Arial");

console.log(heading);
console.log(textWithFont);

Architectural Design Pattern:

• Observer Pattern / MVC Pattern

The MVC Pattern, which stands for model-view-controller pattern, is a very popular architectural pattern for web development that we can use to organize code by splitting application functionality into components. The model component manages the application data. The view renders data on the user-facing parts of the application. The controller connects the model and view components.

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(func) {
    this.observers.push(func);
  }

  unsubscribe(func) {
    this.observers = this.observers.filter((observer) => observer !== func);
  }

  notify(data) {
    this.observers.forEach((observer) => observer(data));
  }
}