đź““
Design Patterns & Principles
  • Recipes: Design Patterns And Principles
  • Design Patterns
    • Singleton Pattern
    • Module Pattern
    • Observer Pattern
    • Decorator Pattern
    • Factory Method Pattern
    • Builder Pattern
    • Adapter Pattern
    • Bridge Pattern
    • Composite Pattern
    • Facade Pattern
    • Flyweight Pattern
    • Proxy Pattern
    • Chain of Responsibility
    • Command Pattern
    • Iterator Pattern
    • Mediator Pattern
    • Memento Pattern
    • Visitor Pattern
    • Strategy Pattern
    • State Pattern
    • Template Method Pattern
    • Prototype Pattern
  • Software Principles
    • SOLID Principle
    • DRY Principle
    • Software Architecture Fundamentals
      • Architecture Style
        • Service-Oriented Architecture (SOA)
Powered by GitBook
On this page

Was this helpful?

  1. Design Patterns

Module Pattern

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

PreviousSingleton PatternNextObserver Pattern

Last updated 4 years ago

Was this helpful?

Module Pattern

Some time ago, a popular approach would be to enclose a piece of code in an Immediately Invoked Function Expression (IIFE). This is because all JavaScript files share the same scope.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello world!</title>
        <script src="hello.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
    </body>
</html>

hello.js

function hello() {
  console.log('Hello world!');
}
 
hello(); // Hello world!

main.js

hello(); // Hello world!

The fact that defining something in one file pollutes the whole global scope is not a desirable situation. A common way to solve this was to introduce the module pattern by creating a function and immediately invoking it.

hello.js

  function hello() {
    console.log('Hello world!');
  }
 
  hello(); // Hello world!
})();

main.js

hello(); // Uncaught ReferenceError: hello is not defined

An important thing about the above approach is that if we define any variable inside the above module, it is not available outside of it.

We can also export the hello function by returning something from our Immediately Invoked Function Expression.

hello.js

const helloModule = (function(){
  function hello() {
    console.log('Hello world!');
  }
 
  return {
    hello
  }
})();

main.js

helloModule.hello(); // Hello world!

Node.js environment also provides its solution by implementing a module system called CommonJS. Let’s examine an odd piece of code:

console.log('Hello');
return;
console.log('world!');

It seems weird because the return statement can’t occur outside of a function. When we import such a file, Node.js wraps it in a function like this:

function (exports, require, module, __filename, __dirname) {
  console.log('Hello');
  return;
  console.log('world!');
}

Thanks to the above, the module has its own scope, and the above code runs without errors.

Resources

As the JavaScript language evolved, we found other ways to deal with the above issue. One of them are , where every module has its file. Modern browsers already support them. You can also .

ES6 modules
use them with Webpack
Mastering the Module Pattern - Ultimate Courses™
Module Pattern in JavaScriptMedium
Logo
Logo