Javascript Module Pattern

How and why do we need to use this pattern in our code.

What is it?

The module pattern is a way to structure your code to make it more maintainable and more modular. In javascript modules are functions. We can use the characteristics of functions to create secure modules that can scale to create things like libraries.

2 characteristics:

  1. Have an outer wrapping function
  2. return 1 or more inner functions that have a closure over the scope.
var mod = (function() {
var privateObj = {
pass: "secret",
getPass: function() { console.log(this.pass) },
setPass: function() { this.pass = "pass" }
  };

return privateObj
})();
mod.getPass();

There are different ways to compose a module, but one common pattern is to use an IIFE to wrap the module. Why not wrap it in a regular function? You could, but then you would have to run the function first so your function call to getPass would look like this instead: mod().getPass();

This simple module demonstrates a common practice in classical object implementation of getters and setters. We have created two functions that can set or get the value for the property pass. We have determined the mutability and accessibility of the members of our module. There is no other way inside our module which makes this a powerful way to protect your information. This is the power of closure.

es6 modules

es6 comes with a few functions that make accessing and publishing modules trivial.

var mod = (function() {
var privateObj = {
pass: "secret",
getPass: function() { console.log(this.pass) },
setPass: function() { this.pass = "pass" }
};

return privateObj
})();
export default mod

export

The export default keywords do exactly what you expect. They export out your module and you can import them from another program.

import Mod from './modules/mod.js'

This is the equivalent to a require statement:

var Mod = require('./modules/mod.js')

There are many flavors to export. Using export default will export only one value from your module (or the whole module itself). A very comprehensive study can be found here. I use export default and export quite a bit in my programs. Importing has it’s own nuances as well which is well worth learning. The most important one in my opinion is named importing (destructuring). You can use named importing to only import the functions you need and not the whole library.

Closing Thoughts

Since es6 introduced classes we have another way of producing programs and libraries. The javascript aficionados would have you believe that this is a terrible thing and I would agree to a certain extent. It is very beneficial to learn and use classes because more and more people are starting to use them in their software. You will definitely need to understand them if you are going to be using ReactJS. This doesn’t mean that the modular pattern is going away. Not at all. The module pattern is inherently a part of javascript. Modules are just functions. This is just another tool you can use to build your programs.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.