Understanding the Singleton Pattern in ES6 Classes

Описание: Learn how the `Singleton` pattern works in ES6 classes and why two instances can be equal. Understand the concept clearly with code examples and explanations.
---
This video is based on the question https://stackoverflow.com/q/63510983/ asked by the user 'Aram Harutyunyan' ( https://stackoverflow.com/u/13679835/ ) and on the answer https://stackoverflow.com/a/63511138/ provided by the user 'DownloadPizza' ( https://stackoverflow.com/u/8997916/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Singleton with class in ES6

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Singleton Pattern in ES6 Classes

The Singleton Pattern is a design principle aimed at ensuring that a class has only one instance and provides a global point of access to it. This pattern is commonly used to manage resources such as database connections or configurations in an application. While the concept is straightforward, many developers may get confused about how it works in practice, especially when it comes to ES6 classes in JavaScript.

The Singleton Code Explained

Let's take a look at a simple example of a Counter class that follows the singleton design pattern:

[[See Video to Reveal this Text or Code Snippet]]

Why Do myCount1 and myCount2 Refer to the Same Object?

You might be puzzled by the console.log(myCount1 === myCount2) statement returning true. This can be explained through the following points:

Memory Reference:
When myCount1 and myCount2 are initialized using new Counter(), they both reference the same instance of the Counter class in memory. The instance is created the first time and stored in Counter.instance. When a second instance is created, the constructor checks if Counter.instance already exists. If it does, it returns the same instance rather than creating a new one.

Reference Equality:
In JavaScript (and many other programming languages), objects are compared by reference, not by value. This means that two variables are equal (===) if they point to the same object in memory. The condition here is akin to what we find in Java—with classes, two instances with the same data but different objects would not be considered equal.

Comparative Example:
To illustrate this, let's compare the singleton behavior with two simple objects:

[[See Video to Reveal this Text or Code Snippet]]

Each time you create an object using {}, you get a distinct object in memory. However, with our Counter class, since we're ensuring that only one instance exists, both myCount1 and myCount2 point to that single instance.

Conclusion

The singleton pattern is a powerful tool when used correctly, especially when you want to ensure that certain resources are consistently referenced throughout your application. Understanding how this principle works in ES6 classes can help you manage your code more efficiently and avoid the pitfalls of creating multiple instances when only one is needed.

Using class, constructor, and controlling instance creation provides a seamless way to implement the singleton pattern. As demonstrated with our Counter class, by returning the same instance of an object, we can effectively share state and behavior across our application.

So next time you declare a class intending to follow the singleton pattern, remember that you're ensuring that all references point to a shared object in memory—leading to the effective management of resources, consistency in state, and cleaner code overall.