Singleton Design Pattern In Javscript

The Singleton design pattern is a creational design pattern that ensures a class has only one instance and provides a global point of access to that instance. It’s commonly used in scenarios where exactly one instance of a class is needed to control access to a shared resource, manage configuration settings, or coordinate actions across the application.

In JavaScript, implementing the Singleton pattern can be achieved using various techniques, such as object literals, closures, or ES6 classes. Here’s an example of how you can implement a Singleton using a JavaScript class:

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      // Create the singleton instance if it doesn't exist
      Singleton.instance = this;
    }
    // Return the existing instance if it already exists
    return Singleton.instance;
  }

  // Additional methods and properties can be added here
}

// Usage
const singleton1 = new Singleton();
const singleton2 = new Singleton();

console.log(singleton1 === singleton2); // Output: true

In this example:

  • The Singleton class has a private static property named instance, which holds the singleton instance.
  • The constructor of the Singleton class checks whether the instance property already exists. If it doesn’t, it creates a new instance and assigns it to the instance property. If it does, it returns the existing instance.
  • By ensuring that the constructor always returns the same instance, the Singleton pattern guarantees that there is only one instance of the class throughout the application.

It’s important to note that while the Singleton pattern provides a global point of access to the instance, it also introduces global state, which can make the code harder to test and maintain. Therefore, it should be used judiciously and only in scenarios where a single instance is truly necessary. Additionally, in multi-threaded environments, special care must be taken to ensure thread safety when implementing the Singleton pattern.

5 Examples of Singleton Design Pattern

Using an Object Literal

const singleton = {
  instance: null,
  getInstance() {
    if (!this.instance) {
      this.instance = { /* Singleton instance properties */ };
    }
    return this.instance;
  }
};

// Usage
const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();

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

Using a Closure

const singleton = (function() {
  let instance;

  function createInstance() {
    return { /* Singleton instance properties */ };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// Usage
const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();

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

Using ES6 Class

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

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

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

Using ES6 Class with Static Method

class Singleton {
  static instance;

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

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

// Usage
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

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

Using a Proxy

const singleton = new Proxy({}, {
  instance: null,
  get(target, prop) {
    if (!this.instance) {
      this.instance = { /* Singleton instance properties */ };
    }
    return this.instance[prop];
  }
});

// Usage
const instance1 = singleton;
const instance2 = singleton;

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

These examples demonstrate different approaches to implementing the Singleton pattern in JavaScript, each with its own advantages and use cases. Depending on the requirements and preferences of your project, you can choose the implementation that best suits your needs.

Singleton Design Pattern When’s

let’s have a look at few example following product, services, situations, user behaviour and more to better understand when we’ll be using Singleton Design Pattern. Some might sound familiar some not, but repeating those will “click in” what’s a singleton is.

User Authentication System
Product Example: A web application that requires users to log in before accessing certain features.

Singleton Usage: Implementing a Singleton pattern for the user authentication service ensures that there is only one instance of the authentication service throughout the application. This allows for centralized management of user authentication status and credentials.

Theme Manager in a UI Library
Product Example: A UI library for building web applications that offers various themes (e.g., light mode, dark mode).

Singleton Usage: Using a Singleton pattern for the theme manager ensures that there is a single instance responsible for managing the current theme across the entire application. This enables consistent theming throughout the UI components and simplifies the process of switching between different themes.

Shopping Cart in an E-commerce Platform
Product Example: An online marketplace where users can add items to their shopping cart and proceed to checkout.

Singleton Usage: Employing a Singleton pattern for the shopping cart ensures that there is only one instance of the cart object across the application. This allows for seamless management of the user’s shopping session and prevents multiple instances of the cart from conflicting with each other.

Notification Center in a Mobile App
Product Example: A mobile application that delivers push notifications to users for various events or updates.

Singleton Usage: Implementing a Singleton pattern for the notification center ensures that there is a single instance responsible for handling incoming notifications and displaying them to the user. This centralizes the management of notifications and ensures that users receive consistent and timely alerts.

User Preferences Manager in a Settings Menu
Product Example: A settings menu within an application where users can customize their preferences (e.g., language, notification preferences).

Singleton Usage: Using a Singleton pattern for the user preferences manager ensures that there is only one instance responsible for managing the user’s settings across the application. This simplifies the implementation of features that rely on user preferences and ensures that changes made to preferences are reflected consistently throughout the application’s UI.

Leave a Reply

Your email address will not be published. Required fields are marked *

All rights reserved 2024 ©