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 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.

Learn JavaScript Closures with Code Examples


Master JavaScript closures with code examples! Our comprehensive guide explains how closures work and how to use them in your code. Start learning now...

How do you decode or encode a URL in JavaScript?


Learn how to encode and decode URLs in JavaScript with this comprehensive guide. Avoid common mistakes and ensure data security. Read more now.

JavaScript Immediately-invoked Function Expressions (IIFE)


Learn about Immediately-invoked Function Expressions (IIFE) in JavaScript. Understand their benefits and how to use them effectively. Start coding now

What is the difference between Call, Apply and Bind


Looking to learn about the differences between Call, Apply, and Bind in JavaScript? This article breaks down the nuances of each method and provides c...