Before ES modules existed, the Module Pattern was how JavaScript achieved private state and a controlled public API, using nothing but closures and an immediately-invoked function expression. It still shows up throughout the ecosystem today.
1The Module Pattern | JavaScript Tutorial - In-Depth Guide Part 1
The Module Pattern wraps code in an Immediately Invoked Function Expression (IIFE), using the function's local scope to create private variables inaccessible from outside.
const counterModule = (function () {
let count = 0; // private
return {
increment() { return ++count; }, // public
};
})();
counterModule.increment(); // 1
counterModule.count; // undefined — truly privateEncapsulation via Closures
2The Module Pattern | JavaScript Tutorial - In-Depth Guide Part 2
The object returned from the IIFE defines the module's entire public API — anything not explicitly returned remains permanently inaccessible from outside.
const module = (function () {
let privateData = 'secret';
function privateHelper() { return privateData.toUpperCase(); }
return {
getData: () => privateHelper(), // only this is public
};
})();Defining a Public API
3The Module Pattern | JavaScript Tutorial - In-Depth Guide Part 3
The 'Revealing Module Pattern' is a popular variant: define everything as private functions/variables first, then return an object that simply maps public names to the already-defined private implementations.
const revealingModule = (function () {
let count = 0;
function increment() { count++; }
function getCount() { return count; }
return { increment, getCount }; // reveal only these
})();The Revealing Module Pattern
4The Module Pattern | JavaScript Tutorial - In-Depth Guide Part 4
Native ES modules (with 'import'/'export') provide the same core benefit — encapsulation of private state with an explicit public API — as a first-class language feature, without needing an IIFE trick.
// counter.js — an ES module achieves the same encapsulation natively:
let count = 0; // private to this module
export function increment() { return ++count; }Relationship to ES Modules
5The Module Pattern | JavaScript Tutorial - In-Depth Guide Part 5
The classic Module Pattern is still worth recognizing because it appears throughout the existing ecosystem — older libraries, certain bundling/UMD patterns, and any codebase written before ES modules were universally supported.
// A common older library shape, still seen today:
var MyLibrary = (function () {
var privateState = {};
return {
init: function (config) { privateState = config; },
getConfig: function () { return privateState; },
};
})();Still Relevant Today
6Step-by-Step Breakdown
The Module Pattern wraps code in an Immediately Invoked Function Expression (IIFE), using the function's local scope to create private variables inaccessible from outside.
Checkpoint: Can code outside the IIFE directly access a variable declared inside it that was never returned?
- →Yes, via bracket notation or similar tricks
- →No, it remains permanently private to the closure
The object returned from the IIFE defines the module's entire public API — anything not explicitly returned remains permanently inaccessible from outside.
The 'Revealing Module Pattern' is a popular variant: define everything as private functions/variables first, then return an object that simply maps public names to the already-defined private implementations.
Native ES modules (with 'import'/'export') provide the same core benefit — encapsulation of private state with an explicit public API — as a first-class language feature, without needing an IIFE trick.
Checkpoint: Do native ES modules achieve the same core encapsulation benefit as the classic Module Pattern?
- →Yes, unexported bindings are private by default
- →No, ES modules expose everything by default
The classic Module Pattern is still worth recognizing because it appears throughout the existing ecosystem — older libraries, certain bundling/UMD patterns, and any codebase written before ES modules were universally supported.
Next, we'll explore 'The Factory Pattern'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1No Direct Accessibility Implication
The Module Pattern is a code-organization technique with no direct bearing on assistive technology; its relevance is purely about maintainable, encapsulated JavaScript architecture.
SEO Implications
- 1
No Direct SEO Effect
The Module Pattern is a code-architecture concept; SEO relevance is limited to general maintainability of the codebase producing rendered content.
Best Practices
Prefer Native ES Modules for New Code
They achieve the same encapsulation goals as the classic Module Pattern with cleaner syntax, native tooling support, and static analyzability that an IIFE-based approach lacks.
Recognize the Module Pattern When Reading Legacy Code
Understanding this pattern is essential for maintaining older codebases and libraries that predate widespread ES module support.
Frequent Bugs
Assuming a variable declared inside a Module Pattern IIFE can be accessed for debugging via the browser console by guessing its name, when it's genuinely inaccessible from outside the closure.
This is expected, correct behavior — true privacy is the entire point of the pattern; add a deliberate public method if you need to expose something for debugging or testing.
Forgetting the parentheses that immediately invoke the function expression, accidentally leaving a function declaration/expression that never actually runs.
Double-check the IIFE syntax: `(function () { ... })()` — both the wrapping parentheses and the trailing call parentheses are required.
Real-World Examples
A Legacy Library Namespace Using the Module Pattern
An older third-party library exposed a single global object with a controlled API, keeping its internal implementation details hidden from the pages that used it.
var AnalyticsLib = (function () {
var events = [];
function send(event) { events.push(event); /* ... */ }
return {
track: function (name, data) { send({ name, data, time: Date.now() }); },
};
})();