Implementing the Singleton Pattern in JavaScript ES6+: A Step-by-Step Guide

In this article, I will show you how to implement the Singleton pattern in JavaScript.

If you are a full-stack JavaScript developer, you know that JavaScript is a powerful language that you can use to build amazing websites. On the other hand, if you're only using JavaScript for front-end form validation and AJAX calls, you've only scratched the surface of what it can do, and it's much more than that. Since it is a feature-rich language, there are many frameworks built on top of it.

In this article, we will discuss a useful programming pattern in object-oriented JavaScript: the singleton pattern. Singleton objects are created only once in the global scope while the application is running. They are used to share resources or coordinate between different parts of the application.

What is singleton pattern?

Let’s take a look at the definition of the singleton pattern:

In software engineering, the singleton pattern is a software design pattern that limits the instantiation of a class to a "single" instance. This is useful when only one object is needed to coordinate the operation of the entire system.

When you develop an application, sometimes you need to create global objects across the application. Specifically, you want an object that is instantiated only once for the entire request's lifetime. For example, it might be a database connection object that you want to keep global across requests, since you don't need to create multiple database objects for each request. In this case, the singleton pattern is very useful because it guarantees that only a single copy of the object will be instantiated.

Quick Look: Singleton Pattern in Older Versions of JavaScript

In this section, we’ll take a quick look at how to implement the singleton pattern in older versions of JavaScript.

Let’s take a look at the following example.

In the above example, we implemented the Singleton object as a closure, so it will be called immediately. It implements the getInstance method, which we can call to instantiate an object. In the getInstance method we check if the instance property already has the object we are looking for, if it does we don't create another object. If it doesn't contain any objects, we call the createInstance method to instantiate a new object and then return it. This way it ensures that only a single copy of the object is created whenever you try to instantiate a new object.

To demonstrate it, we call the Singleton.getInstance() method twice to check if it indeed creates two different objects. In the console you should be able to see that both objects are identical and they both print the same date and time.

This is how to implement the singleton pattern in older versions of JavaScript. In the next section, we'll see how to implement this in the JavaScript ES6 version.

Singleton pattern in ES6

In this section, we will learn how to implement the singleton pattern in the ES6 version of JavaScript. When it comes to the ES6 way, there are a few different ways you can implement the singleton pattern.

ES6 module

If you've used ES6 modules, and you didn't know it yet, ES6 modules are singletons by default. Specifically, you can easily write singletons by combining modules and the const keyword.

Let’s take a look at the ES6 module code below.

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

export default currentDateAndTime;

So now, whenever you import the above ES6 module, you are guaranteed to get the same version of the currentDateAndTime object. Since the currentDateAndTime object is module-scoped, you are guaranteed to get the same object every time you include the above ES6 module in another file.

ES6 Classes

In this section, we will learn how to use ES6 classes to implement the singleton pattern.

Let’s take a look at the following example.

As you can see, we have implemented the DBConnection class that we can use to instantiate database connection objects across applications.

To test this, we instantiate two objects by calling the getInstance method of the DBConnection class. We then compare the two objects to see if they are the same. Since we are using singleton pattern, they should be the same and the console.log statement will print true to confirm. You could call this a lazy singleton object because the object is only created when needed and not during the initial load.

This is how to define a class that implements the singleton pattern.

带有模块的 ES6 类

在本节中，我们将了解如何使用 ES6 类和模块来实现单例模式。

让我们看一下下面的例子。

  constructor(conString) {}

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

    return this.instance;
  }
}

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

export default dbConObj;

创建作用域为模块的类的实例是实现单例模式的最佳方法。因此，如果您正在使用 ES6 模块，这是使用 ES6 类实现单例模式的推荐方法。

这就是如何使用 ES6 类和模块实现单例模式。

结论

今天，我们讨论了 JavaScript 中的单例模式。除了基础知识之外，我们还通过几个示例来了解它如何与不同版本的 JavaScript 配合使用。

The above is the detailed content of Implementing the Singleton Pattern in JavaScript ES6+: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!