Introduction to JavaScript - Tutorial 6 - The Module Pattern - Codemio

With this post, I am going to continue on the Introduction to Javascript Tutorial series and try to explain the JavaScript Module Pattern for those who are not familiar with it.

The Module Pattern is what we would call a design pattern and it’s extremely useful for a vast amount of reasons. My main attraction to the Module Pattern is because it makes scoping extremely easy and doesn’t overcomplicate program design.

Now, let's jump start with an example. Imagine you have a library that lets you increment and decrement a counter value:


var myCounterObject = {
  count: 0,
  increment: function() {
    this.count++;
  },
  decrement: function() {
    this.count--;
  },
  getCount: function() {
    return this.count;
  }
};

console.log(myCounterObject.getCount()); // count: 0
myCounterObject.increment();
console.log(myCounterObject.getCount()); // count: 1
myCounterObject.count = 190;
console.log(myCounterObject.getCount()); // count: 190

However, as you can see this way the private variables in your library are easily accessible and modifiable. But let's imagine that this is not something you desire and want to avoid. But JavaScript doesn't necessarily provide you with private variables unlike some other languages like Java, C#, etc. How would you achieve this in JavaScript? The answer is the famous Module Pattern.

Here is how we implement the same code as above as a JavaScript module:


var counter = (function() {
  var _count = 0;
  var incrementCount = function() {
    _count++;
  };
  var resetCount = function() {
    _count = 0;
  };
  var getCount = function() {
    return _count;
  };
  return {
    add: incrementCount,
    reset: resetCount,
    get: getCount
  };
})();

First thing to do is to create a private variable in our module and using an underscore to denote that it is private. (_count) The underscore here is just a common notation to denote private variables. In addition to private variables, module pattern allows us to have private functions as well. We could have a private function that resets the count value when it reaches to 10 as follows:


var counter = (function() {
  var _count = 0;
  var incrementCount = function() {
    privateResetter();
    _count++;
  };
  var resetCount = function() {
    _count = 0;
  };

  var privateResetter = function(){
    if(_count == 10){
      _count = 0;
    }
  };

  var getCount = function() {
    return _count;
  };
  return {
    add: incrementCount,
    reset: resetCount,
    get: getCount
  };
})();

The next thing we did after creating the private variables and functions was wrapping the entire library in a self-invoking anonymous function. This is a function that’s executed right at the runtime. The function executes, defines the variables & functions and then hits the return {} statement, telling this function what to return to the variable counter, or in other words, what to expose to the user. Alright, now we have a module that we can use as follows:


counter.add();
console.log(counter.get());
// _count: 1

Now, we cannot manually access and modify the _count variable anymore with the module pattern. This is actually great for data security and integrity. Also this allows your code to be more organized and modular.

Hope this post is helpful and please leave a comment below if you have any questions, suggestions or comments. Thanks!

Introduction to JavaScript - Tutorial 6 - The Module Pattern

Author: Berk Soysal