Lately wrote about Singleton Pattern in JavaScript after which thought of writing few lines about the famous module pattern.

As per the textbook definitions :

Module pattern is a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language that does not support it, or only supports it, partially.

Putting it in a simple equation Creational Pattern + Structural Pattern => Module Pattern

Things to know before diving into Module Pattern in Javascript :

• Closures.

• Immediately invoked function expression.

Closures :

Simply put function + environment in which that function was created => Closures i.e a function together with a referencing environment for the non-local variables of that function.

When a function is defined in another function and it has access to the outer function's context even after the outer function returns, this helps to implement closures in javascript.

Simple Closure example :

function greet(wave) {
  return function say(name) {
    console.log(wave+" "+name);
  }
}
 
var greeter = greet("Hello");
greeter("Hemanth"); // Would log "Hello Hemanth"
 
// Or 
 
(greet("Hello")) ("Hemanth");
(greet("Hello")) ("World");

Did you notice ?

• greet() is a function generator pattern.

• greet() receives wave and returns a function say().

• say() receives name, but still has access to the wave var, that was received by greet().

• greet("Hello")) ("Hemanth"); and (greet("Hello")) ("World"); Both are closures and they share the same body, but different environment!

Immediately invoked function expression :

IIFE or self-invoking functions, there are many ways to doing this, below are some bad ways :

!function(){
   console.log("immediately invoked!");
}();
 
//or
 
+function(){
   console.log("immediately invoked!");
}();
 
//or
 
!1%-+~function(){
   console.log("immediately invoked!");
}();
 
//or
 
~function(){
   console.log("immediately invoked!");
}();
 
//or any other sick sytax!

Students from Douglas Crockford school would prefer to code IIFE as below :

( function() {
    console.log("Immediately Invoked!");
}());

In javascript whenever there is a bare function keyword, the interpret expects a function name, or an assignment, but here both are not present, it's just created and invoked in a closure!

The Module pattern:

A pattern in which a function or an object provides an interface but hides and state and implementation (encapsulation) is called as a module pattern.

The module pattern makes use of function scope and closures to create a relationship that are binding and private, if you notice closely, IIFE are themselves Module Patterns!

An example from jQuery source :

( function(window,document,undefined){
    /* Some code here */
})(window,document)();

Notice that only window and document are passed, but the third argument is undefined, in case some one defined undefined in the global scope!

So finally Module pattern is majorly used in :

• Encapsulating data and behavior.

• Producing secure objects.

• Loading code into a function with scoped parameters.

• Importantly shadowing off the global parameters!

Hope one enjoys "The Module Pattern", happy hacking!

Extras :

Gohead and read the bleow, if you need more info about this pattern :

• Benalman on IIFE

• In-depth article about the module pattern that you might want to skim.