JavaScript - The Module Pattern
// JavaScript - The module pattern:
// Create an anonymous function expression that gets invoked immediately,
// and assign its 'return value' to a variable. This approach "cuts out the
// middleman" of the named `makeWhatever` function reference.
var counter = (function(){
var i = 0;
return {
get: function(){
return i;
},
set: function( val ){
i = val;
},
increment: function() {
return ++i;
}
};
}());
// `counter` is an object with properties, which in this case happen to be
// methods.
counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5
counter.i; // undefined (`i` is not a property of the returned object)
i; // ReferenceError: i is not defined (it only exists inside the closure)
myObject = (function(){
var netWorth; // private variable
var cry = function() { ... }; // private method
return {
birthYear: 1973, // public properties
birthDay: 17,
birthMonth: 2,
getAge: function() { return blah; } // public method
}
})();
Module Pattern in JavaScript use an IIFE, but instead of returning a function,
it returns an object instead of a Function (and is generally implemented as a
singleton). However, the object contains functions, and these functions,
because they are defined inside the outer function, they all have access to
the outer function's variables and arguments.
The Module Pattern approach is not only incredibly powerful, but incredibly
simple. With very little code, you can effectively namespace related methods
and properties, organizing entire modules of code in a way that both minimizes
global scope pollution and creates privacy.
function makeCounter() {
// The variable `i` is only accessible inside `makeCounter`.
var i = 0;
return function() {
console.log( ++i );
};
}
var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2
var counter2 = makeCounter();
counter2(); // logs: 1
counter2(); // logs: 2
// Note that `counter` and `counter2` each have their own scoped `i`.
// Each time that we invoke makeCounter(), the variable i is created, and it
// is that instance that is visible to the new function that get returned.
What is the module pattern?
// Create an anonymous function expression that gets invoked immediately,
// and assign its *return value* to a variable. This approach "cuts out the
// middleman" of the named `makeWhatever` function reference.
var counter = (function(){
var i = 0;
return {
get: function(){
return i;
},
set: function( val ){
i = val;
},
increment: function() {
return ++i;
}
};
}());
// `counter` is an object with properties, which in this case happen to be
// methods.
counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5
counter.i; // undefined (`i` is not a property of the returned object)
i; // ReferenceError: i is not defined (it only exists inside the closure)
Module Pattern in JavaScript use an IIFE, but instead of returning a function, it returns an object being returned instead of a Function (and is generally implemented as a singleton). However, the object contains functions, and these functions, because they are defined inside the outer function, they all have access to the outer function's variables and arguments.
The Module Pattern approach is not only incredibly powerful, but incredibly simple. With very little code, you can effectively namespace related methods and properties, organizing entire modules of code in a way that both minimizes global scope pollution and creates privacy.
page revision: 3, last edited: 14 Nov 2016 22:23