Advanced JavaScript Design Patterns: Part 5

Advanced JavaScript Design Patterns: Part 5

ยท

3 min read

The Revealing module pattern

JavaScript is a powerful and versatile language that has become a mainstay in web development. One of the key features of the language is its ability to create modules, which are self-contained chunks of code that can be reused across an application.

The Revealing Module Pattern is a variation of the traditional module pattern that allows for more flexibility and control when creating modules.

In this blog post, we will discuss the basics of the Revealing Module Pattern and provide some examples of how it can be used in a complex application.

First, let's define the traditional module pattern. In JavaScript, a module is typically created using an immediately-invoked function expression (IIFE), which is a function that is immediately invoked after it is defined. Inside the IIFE, we can define private variables and functions that are only accessible within the scope of the module. We can also return an object literal that contains the public methods and variables that should be exposed to the rest of the application.

This is an example of a simple module:

const myModule = (function() {
  let privateVariable = "I am a private variable";

  function privateFunction() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateFunction();
    },
    publicVariable: "I am a public variable"
  };
})();

console.log(myModule.publicMethod()); // logs "I am a private variable"
console.log(myModule.publicVariable); // logs "I am a public variable"
console.log(myModule.privateVariable); // undefined

The Revealing Module Pattern builds on the traditional module pattern by selectively exposing the private methods and variables of a module. Instead of returning an object literal that contains all of the public methods and variables, we define the public methods and variables as properties of the module's returned object. This allows us to keep the private methods and variables hidden, while still providing a way to access them.

Revealing Module Pattern Example:

const myModule = (function() {
  let privateVariable = "I am a private variable";

  function privateFunction() {
    console.log(privateVariable);
  }

  function publicFunction() {
    privateFunction();
  }

  return {
    publicFunction: publicFunction
  };
})();

console.log(myModule.publicFunction()); // logs "I am a private variable"
console.log(myModule.privateFunction); // undefined

As you can see, the publicFunction is accessible from the outside of the module, but the privateFunction is not. By keeping the private methods and variables hidden, we can ensure that they are not accidentally modified or accessed by other parts of the application, which can lead to unexpected behavior.

The Revealing Module Pattern can also be useful in more complex applications. For example, let's say we have an application that needs to access a remote API to retrieve data. We can use the Revealing Module Pattern to create a module that handles the API calls and exposes a small number of public methods for retrieving and manipulating the data.

const apiModule = (function() {
  let baseUrl = "https://example.com/api";
  let apiKey = "abc123";

  function makeRequest(url) {
    // code to make the API request
  }

Conclusion

The Revealing Module Pattern is a powerful and flexible design pattern that can be used in JavaScript development to create reusable and maintainable code. By selectively exposing the private methods and variables of a module, it allows developers to control how and when the module is used and promotes a more structured and organized codebase.

If you liked it please leave some love to show your support. Also, leave your responses below and reach out to me if you have any queries.

Did you find this article valuable?

Support Jay Desai by becoming a sponsor. Any amount is appreciated!

ย