Creating a module in JavaScript

Closures are one of the best and most powerful features of JavaScript. Closures help keep any state or privacy within that function. Let’s start by using an anonymous closure. An anonymous closure is just functions that wrap our code and create an enclosed scope around it.

There is a well-known design pattern in JavaScript, which is called IIFE (Immediately Invoked Function Expression). It is a JavaScript function that runs as soon as it is defined.

So, here is an example of this function.

1
2
3

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

We simply create an anonymous function and execute it immediately. All of the code that runs inside the function lives in a closure., which provides privacy and state throughout the lifetime of our application.

Global Import

There is a known feature of JavaScript, which is called Implied Globals.  Any variable you don’t declare becomes a property of the global object in JavaScript.

Luckily, our anonymous function provides an easy alternate. By passing globals as parameters to our anonymous function, we import them into our code, which is both cleaner and faster than implied globals.

Here’s an example:

1
2
3

(function ($, YAHOO) {
  // now have access to globals jQuery (as $) and YAHOO in this code
})(jQuery, YAHOO);

Exporting our module

In order to export our module, you can simply assign this a variable that we can use to call our module methods.

1
2
3

var myModule = (function () {
  "use strict";
})();

Public methods in the module

Let’s first start with how to create public methods in our module. To expose our public method outside our module we return an object with the methods defined.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var jsModule = (function () {
  "use strict";

  return {
    publicMethod: function () {
      console.log("Hello ZeptoBook!");
    },
  };
})();

jsModule.publicMethod(); // outputs 'Hello ZeptoBook'

Private methods in the module

There is no private keyword in Javascript, but we can create private methods and properties in our module.

1
2
3
4
5
6
7
8

var jsModule = (function () {
  var privateMethod0 = function () {};

  return {
    publicMethod1: function () {},
    publicMethod2: function () {},
  };
})();

Here our privateMethod0 is private.  Because our private methods are not returned they are not available outside of our module.

Accessing private methods

What if I need to access module’s private methods. Here is the trick: you can invoke private methods via public methods. Here is an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var jsModule = (function () {
  var privateMethod = function (message) {
    console.log(message);
  };

  var publicMethod = function (text) {
    privateMethod(text);
  };

  return {
    publicMethod: publicMethod,
  };
})();

jsModule.publicMethod("Hello Zeptobook");

Extending our module

You can extend your existing module without touching it code. Here is an example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var jsModule = (function () {
  var privateMethod = function (message) {
    console.log(message);
  };

  var publicMethod = function (text) {
    privateMethod(text);
  };

  return {
    publicMethod: publicMethod,
  };
})();

//Here we are extending our jsModule
var ModuleTwo = (function (Module) {
  Module.extendedMethod = function () {
    console.log("From ModuleTwo");
  };

  return Module;
})(jsModule || {});

jsModule.extendedMethod();

In the above example, we have passed our jsModule to ModuleTwo, and added a new method extendedMethod to this. It will now return the object with this new method.

In the last, you can now access extendedMethod from our original module of jsModule.

Private Naming Convention

As there is no private keyword in JavaScript, it is considered a best practice to use _ (underscore) before any private methods and properties.

References

https://developer.mozilla.org/en-US/search?q=design+patterns

Further Reading

Understand Shallow And Deep Copy In JavaScript

Object Mutation In JavaScript

What Is JavaScript Callback And How Does It Work?

Remove An Item From The Array Using JavaScript Splice()