JavaScript Design Patterns 2024

 

JavaScript Design Patterns

Design patterns are reusable solutions to common problems in software design. They’re templates designed to help you write code that’s easy to understand and reuse. They also make communication between developers more efficient. In this article, we’ll discuss some common design patterns in JavaScript.

Module Pattern

The Module pattern is used to create modules, which are self-contained pieces of code that have a specific responsibility. In JavaScript, we can use the Module pattern to encapsulate private functions and variables, exposing only what we want to expose using a returned object. Here’s an example:

const myModule = (() => {
  const privateVariable = 'Hello World';

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

myModule.publicMethod(); // logs 'Hello World'

In this example, privateVariable and privateMethod are private, and publicMethod is public.

Observer Pattern

The Observer pattern offers a subscription model where objects subscribe to an event and get notified when the event occurs. In JavaScript, we can implement the Observer pattern with the EventEmitter class, which is available in Node.js:

const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

myEmitter.on('event', () => {
  console.log('an event occurred!');
});

myEmitter.emit('event');

In this example, we create a new instance of MyEmitter and then subscribe to the ‘event’ event using the on method. When we emit the ‘event’ event using the emit method, the callback function we passed to on gets executed.

Singleton Pattern

The Singleton pattern restricts a class from creating multiple instances. Instead, it ensures a class has just a single instance, and provides a global point of access to it. Here’s an example:

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

    return Singleton.instance;
  }
}

const instanceA = new Singleton();
const instanceB = new Singleton();

console.log(instanceA === instanceB); // true

In this example, instanceA and instanceB are the same instance of Singleton.

Factory Pattern

The Factory pattern is a creational pattern that provides a way to create objects without specifying the exact class of object that will be created. Here’s an example:

class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || 'brand new';
    this.color = options.color || 'silver';
  }
}

class CarFactory {
  createCar(options) {
    return new Car(options);
  }
}

const carFactory = new CarFactory();
const car = carFactory.createCar({
  doors: 6,
  color: 'red',
  state: 'like new'
});

console.log(car instanceof Car); // true
console.log(car); // Car { doors: 6, state: 'like new', color: 'red' }

In this example, CarFactory is a factory for creating cars.

These are just a few examples of design patterns in JavaScript. Understanding these patterns can help you write more efficient and reusable code. So, the next time you’re faced with a design problem, consider whether a design pattern can help you.