Elevate Your JavaScript: Understanding Modular Patterns for Code Optimization

Immediately Invoked Function Expressions (IIFEs):

An IIFE is a function in JavaScript that runs as soon as it is defined. It helps keep your code organized and prevent conflicts with other scripts. It’s like creating a private space for your variables and functions so they don’t mess with other parts of your code.

(function() {
  var privateVariable = 'I am private';
  // more code here
})();

Basic Module Pattern for Encapsulation:

It is a technique to develop modules in which all your variables and functions are declared in a private space (similar to the IIFE concept). Then you can choose which ones you would like to expose publicly. This approach enhances your code’s readability and clarity.

var simpleModule = (function() {

  // This variable is private because it's in the module's closure scope
  var privateCounter = 0;

  // The object returned by the module has public methods
  return {
    incrementCounter: function() {
      privateCounter++;
    },

    getCounter: function() {
      return privateCounter;
    }
  };

})();

// Usage:
simpleModule.incrementCounter();
simpleModule.incrementCounter();
console.log(simpleModule.getCounter()); // Outputs: 2

Creating a Single-Instance Module:

It is a way to structure your code where you create a module with its own private functions and variables. After that, you selectively expose certain properties and methods to the outside world using an object. The key feature of this pattern is that it allows for only one instance of a module in your entire application, ensuring that all parts of your code are interacting with the same set of data and functions.

var SingletonModule = (function() {

  // Private variable
  var privateData = 'I am private';

  // Private function
  function privateFunction() {
    console.log('Accessed private function');
    return privateData;
  }

  // Public function to be exposed
  function publicFunction() {
    console.log('Accessed public function');
    return privateFunction();
  }

  // Expose public methods and properties
  return {
    myPublicFunction: publicFunction
  };

})();

console.log(SingletonModule.myPublicFunction()); 
// logs "Accessed public function", then "Accessed private function", and finally "I am private"

Employing the Constructor Module Pattern:

It equips you with the ability to spawn multiple instances of a module. Contrary to immediate function execution, this pattern treats the function as a constructor, empowering you to generate new instances as and when necessary.

var ConstructorModule = function() {

  // Private properties
  var privateData = 'I am private';

  // Private method
  function privateFunction() {
    console.log('Accessed private function');
    return privateData;
  }

  // Public methods to be exposed
  function publicFunction() {
    console.log('Accessed public function');
    return privateFunction();
  }

  // Expose public methods
  return {
    myPublicFunction: publicFunction
  };

};

// Usage: Create new instances
var instanceOne = new ConstructorModule();
var instanceTwo = new ConstructorModule();

console.log(instanceOne.myPublicFunction()); 
// logs "Accessed public function", then "Accessed private function", and finally "I am private"
console.log(instanceTwo.myPublicFunction()); 
// logs "Accessed public function", then "Accessed private function", and finally "I am private"

Advanced Encapsulation: Prototype Module Pattern

It weaves together the best features of the Prototype Pattern. It employs a constructor function to lay out a module with its private properties. These privately held properties are safeguarded within a closure, while the public properties and methods are exposed using a prototype. This approach affords a robust and flexible solution for developing modular and scalable code.

var PrototypeModule = function() {
  this._privateData = 'I am private';
}

PrototypeModule.prototype = (function() {

  // Private function
  function privateFunction() {
    console.log('Accessed private function');
    return this._privateData;
  }

  // Public function to be exposed
  function publicFunction() {
    console.log('Accessed public function');
    return privateFunction.call(this);
  }

  // Expose public methods
  return {
    myPublicFunction: publicFunction
  };

})();

// Usage: Create a new instance
var instance = new PrototypeModule();

console.log(instance.myPublicFunction()); 
// logs "Accessed public function", then "Accessed private function", and finally "I am private"

The way forward

In JavaScript, various patterns allow us to manage our code effectively, improving structure, readability, and scalability.

Get Rahul K.’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The Simple Module Pattern provide the foundation for encapsulating private data and exposing specific methods and variables to the public scope. The Singleton Module Pattern takes this one step further by ensuring that only a single instance of the module exists throughout the application.

For scenarios requiring multiple instances with the same functionality, the Constructor Module Pattern and Prototype Module Pattern are ideal. The Constructor pattern allows us to create separate instances of a module with encapsulated data, whereas the Prototype pattern combines encapsulation with the benefit of shared methods across instances via prototypes.

Choosing the right pattern depends largely on the specific needs of your project. Understanding and utilizing these patterns can significantly improve the quality of your JavaScript code and the efficiency of your development process.