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 Java script)
2. Function to Build Module Pattern. (Encapsulation in Java script)
3. Function to avoid Global Variable Pattern. (Anonymous function in Java script)

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 you browser window, open the console window in 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

<script>
    //Function as abstraction
    var Do = function() {
        console.log("Do is Called !!!");
    }
    var DoSomething = function(f) {
        console.log("Before Do function executed !!!");
        try {
            f();
        } catch (ex) {
            console.log(ex)
        }
        console.log("After Do function executed !!!");
    }
    DoSomething(Do);
//End of Abstraction

</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 DoSomething function. While calling, I only call 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 usng this pattern while writing a JavaScript code.

Let’s jump into demo. 

//Function to Build Module
var Do = function() { //This is Global variable
    var Job1 = function() { //This is Local varibale.
        console.log("Job1 is Called !!");
    };
    var Job2 = function() {
        console.log("Job2 is called !!");
    };
    return {
        process1: Job1,
        process2: Job2
    };
};
var objDo = new Do();
objDo.process1();
objDo.process2();
//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 Do 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 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 Invoked Function (IIF).

Let’s see this in demo.

var DoMain = function() { //This is Global variable.
    var Do = function() {
        var Job1 = function() { //This is Local varibale.
            console.log("Job1 is Called");
        };
        var Job2 = function() {
            console.log("Job2 is called");
        };
        return {
            Process1: Job1,
            Process2: Job2
        };
    };
    var objDo = new Do();
    objDo.Process1();
    objDo.Process2();
}
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 as 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 previous program.

Now, what do you think ? Is there something new or not ?

Yes….no.. not sure .... ?

Let's see the new thing below.

//Anonymous function or IIF function
(function() {
    var DoMain = function() { //This is Global variable.
        var Do = function() {
            var Job1 = function() { //This is Local varibale.
                console.log("Job1 is Called");
            };
            var Job2 = function() {
                console.log("Job2 is called");
            };
            return {
                Process1: Job1,
                Process2: Job2
            };
        };
        var objDo = new Do();
        objDo.Process1();
        objDo.Process2();
    }
    DoMain();
}()); //This is IIF block which immediate by it self.// This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

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 functions are basically called Immediately Invoked function (IIF) in JavaScript. The IIF function gets executed immediately after DOM element is loaded.

Note - Basically, this type of pattern is used in case of developing plug-in. 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.