Thought leadership from the most innovative tech companies, all in one place.

Module Pattern in JavaScript

JavaScript Developers need to understand Core Patterns

image

What is Module Pattern

The Module Pattern is one of the important** patterns in JavaScript**. It is a commonly used Design Pattern which is used to wrap a set of variables and functions together in a single scope.

  • It is used to define objects and specify the variables and the functions that can be accessed from outside the scope of the function.

  • We expose certain properties and function as public and can also restrict the scope of properties and functions within the object itself, making them private.

  • This means that those variables cannot be accessed outside the scope of the function.

  • We can achieve data hiding an abstraction using this pattern

Let's look for the simple implementation of Module Pattern with only public fields:

function EmployeeDetails() {
  var name: "Mayank";
  var age = 30;
  var designation = "Developer";

  return {
    name: name,
    age: age,
    designation: designation,
  };
}

var newEmployee = EmployeeDetails();

var userName = newEmployee.name;
var userAge = newEmployee.age;
var userDesignation = newEmployee.designation;

The code contains the function which defines a certain variable and returns those variables back from the function. The values that are returned on function call is saved as an object literal in the variable newEmployee**. **We are specifying the key-value pair that need to be returned. This is one of the simple implementations of Module Pattern. We can access the properties “name”, “age”, “designation” from the object returned. In the above code, we can access all the properties defined by the object since they are exposed from the function call.

We will now expand the above code to define some variables that are not accessible outside the scope of the Module Function.

function EmployeeDetails() {
  var name: "Mayank";
  var age = 30;
  var designation = "Developer",
  var salary = 10000;



  return {
    name: name,
    age: age,
    designation: designation
  }
}

var newEmployee = EmployeeDetails()

// This will result in "undefined" value
var userName = newEmployee.salary;

Data Hiding with the Module Pattern

image

The code above creates another variable “salary”, this variable is not exposed outside the “EmployeeDetails” function, making it unavailable for the “newEmployee” Object. This “salary” can now be seen as a private variable that can be accessed only from the function. It is not available outside.

Now let’s see how we can use the salary value without needing to expose it publicly:

function EmployeeDetails() {
  var name: "Mayank";
  var age = 30;
  var designation = "Developer",
  var salary = 10000;

  var calculateBonus = function(amount) {
    salary = salary + amount;
  }

  return {
    name: name,
    age: age,
    designation: designation,
    calculateBonus: calculateBonus
  }
}

var newEmployee = EmployeeDetails()

var userName = newEmployee.calculateBonus(1000);

The function above uses the private variable “salary” to calculate the value of “bonus” that need to be provided to the employee. So although the “salary” cannot be accessed directly using newEmployee, it still remains in the scope so that other components can use this value for other calculations. Although the variable is “private” to the scope of EmployeeDetails functions, even after the function has executed, the “salary” variable is retained in the scope so that other functions can use these values to provide further functionality.

The salary here is a sort of private variable that can be accessed by other functions that are exposed publicly from the function. It can be equivalent to a private hidden variable that is accessible by its member function. Hence providing the idea of data hiding.

Use Module pattern for the following benefits:

  1. Maintainability: Module Patterns enable better maintainability since all the related code can be encapsulated inside a single logical block. These logically independent blocks are relatively easier to update.

  2. Reusability: We single unit of code can be reused across the entire application. Functionality enclosed as a module can be reused and we do not need to define the same functions at multiple points.




Continue Learning