JavaScript Singleton Pattern

Click to share! ⬇️

The Singleton pattern is a design pattern that restricts the instantiation of a class to a single instance and provides a global point of access to that instance. In other words, it ensures that there is only one object of a particular class in an application, and provides a way to access that object globally. To understand the Singleton pattern, let’s consider an example of a farm that produces sweet peppers. The farm has a greenhouse that grows the peppers, and we want to create a singleton object that manages the greenhouse.

Creating a Singleton Object in JavaScript
Using the Singleton Pattern to Manage State
Best Practices and Common Pitfalls of the Singleton Pattern
Alternatives to the Singleton Pattern in JavaScript

In JavaScript, we can implement the Singleton pattern using a combination of a closure and a module. Here’s an example code snippet:

const greenhouse = (() => {
  let instance;

  function createInstance() {
    const object = new Object("Sweet Pepper Greenhouse");
    return object;
  }

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

// usage
const greenhouseInstance1 = greenhouse.getInstance();
const greenhouseInstance2 = greenhouse.getInstance();

console.log(greenhouseInstance1 === greenhouseInstance2); // true

In this example, we define a greenhouse module using an immediately invoked function expression (IIFE). Within the IIFE, we define a createInstance function that creates a new Object with the name “Sweet Pepper Greenhouse”. We also define a getInstance function that checks if an instance of the greenhouse module already exists, and if not, creates a new instance using the createInstance function.

When we call greenhouse.getInstance() twice, we get the same instance of the Object, which is confirmed by the console.log statement that outputs true.

Creating a Singleton Object in JavaScript

To create a singleton object in JavaScript, we can use a combination of a closure and a module. Here’s how:

const singleton = (() => {
  let instance;

  function createInstance() {
    const object = new Object("I am the instance");
    return object;
  }

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

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

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

In this example, we define a singleton module using an immediately invoked function expression (IIFE). Within the IIFE, we define a createInstance function that creates a new Object with a unique name. We also define a getInstance function that checks if an instance of the singleton module already exists, and if not, creates a new instance using the createInstance function.

When we call singleton.getInstance() twice, we get the same instance of the Object, which is confirmed by the console.log statement that outputs true.

Note that the getInstance function is defined as a property of the singleton object that is returned from the IIFE. This means that we can only access the getInstance function from outside the module, not the instance variable. This ensures that the instance variable remains private and can only be accessed through the getInstance function.

Using the Singleton Pattern to Manage State

One of the common use cases for the Singleton pattern is to manage application state. In our sweet pepper farm example, we can use a Singleton object to manage the state of our greenhouse.

Let’s say we want to keep track of the temperature and humidity levels in our greenhouse. We can create a Greenhouse Singleton object that has methods to set and get the temperature and humidity values.

Here’s an example implementation:

const Greenhouse = (() => {
  let instance;

  function createInstance() {
    let temperature = 0;
    let humidity = 0;

    function setTemperature(temp) {
      temperature = temp;
    }

    function setHumidity(hum) {
      humidity = hum;
    }

    function getTemperature() {
      return temperature;
    }

    function getHumidity() {
      return humidity;
    }

    return {
      setTemperature,
      setHumidity,
      getTemperature,
      getHumidity,
    };
  }

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

// usage
const greenhouse = Greenhouse.getInstance();

greenhouse.setTemperature(25);
greenhouse.setHumidity(80);

console.log(greenhouse.getTemperature()); // 25
console.log(greenhouse.getHumidity()); // 80

In this example, we define a Greenhouse module using an immediately invoked function expression (IIFE). Within the IIFE, we define a createInstance function that creates a new Object with private temperature and humidity variables, and four methods to set and get the values of those variables.

We also define a getInstance function that checks if an instance of the Greenhouse module already exists, and if not, creates a new instance using the createInstance function.

When we call Greenhouse.getInstance(), we get the same instance of the Object every time, which is confirmed by the console.log statement that outputs the temperature and humidity values we set earlier.

This implementation allows us to manage the state of our greenhouse from anywhere in our application by calling the Greenhouse.getInstance() method.

Best Practices and Common Pitfalls of the Singleton Pattern

The Singleton pattern can be a powerful tool in managing application state and resources. However, there are some best practices and common pitfalls to keep in mind when using the pattern.

Here are some tips to follow when using the Singleton pattern in your JavaScript applications:

Use the pattern sparingly: The Singleton pattern should only be used when you need to ensure that there is only one instance of a particular class in your application. Overusing the pattern can make your code more complex and harder to maintain.
Use a closure and a module: To create a Singleton object in JavaScript, use a combination of a closure and a module to ensure that the instance variable remains private and can only be accessed through the getInstance() method.
Be mindful of global state: The Singleton pattern can easily lead to global state, which can make it difficult to reason about the behavior of your application. Make sure that you only use the Singleton pattern to manage state that needs to be globally accessible.
Avoid shared state: If you use the Singleton pattern to manage state, be careful not to allow multiple parts of your application to modify the same state. This can lead to race conditions and other concurrency issues.
Consider testing implications: Testing code that relies on Singleton objects can be challenging, as it can be difficult to isolate the object and its behavior. Consider using dependency injection or other techniques to make your code more testable.
Avoid subclassing: Subclassing a Singleton object can lead to unexpected behavior, as each subclass will have its own instance of the object. Instead, consider using composition or other design patterns to achieve the desired behavior.

Here are some common pitfalls to avoid when using the Singleton pattern:

Not using a closure: If you don’t use a closure to create your Singleton object, the instance variable will be accessible from outside the module, which defeats the purpose of the pattern.
Using a global variable: If you use a global variable to store your Singleton object, you lose the benefits of encapsulation and can introduce naming conflicts with other parts of your application.
Overusing the pattern: As mentioned earlier, overusing the Singleton pattern can make your code more complex and harder to maintain. Use the pattern sparingly and only when it’s necessary.
Not considering concurrency: If you use the Singleton pattern to manage state, make sure to consider concurrency issues, such as race conditions and deadlocks.

By following these best practices and avoiding common pitfalls, you can use the Singleton pattern effectively in your JavaScript applications.

Alternatives to the Singleton Pattern in JavaScript

The Singleton pattern can be a useful tool in managing state and resources in your JavaScript applications, but there are also alternative patterns and techniques that you can use.

Here are some alternatives to the Singleton pattern in JavaScript:

Dependency Injection: Instead of using a Singleton object to manage state, you can use dependency injection to provide the necessary state to your objects and functions. This allows you to decouple your objects and makes your code more testable.
Module Pattern: The Module pattern is similar to the Singleton pattern in that it uses an immediately invoked function expression (IIFE) to create a private scope for your code. However, instead of returning a single instance, the Module pattern returns an object with a set of methods and properties.
Factory Pattern: The Factory pattern is a creational pattern that allows you to create objects based on a common interface or abstract class. This pattern is useful when you need to create multiple objects that share a common behavior or interface.
Observer Pattern: The Observer pattern is a behavioral pattern that allows you to create a one-to-many relationship between objects. When one object changes, all of the objects that depend on it are notified and updated.
Publish/Subscribe Pattern: The Publish/Subscribe pattern is similar to the Observer pattern, but instead of a one-to-many relationship, it allows for a many-to-many relationship between objects. Objects can subscribe to specific events or topics and receive notifications when those events occur.

Click to share! ⬇️