Singleton design pattern javascript.

It belongs to a family of creational design patterns. As name can suggest it has to do something with something single. Lets take a look on example so you can have some reference point and then I will explain further more. Let’s start.

var Singleton = (function () {
    var instance;
    function createInstance() {
        var object = {title: "I am object"};
        return object;
    };
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();
alert("Same instance? " + (instance1 === instance2)); // True

Does not look so hard, right ? So we have our Singleton variable to which we assign result of function call that is called immediately. Looks familiar no? Yes, you can notice modular design pattern, In which “instance” variable is hidden from outside and we are just exposing to clients “getInstance” method. What happen on “getInstance” call is that we check if instance is already created, if it is not we create it and return. On next call of get instance we get same instance we initialised before. This ensure that we always get only one instance. Lets take a look on little bit more complex example.

var Creature = function() {
    this.model = $('<div class="creature"></div>');
  }
  var CreatureService = (function() {
    var instance;
    var initialise = function() {
      var _creatures = [];
      var _map = $('#arena');
      var _move = function(creature, left, top) {
        creature.model.css('left', left);
        creature.model.css('top', top);
      };
      var createCreature = function() {
        var creature = new Creature();
        _creatures.push(creature);
        return creature;
      };
      var display = function(creature, left, top) {
        _map.append(creature.model);
        _move(creature, left, top);
      };
      return {
        create: create,
        display: display
      }
    }
    return {
      getInstance: function() {
        if (!instance) {
          instance = initialise();
        }
        return instance;
      }
    }
  })()
$(window.document).ready(function() {
    $('.creature-btn').on('click', function(e) {
      var cs = CreatureService.getInstance();
      var creature = cs.createCreature();
      cs.display(creature, Math.floor(Math.random() * 300),     Math.floor(Math.random() * 300));
    })
  });

Lets break it down. Notice method “initialise” in Creature Service it returns object, it is our singleton with some methods. When user will use our service , he has to call method “getInstance” we are exposing to him in order to access our service API singleton. You can see in our Creature Service we have variable with name “instance”. We are not assigning anything to variable, so it is undefined by default when creating service. When we call method “getInstace” on service we are checking if “instance” is created, if instance is not created we are calling “initialise” method that will return basically our service API with methods like “create” and “display”. “Array of creatures” stay hidden which is good we can expose some methods for retrieving, deleting creatures from array for example in future. I am simulating creation of our singleton on button click. So you can see we calling “getInstance” multiple times but we are getting always same instance. We always get one instance of our API on click.

Important is understand how is singleton created and what is purpose of singleton. How it is created we answered.

What is purpose of singleton? Imagine this example in bigger view. We have game where generation of creatures is handled from multiple places of system. We want coordinate creation, we want share same state across system. If we would initialise our service normally we would end up with many instances of our service we would have multiple arrays of creatures. We would have to share our state with some global variables. It would be hard to manage and it would not make sense. That’s why we are using singleton. Singleton is used in cases when system-wide actions needs to be coordinated from single place.

That would be all from singleton design pattern. Next I will continue with more creational design patters as factory and abstract factory.

In case of any question do not hesitate to contact me for more info visit my website: https://eincode.com

Happy Coding!

Filip