In this quick 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 another example of the JavaScript Module Pattern

 

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.  In traditional Object Oriented programming languages like Java, C#, C++ , Python etc, there is the Class  object that helps us 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.

 

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.

 

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.

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.

Advantages of JavaScript Module Pattern

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




bsp;

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.

To declare a private function in a Module, we create a function which is locally declared inside the new scope. If we were to attempt to access the function outside of our module , we’ll get an error thrown and our JavaScript application will break.

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.

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.

 

Stacked locally scope Object Literal

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

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.

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

 

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.




Gary Woodfine

Freelance Full Stack Developer at threenine.co.uk
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.
π