[{"_1":2,"_45":-5,"_46":-5},"loaderData",{"_3":4,"_5":6,"_44":-5},"root","G-KMVGQ3VRKN","pages/blog/pagination",{"_7":8,"_29":30},"items",[9],{"_10":11,"_16":-7,"_17":15,"_18":19,"_20":21,"_22":23,"_26":-7,"_27":28},"link",{"_12":13,"_14":15},"href","/writings/2018-12-05-singleton-in-javascript","label","Singleton in JavaScript","shortTitle","title","date",["D",1543968000000],"children","A quick look on singleton pattern and its implementation in JS","tags",[24,25],"javascript","design-patterns","youtube","cnt","

Singleton is one of the better-known patters in programming. While, by some,\nseen as an anti-pattern, it is worth knowing something about it.

Creating such class isn't really hard, but has some caveats. Firstly, its\nconstructor has to return the instance. Secondly, such class cannot be extended\nnor modified by any ancestor. Generally speaking, extending will only link to\nthe initial instance.

So, how to write a singleton class? First, we start like normal:

class SingletonClass {\n  constructor() {}\n}

This is a standard class notation in ES2015 format. Please note the name and\nremember it. While creating anything, and especially a singleton class, choose\nthe name wisely. Now I know that naming things is hard, but here we will be\nusing the name rather that the this.

Second step is to define the instance key within the class. Please note that\nthis is static value, it refers to the class, not to the instance of the\nclass.

class SingletonClass {\n  constructor() {\n    if (!!SingletonClass.instance) {\n      return SingletonClass.instance;\n    }\n\n    SingletonClass.instance = this;\n\n    return this;\n  }\n}

Let's do some explaining. The constructor starts with checking whether\nSingletonClass.instance exists. Why not this? Like I said earlier, we refer\nto the class. This is its static value, not related to an instance. If the\ncondition is met, it means that the class has been already created sometime ago\nand that old instance can be returned instead creating new one.

Next we're assigning SingletonClass.instance to this, meaning, we are\nbinding current instance to the class, coupling it.

Lastly, we return this. This can be confusing, but look up. We've returned\nSingletonClass.instance before. Without this return, it would also work, but\nit's a good practice to keep consist return from a method.

Okay, this is all fine and well, but how can we prove that creating new\ninstances is not possible? Well, good question. Let's enhance our class with\nsomething to do, for example, let it return the name we give it (yeah,\nprogramming!).

class SingletonClass {\n  constructor(name = "") {\n    if (!!SingletonClass.instance) {\n      return SingletonClass.instance;\n    }\n\n    SingletonClass.instance = this;\n\n    this.name = name;\n\n    return this;\n  }\n\n  getName() {\n    return this.name;\n  }\n}

Let's create some instances now:

const instanceOne = new SingletonClass("One");\nconst instanceTwo = new SingletonClass("Two");\nconst instanceThree = new SingletonClass();

Okay, simple as that. So, now we can log it:

console.log(`Name of instanceOne is "${instanceOne.getName()}"`);\nconsole.log(`Name of instanceTwo is "${instanceTwo.getName()}"`);\nconsole.log(`Name of instanceThree is "${instanceThree.getName()}"`);

Can you guess, what those will log out?

\n
Name of instanceOne is "One"
\nName of instanceTwo is "One"
\nName of instanceThree is "One"
\n

Why is that? Because it's singleton class! It always uses the one instance that\nwas created in the beginning. Try changing the order, move instanceThree above\ninstanceOne. What are those console.logs saying now?

Another thing is extending. This is a very popular feature of object-oriented\nprogramming. Popular, misused, abused etc. Singletons, technically, can't be\nextended, they don't have any ancestors. But, seeing is believing. Let's create\na new class that will extend the old one:

class Extending extends SingletonClass {\n  shoutName() {\n    return this.name.toUpperCase();\n  }\n}

So, normally Extending should have two — getName derived from\nSingletonClass, and shoutName, it's own. Let's see:

const A = new Extending();\n\nconsole.log("getName" in A);\nconsole.log("shoutName" in A);

What do you see in the console?

\n
true
\nfalse
\n

Why? Because the instance was created sometime ago, while we defined\ninstanceOne. The extension process can't even start, because SingletonClass\nconstructor returns the instance first thing.

The only way to extend a singleton class is to do it before any instance is\ninitiated. But this is an extreme anti-pattern, because you can't be sure that\nsomeone will not use the base class before you do the extending. Sure, you can\nextend it right after the declaration, but... why?

So, we now know how to create a class that has only one instance. Is it useful?\nIf you want to use the benefits of a class but without allowing to use it\nfreely. Sounds sarcastic, but isn't. Think of a logger. Why would you need to\ncreate multiple loggers? You should just use one, and it can be build using\nsingleton. Think of caching database. You want all the data to be available\nwithout thinking of sharing the state somewhere.

The entire code is available at my\nCodePen, along with\nan additional check for multiple instances for the non-believers.

","pagination",{"_31":32,"_41":40,"_42":-7,"_43":39},"pages",[33,34,35,36,37,38,39,40],1,2,3,4,5,6,7,8,"currentPage","nextPage","prevPage","layouts/Main","actionData","errors"]

Singleton in JavaScript

Book a 30-min Call

Write or call me