JavaScript Module Pattern and Encapsulation

Photo by Greg Rakozy on Unsplash

Modules are commonly used to store functions independently from other components. From an object-oriented perspective, a “module” is a JavaScript class that allows us to achieve “encapsulation.”

Encapsulation ensures whether the behaviors of a module, including functions and methods, are accessible or not.

Our reference code is provided below.

var ModuleName = (function(){
     var privateVariable = 0;
     var privateMethod = function() {
     };
     var publicMethod = function() {
     };
     return {
          publicMethod: publicMethod
     }
})();

After defining variables and methods within the module, in the ‘return’ section, we specify the methods and variables that we will expose externally as an Object Literal.

Usage example:

ModuleName.publicMetod();

Let’s briefly discuss Object Literal. They are name-value pairs separated by commas. For example:

var MyObject = {
     defaults: {
          id: 123456–789,
          name: "Apple",
          defName: "apple_fruit"
     },
     someMethod: function() {
          console.log("Method runing");
     }
};

Let’s conclude the topic by creating a simple module.

var Modal = (function(){
     var createModalCover = function(modalCoverID){
          var modalCover = document.createElement("div");
          modalCover.classList.add("modal_cover");
          modalCover.id = modalCoverID + "_cover";
          document.body.appendChild(modalCover);
     };
     var removeModalCover = function(modalCoverID){
      document.body.removeChild(document.getElementById(modalCoverID   + "_cover"));
     };
     var open = function(containerID){
          createModalCover(containerID);
          document.getElementById(containerID).classList.add("modal_show");
     };
     var close = function(containerID){
          document.getElementById(containerID).classList.remove("modal_show");
          removeModalCover(containerID);
     };
     return {
          modalOpen: open,
          modalClose: close
     }
})();

Firstly, we defined our operations related to the modal; we wrote the necessary code to create and remove the modal cover (createModalCover — removeModalCover). Then, we defined our open/close modal window operations (open / close). We also made these open/close operations accessible from the outside in the return section.

Usage:

Modal.modalOpen ();
Modal.modalClose();

Important Note: When making primitive-type variables used within the module public, the values of the variables inside the module remain the same, but a copy is created, and operations are performed on the copy.

Sample:

var Module =function(){
     var publicVariable = "lorem";
     var log = function(){
          console.log(publicVariable);
     };
     return {
          publicVariable: publicVariable,
          log: log
     }
};

Now, let’s change the value of the publicVariable.

Module.publicVariable = "ipsum";
Module.log(); // lorem

Here, a copy of publicVariable was created, and the value of publicVariable within the module remained the same. When creating a module, the properties exposed to the outside should be methods. Public operations related to variable values should be handled within the module using get/set methods.