Post
Ask Question

Overview Of Patterns In JavaScript

Introduction

 
In JavaScript, we have different types of patterns to write our code. All web developers write many JavaScript codes every day and we do not know how clean and safe our code is. So today, in this article, I am going to tell you about basic JavaScript Patterns which will help you write an effective JavaScript code; and we are also going to see many OOPs concepts while we go through the different patterns.
 
Background
 
Let’s start a deep dive into JavaScript Patterns.
 
We have three types of patterns in JavaScript.
  1. Function as Abstraction Pattern. (Abstraction in Javascript)
  2. Function to Build Module Pattern. (Encapsulation in Javascript)
  3. Function to avoid the Global Variable Pattern. (Anonymous function in Javascript)
Let’s see one by one with live examples.
 

"Function as Abstraction" Pattern

If you are coming from C# language or any object-oriented programming language background, then we probably all know about abstraction.
 
Let me once again quickly remind you!
 

Abstraction 

 
Hide the details and providing only what is necessary.
 
To understand the above pattern, let’s jump to our demo.
 
Note
 
Here, I am not going to create any project in Visual Studio. You can use any editor to write this simple JavaScript function or else, you can directly open your browser window, open the console window in the browser by pressing F12, then press CTL+L in Chrome and CTL+Shift+L in Firefox to clear the console window and paste the below code.
 
Abstraction Partern Demo
  1. <script>      
  2.     //Function as abstraction      
  3.     var Do = function() {      
  4.         console.log("Do is Called !!!");      
  5.     }      
  6.     var DoSomething = function(f) {      
  7.         console.log("Before Do function executed !!!");      
  8.         try {      
  9.             f();      
  10.         } catch (ex) {      
  11.             console.log(ex)      
  12.         }      
  13.         console.log("After Do function executed !!!");      
  14.     }      
  15.     DoSomething(Do);      
  16. //End of Abstraction    
  17.     
  18. </script>   
Explanation
 
In the above program, we have declared two variables called Do and DoSomething. Using these two variables, I declare two functions.
 
So, what I am doing here is hiding the details of Do function inside the DoSomething function. While calling, I only call the DoSomething function which automatically gets the Do function executed. 
 

Advantage

 
Advantage of this pattern is that if you want to execute some block of code before and after the specific JavaScript function executed, then it’s very helpful.
 

"Function to Build Module" Pattern 

 
In this pattern, we are going to understand how we do encapsulation in JavaScript while writing function.
 
Note- It’s very useful pattern while doing JavaScript program. I recommend using this pattern while writing a JavaScript code.
 
Let’s jump into a demo. 
  1. //Function to Build Module    
  2. var Do = function() { //This is Global variable    
  3.     var Job1 = function() { //This is Local varibale.    
  4.         console.log("Job1 is Called !!");    
  5.     };    
  6.     var Job2 = function() {    
  7.         console.log("Job2 is called !!");    
  8.     };    
  9.     return {    
  10.         process1: Job1,    
  11.         process2: Job2    
  12.     };    
  13. };    
  14. var objDo = new Do();    
  15. objDo.process1();    
  16. objDo.process2();    
  17. //End Build Module    
Explanation
 
In the above program, I have declared a function using Do variable. Inside this function, I have again declared another two functions using local variables, called as Job1 and Job2. Here, I declared two functions but you can declare as many as you require.
 
Hence, these Job1 and Job2 are local under this Do function; so we cannot access them outside of Doing function. Here, Do has encapsulated both Job1 and Job2 function.
Well, here it’s important to understand how I am calling Job1 and Job2. What I am doing is that I am returning Job1 and Job2 functions from Do function.
 
Always remember every function in JavaScript always returns some value by default.
 
To call the function, we need to create an object of Do function, and using this object, I can call all the functions to define under Do.
 

Advantages

  • Providing security over our code.
  • More clean code.
  • Avoid duplicate code and write the code specific to our page/view.
Based on my experience
 
The last point I mentioned above is “Avoid duplicate code and write the code specific to our page”. This is really useful. Especially, if you are working as a web developer, you might understand this point very clearly.
 
In my working life, what I see is that many programmers write the function but while giving name, we are not sure whether the name is used by someone else or not. So, if we follow the above pattern, we will never ever face this problem.
 

"Function to avoid Global variable" Pattern

In this pattern, we are going to see how to write a Global function. Also, we will Immediately Invoke Function (IIF).
 
Let’s see this in the demo
  1. var DoMain = function() { //This is Global variable.    
  2.     var Do = function() {    
  3.         var Job1 = function() { //This is Local varibale.    
  4.             console.log("Job1 is Called");    
  5.         };    
  6.         var Job2 = function() {    
  7.             console.log("Job2 is called");    
  8.         };    
  9.         return {    
  10.             Process1: Job1,    
  11.             Process2: Job2    
  12.         };    
  13.     };    
  14.     var objDo = new Do();    
  15.     objDo.Process1();    
  16.     objDo.Process2();    
  17. }    
  18. DoMain();    
Explanation
 
If we analyze the first pattern program to this program, what I did in this is I wrote all the code inside one Global variable called a DOMain and made it as a function.
 
So it’s easy to understand that I am just calling the DoMain() function and we get the same output as the previous program.
 
Now, what do you think ? Is there something new or not ?
 
Yes….no.. not sure ....?
 
Let's see the new thing below
  1. //Anonymous function or IIF function    
  2. (function() {    
  3.     var DoMain = function() { //This is Global variable.    
  4.         var Do = function() {    
  5.             var Job1 = function() { //This is Local varibale.    
  6.                 console.log("Job1 is Called");    
  7.             };    
  8.             var Job2 = function() {    
  9.                 console.log("Job2 is called");    
  10.             };    
  11.             return {    
  12.                 Process1: Job1,    
  13.                 Process2: Job2    
  14.             };    
  15.         };    
  16.         var objDo = new Do();    
  17.         objDo.Process1();    
  18.         objDo.Process2();    
  19.     }    
  20.     DoMain();    
  21. }()); //This is IIF block which immediate by it self.// This is just a sample script. Paste your real code (javascript or HTML) here.    
  22. if ('this_is' == /an_example/) {    
  23.     of_beautifier();    
  24. } else {    
  25.     var a = b ? (c % d) : e[f];    
  26. }    
Explanation
 
There is no variable that I defined to store the function; rather, I defined a self-function which is similar to the anonymous function in C# language.
 
This type of function is basically called Immediately Invoked function (IIF) in JavaScript. The IIF function gets executed immediately after the DOM element is loaded.
 
Note- Basically, this type of pattern is used in case of developing plug-ins. We see many plug-ins having this pattern, such as - jquery.flowchart.Js plugin.
 

Conclusion

 
That's it. This was all about our JavaScript patterns and their purpose of use.
 
The above explanation is based on my own experience and learning, so if you found any mistake in that or any example not working, then feel free to give your feedback.
 
Happy Coding.


Similar Articles