Describe the Revealing Module Pattern in JavaScript

In this article, we will see the Revealing Module Pattern in JavaScript. Here, we will first understand some basic details which are associated with the Revealing Module Pattern including some theoretical stuff as well as the syntax of the declaration of Revealing Module Pattern, then will understand its implementation through the examples.

Revealing Module Pattern:

JavaScript itself doesn’t have the access of making variables or functions (or methods) as public or private like other languages could easily do (including C++ or Java), but even though with this unavailable functionality of JavaScript, we could still make our variable as well as functions as public or private with the help of JavaScript’s Function-Level Scoping and that particular thing we may achieve it using Revealing Module Pattern.

Revealing Module Pattern is JavaScript’s design pattern that is available for users to actually organize JavaScript’s codes in modules which actually gives better code structure and helps in making things either private or public to users. This particular design pattern allows the script to be more consistent which though helps an individual to identify at the end which method or variable will be privately or publicly accessible which eases readability.

Let’s have a look at the below illustrated pictorial representation which will help us to understand this design pattern more nicely as well as clearly.

As shown in the above pictorial representation (an example of how does Music System functions), several methods (including Play Music, Pause Music, and Change Music) combined together (separately) makes a big function functionality working (which is Music System working). These shown methods would be embedded inside the bigger method which is the main method visible to the user, which will function at first itself.

Syntax: The following syntax gives us a rough idea of how we may declare any working functionality using this design pattern (Note that this syntax is based on the new Arrow function syntax, we may also use simple functions instead of arrow functions):

let function_name = () => {

    let first_function = () => {
        // do something...
    }
    
    let second_function = () => {
        // do something...
    }
    
   // More functions we may add on....

  return {
      calling_method_name : original_method_name,
      ...
  } 
}

Example 1: In this example, we will simply create a Music System with the help of certain user-defined methods inside the main method and we will make that work as per user wishes too, using simple method calling.

Javascript

<script>
  let musicPlayer = () => {
    let playSong = () => {
      console.log("Song has been played...!!");
    };

    let pauseSong = () => {
      console.log("Song Paused...!!");
    };

    return {
      playMusic: playSong,
      pauseMusic: pauseSong,
    };
  };

  let music_system = musicPlayer();
  music_system.playMusic();
  music_system.pauseMusic();
</script>

Output:

Song has been played...!!
Song Paused...!!

Example 2: In this example, we will take into account with previous example code with the slight change which is that it will take into account a new thing into the picture which is IIFE (Immediately Invoked Function Expression), the rest of the things remains same including method names or their roles. The actual benefit of using this feature is to avoid the usage of another variable to instantiate our method which further will be used for calling methods one after the another.

Javascript

<script>
  let musicPlayer = (() => {
    let playSong = () => {
      console.log("Song has been played...!!");
    };

    let pauseSong = () => {
      console.log("Song Paused...!!");
    };

    return {
      playMusic: playSong,
      pauseMusic: pauseSong,
    };
  })();

  musicPlayer.playMusic();
  musicPlayer.pauseMusic();
</script>

Output:

Song has been played...!!
Song Paused...!!