Alternatives to singletons in javascript
Singletons are quite popular on this blog. A lot of people are coming here from that search. In a sense, I’m happy to have such a considerable traffic from google. On the other hand, I’m not proud that this post is my most popular. Why? Because I don’t believe in singletons in javascript. This concept belongs to more object-oriented languages, even though we can have an half-baked OO in javascript. Singletons are just too much of a hassle compared to a simpler solution.
What is a singleton?
A singleton is a design pattern. When instanciating a singleton class, it will always return the same instance of the class. You can’t create more than one instance of the class no matter how many time you call the “new” operator.
Some people think that singleton shouldn’t be a pattern. Personally, I never use it in javascript because they are not “javascript-friendly” (in fact, the whole concept of OO is not javascript-friendly). Here’s what I do.
The alternatives
Just between you and me, when we want to use a singleton, it’s probably because we want to encapsulate a certain part of the code to be easier to read and understand.
Alternative #1 : simple and clean
The easiest way of encapsulating functionalities is to create an object. Sure, it’s “untyped” but types don’t mean a lot in a dynamic languge like javascript. You have to learn to work with it. Here’s how I do it (view on github).
Alternative #2 : more complex
Let’s say you have a big project and you want to really separate every functionalities in “namespaces”, it would be easier to use a more complex technique.
You can take a look at jsKata where every library I wrote has its own namespace (jsKata.undo or jsKata.timezone). jQuery is also using this technique (source code).
Let’s say you have a 2 levels deep namespace but you use the alternative #1 as described ealier. You would end up with this (view on github).
As you can see at line #6, the reference to your msg variable is pretty long. If you have a lot of code, it would become redundant.
If you want to keep your code readable, it’s a good idea to use a self-invoking function like this (see on github).
Let’s study it line by line.
var instance = (function() {
//… code is here…
})();
This is the self-invoking part of the technique. You see that function(){} is in parenthesis. So the result of the parenthesis is a function object (and not the result of the function). After these parenthesis, there’s an empty set of parenthesis. It means that the object function in parenthesis is called.
var i = {
// … more code …
}
This creates a scope. At this moment, the i variable is used as a shorthand for myApplication.instance.
hello : function() {
alert(i.msg);
}
As you can see, we can use i in the hello function to get the msg variable.
return i;
Finally, by returning i as the result of the function call, it gets assigned to myApplication.instance.
No more singletons please
When you know these techniques, I can’t see any reason of using singletons anymore. Forget about using javascript as if it was a complete object-oriented language and start using it as it is.