JavaScript Module Patterns

Written by Swapnil RajaPublished 24 Aug 2026

Before real modules existed, JavaScript used closures to fake the same isolation.

This is worth knowing because it still appears throughout older code.

It is also a good way to see exactly what real modules give you for free.

Example

javascript

const counterModule = (function () {
  let count = 0;
  return {
    increment: function () { count++; return count; },
    reset: function () { count = 0; }
  };
})();

console.log(counterModule.increment());
console.log(counterModule.increment());

PreviousJavaScript Dynamic Import NextJavaScript Iterators

Example

javascript

const counterModule = (function () {
  let count = 0;
  return {
    increment: function () { count++; return count; }
  };
})();

counterModule.increment();

console.log(counterModule.count);
console.log(typeof counterModule.count);

Example

javascript

const mathModule = (function () {
  function double(n) { return n * 2; }
  function square(n) { return n * n; }
  function helper(n) { return n + 1; }

  return {
    double: double,
    square: square
  };
})();

console.log(mathModule.double(5));
console.log(typeof mathModule.helper);

Example

javascript

// The pattern, simulating a real module:
const mathModule = (function () {
  function double(n) { return n * 2; }
  return { double: double };
})();

// The real equivalent, written as a file:
// function double(n) { return n * 2; }
// export { double };

console.log(mathModule.double(10));

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>The Module Pattern</title>
</head>
<body>

  <h1>The Module Pattern</h1>

  <p id="out"></p>

  <script>
    const counterModule = (function () {
      let count = 0;
      return {
        increment: function () {
          count++;
          return count;
        },
        reset: function () {
          count = 0;
        }
      };
    })();

    counterModule.increment();
    counterModule.increment();
    counterModule.increment();

    document.getElementById("out").textContent = "Count: " + counterModule.increment();
  </script>

</body>
</html>

JavaScript Module Patterns

Example

The Module Pattern

Syntax

Private State

Example

The Revealing Module Pattern

Example

Compared with a Real Module

Example

Namespacing

Example

Why Real Modules Replaced This

Example

Complete Example

Try It Yourself

Important Points

Conclusion