JavaScript: global variables vs singletons

If singleton is available globally, how is it different from a global variable that has a single instance?

Global variables are available to everyone, globally.

If singletons are accessible to the application globally but can only have one instance, how are they different from a global variable that can be only be initialized once, lets say by making it static?

What is a singleton?

Singleton is an object which can only be instantiated once.

A singleton pattern creates a new instance of the class if one doesn’t exist. If an instance already exists, it returns the reference to that object.

Here is a simple singleton you may use everyday:

var user = {
  name: 'Shruti Kapoor',
  location: 'SF',
  intro: function() {
    return this.name + ', ' + this.location
  }
}

Technically speaking, object literals in JavaScript are singletons. Think about it! An object occupies a unique memory location and once it is created, there can be no other object like this. Every time we call the object user, we are essentially returning a reference to this object. Hence, a singleton!

All the single tons! All the single tons!

What is a global variable?

A variable declared outside a function scope is a global variable. In this sense, the variable is in a global context. Also remember, assigning a value to an undeclared variable makes it a global variable by default.

What do you think gets logged in the console here?

sayHello();
console.log('name', name);
function sayHello() {
  name = 'Shruti Kapoor';
  console.log('My name is ', name);
}

Even though name is assigned inside the function sayHello , because it is an undeclared variable, the whole script has access to the value of name . In this case console log is

My name is Shruti Kapoor
name Shruti Kapoor

How is singleton different than global variable/class?

The Singleton pattern is basically just a lazily initialized global variable. It ensures that the class has one instance and that instance is globally accessible. However, do not confuse Singleton design pattern with single instances. The Singleton design pattern is a specific type of single instance with the following characteristics:

1. Accessible via a global, static instance field;
2. Created either on program initialization or upon first access;
3. No public constructor (cannot instantiate directly);
4. Never explicitly freed (implicitly freed on program termination).
5. Can be sub-classed.

When should I use singleton?

Singletons should be used when

1. You can only have a single instance
2. You need to manage the state of this instance.
3. You do not care about initialization of this instance at runtime.
4. You need to access it across your app.

Beware, singletons are considered an anti-pattern and make unit-testing extremely difficult.

What does singleton class in JavaScript look like?

Here is an excellent example of singleton as an IIFE from Rob Dodson’s article:

var User;
(function() {
  var instance;
User = function User() {
    if (instance) {
      return instance;
    }
instance = this;
// all the functionality
    this.firstName = 'John';
    this.lastName = 'Doe';
return instance;
  };
}());

And that’s it! There is a lot of debate around singletons so be cautious where you use singletons.

Now, go ahead make some singletons!

Useful resources:

1. JavaScript Singleton Design Pattern
2. So singletons are bad

If this post was helpful, sign up for my JavaScript newsletter.