Design Patterns: Module Design Pattern in JavaScript

UpdatedNovember 18, 2024

I am Nandan, And you probably know me as a "Software Engineer who "hacked" an Airline to retrieve his luggage".

I am a full-time Software Engineer, Tech Speaker, and mentor. I enjoy talking about Web Development, Machine Learning, Natural language Processing, Machine learning Accelerated Mobile Pages, Progressive Web Apps, Cybersecurity, Chatbots, etc.

My claim to fame was when I posted a series of tweets on Twitter about data privacy issues on an airline’s website and the tweet got viral for all the good reasons. The story was covered by all major media portals all around the world including BBC, Saudi Gazette, Times of India, Boing Boing, Lallantop etc. and I have been interviewed by some major radio channels and podcasts.

In my free time, I like to indulge myself in activities like Photography, Gardening, Snooker, or Boxing. I am a proud owner of many plants, I sometimes talk to them (mostly pep talks).

Comments

Join the discussion

No comments yet. Be the first to comment.

Front End - HTML, CSS & Javascript

Part 2 of 10

In this series, I will write about Front End Technologies, Including mini notes of my learning along the way. Follow to keep updated.

Up next

What are Javascript Closures?

Closures are a fundamental concept in JavaScript that enables powerful features like data privacy, state persistence, and functional programming. This blog will demystify closures with examples and practical use cases. When are closures created? Clos...

More from this blog

How I Moved My Google AI Studio App to GitHub CI

Three wrong Fixes, one ghost container, and an afternoon I did not plan for.

Jul 12, 20266 min read179

How I Moved My Google AI Studio App to GitHub CI

I Got Tired of Goodreads. So I Built Kitaaben.com

I read a lot. Not as much as I'd like to, but enough that I needed a place to keep track of it all. For years, Goodreads was that place. Then Amazon bought it in 2013 and... nothing happened. No meani

Jun 24, 20264 min read22

I Got Tired of Goodreads. So I Built Kitaaben.com

How to Convert Nested Objects to Flat Objects in JavaScript.

Why Arrays Need Special Handling.

Mar 4, 20264 min read55

How to Convert Nested Objects to Flat Objects in JavaScript.

HTML Pitfalls and Gotchas Every Developer Should Avoid

HTML is Easy, May be Not.

Sep 5, 20254 min read38

HTML Pitfalls and Gotchas Every Developer Should Avoid

Front-End Developer Interviews: The Crucial Aspect of Accessibility

What you should know about Accessibility.

Aug 9, 20253 min read49

Front-End Developer Interviews: The Crucial Aspect of Accessibility

Nandan Kumar's Blog | Software Engineer | Featured on BBC, Saudi Gazette, Times Of India | Tech Speaker | Mentor

38 posts

Software Engineer | Blogger | Tech Speaker | Mentor | Featured on BBC, Saudi Gazette, Times Of India

Module Design Pattern is a way to encapsulate and organize code in a self-containing module that can expose certain functionalities while keeping the rest of the code private.

This helps prevent variable and function name clashes, improves code maintainability, and promotes the concept of separation of concerns.

Here's an example of how you can implement the Module Design Pattern in JavaScript:

// Module using the Module Design Pattern
var Module = (function() {
  // Private variable
  var privateVariable = "I am a private variable";

  // Private function
  var privateFunction = function privateFunction() {
    console.log("This is a private function");
  }

  // Public function
  var publicFunction = function() {
      console.log("This is a public function");
  }
  // Public interface
  return {
    publicFunction:publicFunction,
    // Public variable accessing private variable
    publicVariable: privateVariable
  };
})();

// Usage of the module
console.log(Module.publicVariable); // Output: "I am a private variable"
Module.publicFunction(); // Output: "This is a public function"

// Trying to access private members directly (will result in an error)
console.log(Module.privateVariable); // Output: undefined
Module.privateFunction(); // Output: Uncaught TypeError: MyModule.privateFunction is not a function

In the above example, we've created a module called Module using an Immediately Invoked Function Expression (IIFE). Inside the IIFE, we define private variables and functions that are not accessible from outside the module. We then return an object containing the public members (functions and variables) that we want to expose.

Benefits of the Module Design Pattern:

Encapsulation: Private members are not accessible from outside the module, which helps prevent unintended modifications or conflicts with other parts of the codebase.
Organization: Code is organized into logical modules, making it easier to manage and understand.
Namespacing: The module acts as a namespace, reducing the chances of naming collisions in a global scope.
Reusability: Modules can be easily reused in different parts of your application or different projects.
Maintenance: Separation of concerns and encapsulation make it easier to maintain and refactor code.

That's a concise explanation of the module design pattern in Javascript.

Feel free to comment on how you like my blog or shoot me a mail at connect@nandan.dev If you have any queries and I will try to answer.

You can also visit my website to read some of the articles at nandan.dev

Stay tuned & connect with me on my social media channels. Make sure to subscribe to my newsletter to get regular updates on my upcoming posts.

Twitter | Instagram | Github | Website

Command Palette

Comments

Front End - HTML, CSS & Javascript

What are Javascript Closures?

More from this blog