Learn about Singleton & Factory Pattern Design in JavaScript

In this tutorial we’re going to learn about two design patters: The Singleton and the Factory Pattern. The singleton is a design pattern in JavaScript which is used when we know we have only one object to be created of a specific type.

We’ll start our demonstration by creating an object character for a game. We’ll firs check if the Dwarf object already exists with typeof.

function Dwarf(name){
if (typof Dwarf.instance === 'object'); {
 return Dwarf.instance;
}
this.name = name;
Dwarf.instance = this;
return this;

If the Dwarf object already exists, our if statement would yield true and then we’d return the Dwarf object. Otherwise, we have to create the first Dwarf object.

Let test out our new singleton.

Var dannydward = Dwarf('danny');
document.write ('the dwarf is' + dannydwarf.name + '<br/>');

We’re going to verify that this works by creating another dwarf:

var timmydwarf = Dwarf('timmy');
document.write ('the dwarf is' + timmydwarf.name + '<br/>');

If we run this, we can see that the name stays danny (output ‘the dwarf is danny’). So we can only create on Dwarf type, and that’s a rough overview of how the singleton pattern works.

Lets move on to factory patterns. A factory pattern can be used to generate different objects, on request.  Lets stick with our game analogy and say we want to generate weapons for the different characters, and they each will have a description that would be passed on as a parameter.

function arrow(des){
this.type = 'arrow';
this.material = des.material;
this.style = des.style;
this.magic = des.magic;
}
function gun(des){
this.type = 'gun';
this.material = des.material;
this.style = des.style;
this.magic = des.magic;
}

now, lets create a weapons factory that would generate specific types of weapons on demand.

The ‘class’ variable is actually an object.

function factory(){};
factory.prototype.make = function (des){
var wclass = null;
if (des.type === 'gun'){
wclass = gun;
}else if (des.type === 'arrow'){
wclass = arrow;
}else{
return false;
}
return new wclass(des);
}

In the last statement, we are defining a new weapon object for the user and passing in the description. So we are dynamically defining what type of weapon object we’re creating, and passing in the description. Now lets create an instance of the weapon factory:

var myfactory = new factory();

We will now create a new weapon object using the factory object, to which we will pass in the description as parameter:

var blader = myfactory.make({
type: 'arrow';
material: 'steel';
style:'celtic';
magic: 'true';
})

now lets print out some information about our weapon:

document.write(blader.type + " of type " + blader.style + " made of " + blader.material + "<br />");

So  in this tutorial, we’ve seen a way to use factory pattern to dynamically create objects inside JS. We’ve made a distinction between the singleton which is a  JS design pattern used when we know we have only one object to be created of a specific type and a factory pattern which is used when we plan to generate several different objects of the same type.