Design Patterns in JavaScript, Part 1 | 2 | WebReference

Design Patterns in JavaScript, Part 1 | 2

Design Patterns in JavaScript, Part 1

Singleton Pattern

Imagine you have an object that is used purely as a utility: it doesn't have any business logic, nor does it contain data that may need to be changed. It's only purpose in life is to provide functionality that might be needed by other parts of a program. Do you really need to create a new instance of this object every time this functionality is needed? The answer is no. If you had just one instance of the object, it would work just fine.

The singleton pattern solves this problem by defining a means of controlling the number of instances that can be created for a given class. Basically, a getInstance() method is defined. Whenever the developer needs an instance of the object, this method is called. There is a static property that holds an instance of this class. When getInstance() is called, it first checks the property to see if an instance already exists. If it does, then that instance is returned, otherwise a new instance is created, stored in the property, and then returned. In JavaScript, it looks something like this:

function MyClass() {
    this.myproperty = "hello world";

MyClass.__instance__ = null;  //define the static property

MyClass.getInstance = function () {
    if (this.__instance__ == null) {
        this.__instance__ = new MyClass();

    return this.__instance__;

After defining the simple class definition, a static property called __instance__ is defined and set to null. Inside the getInstance() method (which is also static), the property is checked to see if it's null, and if it is, a new instance is created and assigned to it. Then, the stored instance is returned as the function value. Developers can then use the following code:

var oMyObject = MyClass.getInstance();

You may have guessed at this point that you'll also want to suppress the ability of the developer to do this:

var oMyObject = new MyClass();

Your guess is completely correct, so you can add the same type of logic as with the factory pattern:

function MyClass() {
   if (MyClass.caller != MyClass.getInstance) {
       throw new Error("There is no public constructor for MyClass.");

   this.myproperty = "hello world";

As you can see, this is almost exactly the same as the code used in the factory pattern; the only part that has changed is the function being tested.

Key points to remember about the singleton pattern:

  • Only one instance of a class is ever created.
  • Unlike the factory pattern, the singleton pattern always creates an object of a specific class.
  • The singleton pattern should be used wherever the object would normally be created.


In this article, you learned about the creation patterns called factory and singleton. You learned that the factory pattern is used to return an appropriate object given specific constraints at runtime. This object will implement a specific interface that the developer will be using. You also learned that the singleton pattern can be used when you want to ensure that only one instance of a class can be created. Further, you learned how to mimic protected constructors in JavaScript for use with both of these patterns.

In Part 2 of this series, you'll learn about structural patterns and how they can make your development easier.

About the Author

Nicholas C. Zakas is a user interface designer for web applications and the author of Professional Ajax (Wiley Press, ISBN 0471777781) and Professional JavaScript for Web Developers (Wiley Press, ISBN 0764579088). Nicholas can be contacted through his Web site,, where he provides open source JavaScript libraries and tools.

Created: March 27, 2003
Revised: April 21, 2006