JavaScript Module Pattern

In software development programming languages Modules are an integral unit of application architecture and typically help to isolate units of code for a project both cleanly separated and organized. A module is a software component or part of a program that contains one or more routines. One or more independently developed modules make up a program.

An enterprise-level software application may contain several different modules, and each module serves unique and separate business operations.Modules make a programmer's job easy by allowing the programmer to focus on only one area of the functionality of the software application. Modules are typically incorporated into the program through interfaces.

A javascript tutorial source code repository
https://github.com/garywoodfine/JavaScriptTutorial
1 forks.
4 stars.
0 open issues.

Recent commits:

ES6 Modules, Gary Woodfine
Revealing Module Pattern samples and slight re-org, Gary Woodfine
Module Pattern samples, Gary Woodfine
Fixed immediatedly invoked function expression ont he fibonacci class, Gary Woodfine
Object constructor, Gary Woodfine

In this tutorial we'll explore the JavaScript Module design pattern. We'll discuss in detail why it is an important pattern to master and its relevant use cases.

In a previous post I discussed , JavaScript Arrays, and made use of Fibonacci.js module to return a Fibonacci sequence of numbers.

The Fibonacci.js is an example of the JavaScript Module Pattern. In this post I will discuss the JavaScript Module pattern, in more depth and provide reasons why it is the one of the most important JavaScript Design Pattern you should learn to improve the quality of the JavaScript software development and applications.

What is the JavaScript Module Pattern ?

The module pattern is probably the most widely used JavaScript Design Pattern due to the fact that it helps to provide structure and organisation to code bases.

Traditional Object Oriented programming languages like Java, C#, C++ , Python etc, make use of the Class object to create self contained and decoupled units of code, which can be treated as block boxes of functionality which can be enhanced, added and removed according to requirements.

A Module can be considered as similar to a Singleton Class in an object oriented language.

In a Module, all the variables defined are visible only in the module. Methods in a module have scope and access to the shared private data and private methods. Thus implementing a closure, as discussed later

The methods defined in a JavaScript Module are also known as Privileged methods.

JavaScript does not have a special syntax or object for this purpose, at least for language version prior to JavaScript 6. The module pattern provides us with an easy way to deal with scoping and convenient way to modularize our code.

Essentially the module pattern is a combination of several JavaScript design patterns:

Namespaces
Immediate functions
Private and public methods

Using the module pattern you can with very little code, effectively namespace related methods and properties, organise and create privacy for entire modules of code and minimise global scope pollution.

Closure

The Javascript module pattern enables the implementation of the closure principle providing the control of privacy in your methods so that third party applications or modules cannot access data in variables or overwrite it.

The JavaScript Module pattern privileged methods have scope to the other private variables and methods of the module.

What is a closure ?

In JavaScript all variables are accessible in global scope except variables that are declared within a function using the var keyword.

Variables declared in a function have access to the global scope and every other scope above the function that you are in. In other words an inner function has access to the variables that are within the function that wraps it.

Closures are a construct in the JavaScript language. In JavaScript, closures are created every time a function is created. Closures are useful because they let you associate some data with a function that operates on that data. Similar to object-oriented programming, where objects enable the association of data with one or more methods.

A closure is the combination of a function and the lexical environment within which that function was declared.
MDN - Closures

Creating a JavaScript Module

To understand the module pattern you'll need to understand the Immediately Invoked Function Expression (IIFE), which the function creates privacy. JavaScript doesn't really have privacy but creating a new scope emulates this when we wrap all our function logic inside them. The goal is then to only return only the parts we need, leaving other code out of the global scope.

/*
  Either of the following two patterns can e used to immediately invoke a function expression
  This uses the functions execution context to create privacy
 */
 
(function(){ /*Insert your code here */ }());   // Douglas Crockford recommends this approach
(function(){ /*Insert your code here */ })();   // This approach is also widely used

What we have done here is declare a function, which essentially calls itself immediately. This creates a new scope in which we can wrap all our function logic in, and we return only that parts we need.

After we have created a new scope , we can create a namespace for our anonymous Module. In my example I will be creating a Module to return a Fibonacci sequence of numbers, so I will create a Fibonacci namespace.

var Fibonacci = (function (){  //code will go here })();

Advantages of JavaScript Module Pattern

Reduces clutter with the global namespace
suports private data
Cleaner code for developers
Enables unit testability of code

Disadvantages of JavaScript Module Pattern

private methods are not accessible outside the module
Private methods are not extensible

Private Methods

JavaScript does not really have private methods, but by using the Module Pattern we can create them. Private methods are any functions that you don't necessarily want others to see or call outside of the scope they are declared in. Although you might think this about protection of your code, but in JavaScript this is not necessarily the concept. It has more to do with naming conflicts.

JavaScript makes it easy to define global variables that can hold all of the assets of your application. Unfortunately, global variables weaken the resiliency of programs and should be avoided.
Douglas Crockford - JavaScript the Good Parts

To declare a private function in a Module, we create a function which is locally declared inside the new scope. Attempting to access the function outside of the module , will result in an error to be thrown and the JavaScript application will break.

Eloquent JavaScript, 3rd Edition

A Modern Introduction to Programming

Marijn Haverbeke

Reflects the current state of JavaScript

Buy Now Read Review

var someModule = (function(){
    var privateMethod = function (){
        console.log('Who dares to disturb my slumber?');
    }
})();
 
 
console.log(someModule.privateMethod());

Using return

Typically Modules will use return and return an object to the Module, which will enable methods to bound to the object and accessible from the modules namespace. Essentially we return an Object Literal and we can call them exactly the same way.

var Genie = (function(){
    var onWake = function (){
        return 'Who dares to disturb my slumber?';
    };
 
    return{
        Wake: onWake()
    }
})();
console.log(Genie.Wake);

Locally scoped object literal

When developing a module, you may want some means to identify when you're calling external public methods and internal private methods. This can be really handy when you're developing large Modules i.e. Modules that that exceed 100 lines of code.

You may want to identify private method without have to check the return statement. In this instance we can create a locally scoped namespace within our Module.

var Genie = (function (){
 
    //local name space
    var Speak ={};
    //Declared with a var statement so must be private
    var onWake = function (){
        return 'Who dares to disturb my slumber?';
    };
 
    //public accessible method
    Speak.Wake =  function (){
        return onWake();
    };
 
    // Return the local namespace object
    return Speak;
})();
 
 
console.log(Genie.Wake());

Stacked locally scope Object Literal

Virtually the same as the previous example, but it uses more of traditional single object literal notation:

var Genie = (function (){
 
 
    //Declared with a var statement so must be private
    var onWake = function (){
        return 'Who dares to disturb my slumber?'
    };
 
    var onHungry = function (){
        return 'Feed me music , homeboy!'
    };
 
    //local name space
    var Speak = {
        Wake: function (){
            return onWake()
        },
        Hungry: function (){
           return onHungry();
        }
    };
   
 
    // Return the local namespace object
    return Speak;
})();
 
console.log(Genie.Hungry());
console.log(Genie.Wake());

Using a technique called the Revealing Module Pattern which is an enhanced design pattern to ensure all methods and variables are kept private until they are explicitly exposed

Revealing Module Pattern

The Revealing Module Pattern is an enhanced design pattern to ensure all methods and variables are kept private until they are explicitly exposed.

The methods are usually exposed through an object literal returned by the closure from which it's defined.

var Genie = (function(){
 
    //Private function 
    var onWake = function (){
        return 'Who dares to disturb my slumber?';
    };
 
    // explicitly return public methods
    return {
        Wake : onWake
 
    };
 
}());

Advantages of the Revealing Module Pattern

Cleaner Approach
Support for private data
Reduces global noise
Localization of functions and variables through closures
concise syntax
Explicitly defined public methods and variables

ES 6 Modules

The approaches above were workaround patterns developers used to create modules because JavaScript had no built-in module system prior to 2015.

The patterns provided isolation to a certain degree but unfortunately do not declare dependencies.

CommonJS

The most widely used approach to creating bolted-on JavaScript modules is called CommonJS modules. Node.JS uses this and the system is used by most packages on NPM.

The main concept in CommonJS modules is a function called require. Calling this method with a module name makes sure the module is loaded and returns and its interface and because the loader wraps the module code in a function the module automatically get their own scope.

require is used to import modules enabling you to include modules in your programs. You can add built-in core Node.js modules, community-based modules (node_modules), and local modules.

const fs = require('fs');

fs.readFile('./file.txt', 'utf-8', (err, data) => {
  if(err) { throw err; }
  console.log('data: ', data);
});

CommonJS modules work quite well and in combination with NPM have allowed the JavaScript community to share code on a wider scale! However, they are still a sort of patchwork quilt approach to implementing modules in JavaScript.

ECMAScript Modules

ECMAScript modules were introduced with ES6 and is a different module system. The notation is now integrated within the JavaScript language.

They are a continuation JavaScript modules and have all of their aforementioned characteristics. However, they do provide some additional characteristics

ES6 modules share a compact syntax
Support cyclic dependencies
Designed for asynchronous loading
Static structures to help with static checking, optimized imports and dead code elimination.

Rediscovering JavaScript : Master ES6, ES7 and ES8 and Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming have great sections on modules providing comprehensive detail.

Building on the Examples in the previous sections we can now redevelop our Genie module using the ES6 module approach.

Using one of the modern JavaScript Front-end Frameworks like my personal favourite Vue.JS or React. You will undoubtedly come across syntax like

import Vue from 'vue'

//or 

import React, {Fragment} from 'react';

Conclusion

We have examined the fundamental building blocks of a JavaScript application, the JavaScript Module Pattern. Mastering these patterns are essential to JavaScript Development as they allow you to break up your code in smalled managable modules.

The goal of modules is to allow large programs to be assembled using code from disparate sources, and for all the code to run correctly even in the presence of code the inital module developer did not anticipate. Majority of JavaScript frameworks are developed using the Module Pattern .

The above syntax is much more declarative and clearly defines the intent of the module. When developing larger JavaScript modules using the module pattern will enable to structure your code and clearly document it. The pattern also enables easier unit testing of the code.

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.