Blog

Javascript Module Pattern

Mike Lonnborg
June 13, 2017

Well you've made it this far. Welcome back. Here's how to reuse your C# skills and start structuring your JavaScript in a much more object orientated fashion.

The Module pattern will greatly help you keep code organized especially when dealing with larger and more complex user interfaces.

Creating a Module

To understand what a Module in JavaScript is, you'll need to visualize how the following concept works:

(function () {
  // code
})();

This is known as a IIFE or Immediately-Invoked-Function-Expressions, basically meaning this function runs as soon as it's defined. The idea here is to return only the properties we need access to in the global scope.

After creating this new scope, we need to namespace our code so that we can access any methods we return. Let's create a namespace for our Module.

var Module = (function () {
  // code
})();

We now have Module declared in the browsers global scope, which means we can call it wherever we like, and even pass it into another Module.

Private Methods

JavaScript doesn't have private functions or variables built in, but we can create a new scope within this namespace that emulates these concepts.

One of the most benifical features of coding like this is avoiding naming collisions. Especially if your writing monolithic Single Page Applications you need a way to define namespaces.

var Module = (function () {
  
var privateMethod = function () {
// do something
};

})();

The above example declares a function called privateMethod, which is locally declared inside the new scope. This function can't be accessed anywhere except inside of the Modules scope.

Public Methods

Typical Modules will use return and return an Object to the Module, to which the methods bound to the Object will be accessible from the Module’s namespace. A real basic example of returning an Object with a function as a property:

var Module = (function () {
  
    return {
        publicMethod: function () {
            // code
        }
    };

})();

As we're returning an Object Literal, we can call them exactly like Object Literals:

Module.publicMethod();

Are you seeing some object orientated programming like similaties?

This style can really help you when the code starts getting complex.

Performance considerations

It is not ideal to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).

var Module = (function () {

    function Module() {}

    var privateMethod = function () {
        return "Hello World";
    }

    TimeEntry.prototype.publicMethod = function () {
        //call private method
        alert(privateMethod);
    }

    return Module;

}());

Now you could type something like Module.publicMethod() and you would see an alert saying Hello World.

If your looking for ultimate customization abilities, code organazation and performance, utilizing the JavaScript Module Pattern is not a bad path to take.

Thanks for reading and keep it real! Hope to see you next time.