Question 71

Question

How do you implement module pattern in JavaScript?

Answer

The module pattern is a popular way to organize JavaScript code into reusable and self-contained modules, promoting better code structure, maintainability, and reduced global namespace pollution.

Here's how you implement the module pattern in JavaScript:

Basic Module Pattern:

// myModule.js
const myModule = (function() {
  let privateVariable = "This is private"; 

  function privateFunction() {
    console.log("This function is private");
  }

  return {
    publicVariable: "This is public",
    publicFunction: function() {
      console.log(privateVariable);
      privateFunction();
    }
  };
})();

// Using the module
console.log(myModule.publicVariable); // Output: This is public
myModule.publicFunction();           // Outputs: "This is private", then calls the private function

Explanation:

1. Immediately Invoked Function Expression (IIFE):

   • We wrap our code in an IIFE (function() { ... })();. This immediately executes the function, creating a new scope and preventing variables from leaking into the global namespace.

2. Private Variables and Functions:

   • Variables (privateVariable) and functions (privateFunction) declared inside the IIFE are considered private. They can only be accessed from within the module's returned object.

3. Public Interface:

   • We define a return statement that exposes public properties (publicVariable) and functions (publicFunction) to the outside world. This is how other parts of your code interact with the module.

Benefits of the Module Pattern:

• Encapsulation: Hides implementation details, promoting modularity and cleaner code organization.

• Data Protection: Keeps private variables from being accidentally modified by external code.

• Reduced Global Namespace Pollution: Prevents conflicts with other scripts or libraries using the same global names.