How to Implement the Singleton Pattern in JavaScript ES6

In this post, I'll show you how to implement the singleton pattern in JavaScript.

If you’re a full-stack JavaScript developer, you know that JavaScript is a really powerful language which you can use to build really amazing websites. On the other hand, if you’ve used JavaScript only for front-end form validations and making AJAX calls, then you’ve only scratched the surface of it, and it’s capable of doing a lot more than that. And it’s such a feature-rich language, there are a lot of frameworks that are built on top of it.

In this article, we’re going to discuss one of the useful programming patterns for object-oriented JavaScript: the singleton pattern. Singleton objects are created only once during the runtime of the application in the global scope. They are used for sharing resources or coordinating between different parts of your application.

What is the Singleton Pattern?

Let’s have a look at the definition of the Singleton pattern:

In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one "single" instance. This is useful when exactly one object is needed to coordinate actions across the system.

When you’re developing applications, there are times when you need to create global objects across the applications. Specifically, you need objects that are instantiated only once during the lifetime of the whole request. For example, it could be a database connection object that you want to keep global across the whole request, since there’s no need to create multiple database objects per request. In such cases, the singleton pattern is really useful, as it guarantees you that only a single copy of an object will be instantiated.

A Quick Look: Singleton Pattern in Older Versions of JavaScript

In this section, we’ll quickly see how you can implement the singleton pattern in the older versions of JavaScript.

Let’s have a look at the following example.

In the above example, we’ve implemented the Singleton object as a closure, and thus it will be immediately invoked. It implements the getInstance method, which we can call to instantiate an object. In the getInstance method, we’re checking that if the instance property already holds the object that we are looking for, and if it exists, we won’t create another object. If it doesn’t hold any object, we’ll call the createInstance method to instantiate a new object and we’ll return it. In this way, it makes sure that only a single copy of an object will be created whenever you try to instantiate a new object.

To demonstrate it, we’re calling the Singleton.getInstance() method two times to check if it actually creates two different objects. In the console, you should be able to see that both objects are the same and they both print the exact same date and time.

So that’s how you can implement the singleton pattern in older versions of JavaScript. In the next section, we’ll see how you can implement it in JavaScript ES6+ versions.

Singleton Pattern in ES6+

In this section, we’ll see how you can implement the singleton pattern in JavaScript ES6+ versions. When it comes to the ES6 way, there are a couple of different ways that you could use to implement the singleton pattern.

ES6 Modules

If you’ve worked with ES6 modules, and if you already don’t know it, ES6 modules are singletons by default. Specifically, by combining modules and the const keyword, you can easily write singletons.

Let’s have a look at the following ES6 module code.

const currentDateAndTime = new Object("I am instantiated at:" + new Date().toLocaleString());

export default currentDateAndTime;

So now, whenever you import the above ES6 module, you’re guaranteed to get the same version of the currentDateAndTime object. Since the currentDateAndTime object is scoped to a module, it’s guaranteed that you’ll get the same object every time you include the above ES6 module in other files.

ES6 Classes

In this section, we’ll see how you can use ES6 classes to implement the singleton pattern.

Let’s have a look at the following example.

As you can see, we’ve implemented the DBConnection class, which we can use to instantiate a database connection object across the application.

To test this, we’ve instantiated two objects by calling the getInstance method of the DBConnection class. Then, we’ve compared both objects to see if they are the same. Since we’re using the singleton pattern, they should be the same, and the console.log statement will print true to confirm it. You could call this a lazy singleton object, since an object is only created when it’s needed and not during initial loading.

So that’s how you can define a class which implements the singleton pattern.

ES6 Classes With Modules

In this section, we’ll see how you can use ES6 classes along with modules to implement the singleton pattern.

Let’s have a look at the following example.

  constructor(conString) {}

  static getInstance(conString) {
    if (!this.instance) {
      this.instance = new DBConnection(conString);
    }

    return this.instance;
  }
}

const dbConObj = DBConnection.getInstance('mysqldb1');

export default dbConObj;

Creating an instance of a class which is scoped to a module is the best way to implement the singleton pattern. So if you’re working with ES6 modules, this is the recommended way to implement the singleton pattern with ES6 classes.

So that’s how you can implement the singleton pattern with ES6 classes and modules.

Conclusion

Today, we discussed the singleton pattern in JavaScript. Along with the basics, we went through a couple of examples to understand how it works with different versions of JavaScript.