To continue the Design pattern series in Javascript, today I will introduce a very famous design pattern – Singleton pattern.

I. Introduction

The singleton pattern is known as a design pattern so that only one object of a class will be born in the whole system. In classical programming languages, Singleton can be implemented by declaring in the class a method used to initialize a new object provided that no object of that class has been created before. In case an object has been initialized earlier, that method will return a reference to that object.

Singleton is useful when used to manage restricted resources or to monitor the entire state of the system. A specific example is the database connection pool, which will manage all database connections of the entire system and notify when any connection is lost. Or another example is the volume management, can not every time adjust the volume you create a new instance of the Volumn class, right? Those are the cases where we should use Singleton.

The requirement with a singleton is:

Singleton must be immutable with the code that uses it, and there must be no risk when we create a new instance from that class.

II. Singleton in Javascript

1. The classic way

Previously, implementing Singleton in Javascript was quite difficult, we had to use closures and immediately invoked function expressions. Here is an example for a (quite simple) Singleton written in this way:

Here, UserStore will be the result of immediately invoked the above function – an object has two accessible functions, but does not allow direct access to its data.

In general, the above code is quite confusing and confusing, along with that it does not have the immutability that we need when implementing a singleton. We can change the returned functions, or even redefine even the UserStore.

2. Use ES6

With the update of ES6, we can write Singleton more concisely and more correctly with the requirements set out.

Let’s start with a simple implementation:

As you can see, the code above has become a lot easier to read. But the highlight of this code is that the UserStore here is immutable: with the use of const, in the following code, we can not redefine the UserStore anymore, and along with that is the use of the Object.freeze (UserStore), then the methods in the UserStore will be preserved.

Above, we have turned UserStore into a literal object. In most cases, using a literal object is concise and most readable. But there are times when we need to use the power of traditional classes.

Here’s how we implement Singleton in ES6 in a Class manner:

This is a bit more verbose than using the literal object, and our example is too simple for us to see the effect of using a class. But there is an effect we can see immediately that if this is the front-end code, and your backend is written in Java or C # then we can reuse the design pattern (not only Singleton). Write in the backend to share with the front-end to increase the performance of your team.

III. The end

The above are just very basic examples of Singleton in Javascript. Singleton’s application is very much in practical applications, so you should experience to understand its power.

This article is referenced from several sources:

1. https://www.sitepoint.com/javascript-design-patterns-singleton/
2. https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript