Learn about module design pattern in JavaScript
Photo: Google

Learn about module design pattern in JavaScript

One of the most commonly used JavaScript design patterns is a Module design pattern. It is easy to use module design pattern and it creates encapsulation of our code. Modules are commonly used as singleton style objects where only one instance exists. The Module Pattern is great for services and testing/TDD.

The module pattern is one of the amazing design patterns and I’d like to share some use cases and differences in the pattern, and why they’re important.

Creating a module in JavaScript

Closures are one of the best and most powerful features of JavaScript. Closures help keep any state or privacy within that function. Let’s start by using an anonymous closure. An anonymous closure is just functions that wrap our code and create an enclosed scope around it.

There is a well-known design pattern in JavaScript, which is called IIFE (Immediately Invoked Function Expression). It is a JavaScript function that runs as soon as it is defined.

So, here is an example of this function.

We simply create an anonymous function and execute it immediately. All of the code that runs inside the function lives in a closure., which provides privacy and state throughout the lifetime of our application.

Global Import

There is a known feature of JavaScript, which is called Implied Globals.  Any variable you don’t declare becomes a property of the global object in JavaScript.

Luckily, our anonymous function provides an easy alternate. By passing globals as parameters to our anonymous function, we import them into our code, which is both cleaner and faster than implied globals.

Here’s an example:

Exporting our module

In order to export our module, you can simply assign this a variable that we can use to call our module methods.

Public methods in the module

Let’s first start with how to create public methods in our module. To expose our public method outside our module we return an object with the methods defined.

Private methods in the module

There is no private keyword in Javascript, but we can create private methods and properties in our module.

Here our privateMethod0 is private.  Because our private methods are not returned they are not available outside of our module.

Accessing private methods

What if I need to access module’s private methods. Here is the trick: you can invoke private methods via public methods. Here is an example:

Extending our module

You can extend your existing module without touching it code. Here is an example.

In the above example, we have passed our jsModule to ModuleTwo, and added a new method extendedMethod to this. It will now return the object with this new method.

In the last, you can now access extendedMethod from our original module of jsModule.

Private Naming Convention

As there is no private keyword in JavaScript, it is considered a best practice to use _ (underscore) before any private methods and properties.

References

https://developer.mozilla.org/en-US/search?q=design+patterns

Further Reading

Understand Shallow And Deep Copy In JavaScript

Object Mutation In JavaScript

What Is JavaScript Callback And How Does It Work?

Remove An Item From The Array Using JavaScript Splice()

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.