The singleton design pattern is a popular one for JavaScript. It offers a means of organizing the code into a logical chunk that can be reached via a single variable. When a single instance of an object is required for the duration of an application, the singleton design pattern is utilized. The Singleton pattern in JavaScript can be used for a variety of purposes, including NameSpacing, which lowers the number of global variables on your page (preventing global space from becoming cluttered), organizing the code consistently, and improving the readability and maintainability of your pages.

The standard definition of the Singleton pattern emphasizes these two ideas:

  • A class should only be permitted to have one instance, and
  • We ought to make that one instance accessible from anyone in the world.

Let me explain the singleton pattern in the context of JavaScript:

Encapsulation is the process of using an object to give a namespace to a collection of related methods and attributes. If initiating is permitted, it can only be done once.

Using object literals, we can generate singletons in JavaScript. There is another option, which I will discuss in my subsequent piece.

The object itself, with all of its members (methods and attributes), plus the global variable used to access it, make up a singleton object. One of the main characteristics of the singleton pattern is that the variable is global, allowing the object to be accessible from anywhere on the page.

JavaScript: A Singleton as a Namespace

As I already mentioned, singletons can be used in JavaScript to declare namespaces. In JavaScript, NameSpacing plays a significant role in responsible programming. Because everything may be changed, and because it is quite simple to accidentally delete a variable, a method, or even a class without realising it. As an example of something that frequently occurs when working concurrently with another team member,

function findUserName(id) {

}

/* Later in the page another programmer
added code */
var findUserName = $('#user_list');

/* You are trying to call :( */
console.log(findUserName())

Namespacing your code inside of a singleton object is one of the greatest techniques to avoid unintentionally overwriting variables.

/*  Using Namespace */

var MyNameSpace = {
  findUserName : function(id) {},
  // Other methods and attribute go here as well
}

/* Later in the page another programmer
added code */
var findUserName = $('#user_list');

/* You are trying to call and you make this time workable */
console.log(MyNameSpace.findUserName());

Singleton Design Pattern Implementation

/* Lazy Instantiation skeleton for a singleton pattern */

var MyNameSpace = {};
MyNameSpace.Singleton = (function() {

  // Private attribute that holds the single instance
  var singletonInstance;  

  // All of the normal code goes here
  function constructor() {
    // Private members
    var privateVar1 = "Nishant";
    var privateVar2 = [1,2,3,4,5];

    function privateMethod1() {
      // code stuff
    }

    function privateMethod1() {
      // code stuff
    }

    return {
      attribute1 : "Nishant",
      publicMethod: function() {
        alert("Nishant");// some code logic
      }
    }
  }

  return {
    // public method (Global access point to Singleton object)
    getInstance: function() {
      //instance already exist then return  
      if(!singletonInstance) {
        singletonInstance = constructor();
      }
      return singletonInstance;           
    }           
  }

})();   

// getting access of publicMethod
console.log(MyNamespace.Singleton.getInstance().publicMethod());

The singleton that was used above is simple to comprehend. The static getInstance() method of the singleton class returns a reference to the single singleton instance, which the singleton class keeps as a static reference.


Recommended Posts

View All

What is the first class function in JavaScript ?


Learn about first-class functions in JavaScript! Find out what they are, how they work, and how they can be used to enhance your coding skills.

What is the Temporal Dead Zone in JavaScript?


The time frame in which access to the let and const declarations is prohibited is known as the Temporal Dead Zone.

JavaScript Program to Check if An Object is An Array


The function toString method?from Object.prototype is the best approach to determine whether an object is an instance of a given class or not.

4 Ways of Passive Income for a Programmer


Everyone wants to make extra money, but owing to time limits and jobs, we can't devote more time to it.. Find out how to become a programmer who makes...

What is JSON? Know how it Works with Examples


Learn what JSON is and how it works with examples in this comprehensive guide. Discover the basics of JSON syntax, its applications, and why it has be...