diff --git a/client/src/pages/guide/english/javascript/singleton-in-javscript/index.md b/client/src/pages/guide/english/javascript/singleton-in-javscript/index.md index f43b6b2813c..4eee40f8cbc 100644 --- a/client/src/pages/guide/english/javascript/singleton-in-javscript/index.md +++ b/client/src/pages/guide/english/javascript/singleton-in-javscript/index.md @@ -1,32 +1,19 @@ --- -title: Creating Singleton In JavaScript +title: Creating a Singleton in JavaScript --- -## Creating Singleton In Javascript Guide - -This Article is about creating the Singletons in Native(Pure) Javascript. This concept can be useful to maintain clean code. - - -If you want to maintain your code or somedata should remain same for through out your application this is the way you can get it done. - - -**Prior knowledge** -This is just to help you understand concept more easily otherwise you can always copy-paste code and change it accordingly. - -- Basic Javascript Syntax -- Javascript Functions -- IIFE in Javascript - +## Creating a Singleton in JavaScript +A singleton is an object that only allows one instance of itself to be created and allows a global point of access to it. The singleton design pattern can be useful if you have some data that should remain the same throughout your application. ### Let's Get Started -Let's create object with IIFE function that will get executed instantly to give us effect of Singleton. +Let's create an object with an immediately-invoked function expression (or _IIFE_, pronounced "iffy") that will give us the effect of a singleton. ``` -var singletonFn = (function(){ //Created IIFE Function +var singletonFn = (function(){ // Created IIFE Function var dataCounter = 0; - return { //Any code inside this return stuff will be accessible directly using objectname. + return { // Any code inside this return stuff will be accessible directly using objectname. getDataCounter: function(){ return dataCounter; @@ -36,25 +23,66 @@ var singletonFn = (function(){ //Created IIFE Function dataCounter = val; }, - fishNames: ["SimpleFish"] //Can create variables, Arrays, etc. + fishNames: ["SimpleFish"] // Can create variables, arrays, etc. } })(); -``` -Now to execute or use your singleton. in browser after saving this to js file and loading it. - -``` -console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0. +console.log(singletonFn.getDataCounter()); // 0 by default singletonFn.setDataCounter(20); -console.log(singletonFn.getDataCounter()); //20 as we assigned. +console.log(singletonFn.getDataCounter()); // 20 -console.log(fishNames); //will Print array with "SimpleFish". +console.log(singletonFn.fishNames); // ["SimpleFish"] ``` +Here's another example of a singleton: -Now with this knowledge you can define constants, enums or anything that needs to use multiple in project written here. or something like configurations. +``` +var Person; +(function() { + let instance; -Hope, This will help you write better codes. Happy Coding :) + Person = function(fName, lName, job) { + // constructor + this.fName = fName || 'John'; + this.lName = lName || 'Doe'; + this.job = job || 'Software Engineer'; + + if (!instance) { + instance = this; + } + + this.getFullName = function () { + return this.fName + ' ' + this.lName; + } + + this.getJob = function () { + return this.job; + } + + this.print = function () { + console.log(this.getFullName() + ' ' + this.getJob()); + } + + return instance; + } +})(); + +//initialize these "guys" but they point to the same object +var guy1 = new Person(); +var guy2 = new Person(); + +// proof that they're the same instance +guy1.print(); // "John Doe Software Engineer" +guy2.print(); // "John Doe Software Engineer" +console.log(guy1 == guy2); //true + +// modify guy2 and see that guy1 has changed as well +guy2.fName = 'Jane'; +guy2.lName = 'Doo'; +guy2.job = 'Project Manager'; +guy1.print(); // "Jane Doo Project Manager" +guy2.print(); // "Jane Doo Project Manager" +```