Module Pattern in JavaScript

Module Pattern in JavaScript

Image for post

Working with Module Patterns

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 in the JavaScript.

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

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.

Data Hiding with the Module Pattern

Image for post

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:

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.

If you like the article, please provide your comments about the same.

Other Articles from the Author:

The Basics of JavaScript Generators

ES6 Generator Functions are the functions which can stop its execution in the midway and can resume execution further?

levelup.gitconnected.com

Introduction to React Hooks

React Hooks is the latest addition to the React in Version 16.8.0 and seems to be concept which all the React?

levelup.gitconnected.com

Introduction to React?s Higher Order Components (HOCs)

In simple terms, Higher Order Functions are the function that either take function as a parameter or returns a new?

levelup.gitconnected.com

Introduction to the RxJS Custom Observable

In my previous article, we talked about basics of RxJS. The library gives number of ways to create Observable. In this?

levelup.gitconnected.com

Introduction to RxJS and Reactive Programming

Reactive Programming is the new Buzz all around JavaScript World. In this article we are going to talk about the basics?

levelup.gitconnected.com

18