Modern web development now uses JavaScript more and more frequently. Effective design patterns are more necessary as online applications' complexity rises. In this post, we'll look at a few of the most well-liked JavaScript design patterns and how ES6 can use them.

Singleton Pattern

To make sure that just one instance of a class is created throughout the program, the Singleton design pattern is employed. When we want to restrict the number of instances of a class or object, such as database connections, logging services, or configuration objects, we can make use of this pattern. The Singleton pattern can be implemented in ES6 by using a class, as shown below:

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

With this implementation, a single instance of the class is created and accessible from everywhere in the program.

Observer Pattern

One or more objects can be informed of a state change in another object using the observer pattern, which is a design pattern. When we wish to monitor changes in a certain item or group of objects, this pattern comes in handy. The built-in Proxy object in ES6 can be used to implement the Observer pattern in the following ways:

let target = {
  value: 0
};

let observer1 = {
  update: function() {
    console.log(`Observer 1: ${target.value}`);
  }
};

let observer2 = {
  update: function() {
    console.log(`Observer 2: ${target.value}`);
  }
};

target = new Proxy(target, {
  set: function(target, key, value) {
    target[key] = value;
    observer1.update();
    observer2.update();
    return true;
  }
});

target.value = 1; // Output: Observer 1: 1, Observer 2: 1

With this implementation, a Proxy object is created, which keeps track of changes to the target object and alerts the observer objects whenever a change takes place.

Factory Pattern

An object can be constructed using the Factory pattern without having to define its specific class, according to design theory. When we wish to make a range of items with comparable features, this design comes in handy. Classes and inheritance can be used to create the Factory pattern in ES6 as follows:

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }

  speak() {
    console.log(`${this.name} speaks.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name, 'dog');
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name, 'cat');
  }

  speak() {
    console.log(`${this.name} meows.`);
  }
}

class AnimalFactory {
  static createAnimal(name, type) {
    if (type === 'dog') {
      return new Dog(name);
    } else if (type === 'cat') {
      return new Cat(name);
    }
  }
}

let dog = AnimalFactory.createAnimal('Rex', 'dog');
let cat = AnimalFactory.createAnimal('Fluffy', 'cat');

dog.speak(); // Output: Rex barks.
cat.speak(); // Output: Fluffy meows.

Dog and Cat are two classes that are descended from Animal and are created by this implementation. Based on the type parameter, the AnimalFactory class creates objects of the Dog and Cat types.

Module Pattern

A design pattern called the Module pattern is employed to encapsulate code and guard against global scope pollution.
This technique is helpful if you want to establish private variables and methods or if you have a huge codebase and want to prevent naming conflicts. The import and export statements can be used to implement the Module pattern in ES6 as follows:

// module.js
const privateVariable = "I am a private variable";

function privateMethod() {
  console.log("I am a private method");
}

export function publicMethod() {
  console.log("I am a public method");
}

export const publicVariable = "I am a public variable";

// app.js
import { publicMethod, publicVariable } from './module.js';

publicMethod(); // Output: I am a public method
console.log(publicVariable); // Output: I am a public variable

By using the import statement, this approach produces a module with both private and public variables and functions that may be used by other modules.

Decorator Pattern

A design pattern called the Decorator pattern is used to dynamically add functionality to an object. This pattern comes in handy when we wish to add to or change an object's behavior without altering its structure. Using the class and extends statements in ES6, the Decorator pattern can be implemented as follows:

class Coffee {
  getCost() {
    return 1;
  }

  getDescription() {
    return "Coffee";
  }
}

class CoffeeWithMilk extends Coffee {
  constructor(coffee) {
    super();
    this.coffee = coffee;
  }

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

  getDescription() {
    return this.coffee.getDescription() + ", Milk";
  }
}

let coffee = new Coffee();
coffee = new CoffeeWithMilk(coffee);

console.log(coffee.getCost()); // Output: 1.5
console.log(coffee.getDescription()); // Output: Coffee, Milk

A Coffee class and a CoffeeWithMilk class, which extends the Coffee class, are created by this implementation. The CoffeeWithMilk class dynamically adds features to the Coffee object without altering its structure.

Conclusion

The use of JavaScript design patterns is crucial for contemporary web development. They enable us to produce code that is strong, scalable, and easily understandable and modifiable. In this article, we looked at some of the most well-liked JavaScript design patterns and their compatibility with ES6. You can build applications that are more effective and dependable as well as simpler to maintain and update over time by utilizing these patterns.