Encapsulate private state and expose a public API using closures or ES modules
When to Use
You need private variables that are not accessible from outside a module
You want a clean public API with implementation details hidden
You are working in a pre-ESM environment where IIFE-based modules were the norm
Instructions
In modern code (ESM), declare module-level variables as private by not exporting them. Export only the public API.
In legacy or bundled code, use an IIFE to create a closure scope.
Freeze exported objects if they should be immutable.
Keep modules focused — one module per concern.
// Modern ESM module pattern
let _count = 0; // private — not exported
export function increment() {
_count++;
}
export function getCount() {
return _count;
}
// Legacy IIFE module pattern
const counter = (() => {
let _count = 0;
return {
increment: () => _count++,
getCount: () => _count,
};
})();
Prefer ESM named exports over default exports for better tree-shaking.
Details
The Module pattern predates ES modules. In the browser, there was no built-in module system, so developers used IIFEs (Immediately Invoked Function Expressions) to create private scopes. Today, ES modules (.mjs, type="module") provide native module semantics — each file gets its own scope.
Trade-offs:
Module-level state is shared across all importers in the same process — it is a singleton
IIFE modules are not tree-shakeable by bundlers; prefer named ESM exports
Circular module dependencies can cause initialization order issues
When NOT to use:
When you need per-instance private state — use classes with private fields (#field)
When the module has no state — just export pure functions directly
Read the instructions and examples in this document.
Apply the patterns to your implementation, adapting to your specific context.
Verify your implementation against the details and edge cases listed above.
Harness Integration
Type: knowledge — this skill is a reference document, not a procedural workflow.
No tools or state — consumed as context by other skills and agents.
Success Criteria
The patterns described in this document are applied correctly in the implementation.
Edge cases and anti-patterns listed in this document are avoided.
1---2name: js-module-pattern3description: JS Module Pattern4---5# JS Module Pattern67> Encapsulate private state and expose a public API using closures or ES modules89## When to Use1011- You need private variables that are not accessible from outside a module12- You want a clean public API with implementation details hidden13- You are working in a pre-ESM environment where IIFE-based modules were the norm1415## Instructions16171. In modern code (ESM), declare module-level variables as private by not exporting them. Export only the public API.182. In legacy or bundled code, use an IIFE to create a closure scope.193. Freeze exported objects if they should be immutable.204. Keep modules focused — one module per concern.2122```javascript23// Modern ESM module pattern24let _count = 0; // private — not exported2526export function increment() {27 _count++;28}2930export function getCount() {31 return _count;32}3334// Legacy IIFE module pattern35const counter = (() => {36 let _count = 0;37 return {38 increment: () => _count++,39 getCount: () => _count,40 };41})();42```43445. Prefer ESM named exports over default exports for better tree-shaking.4546## Details4748The Module pattern predates ES modules. In the browser, there was no built-in module system, so developers used IIFEs (Immediately Invoked Function Expressions) to create private scopes. Today, ES modules (`.mjs`, `type="module"`) provide native module semantics — each file gets its own scope.4950**Trade-offs:**5152- Module-level state is shared across all importers in the same process — it is a singleton53- IIFE modules are not tree-shakeable by bundlers; prefer named ESM exports54- Circular module dependencies can cause initialization order issues5556**When NOT to use:**5758- When you need per-instance private state — use classes with private fields (`#field`)59- When the module has no state — just export pure functions directly6061## Source6263https://patterns.dev/javascript/module-pattern6465## Process66671. Read the instructions and examples in this document.682. Apply the patterns to your implementation, adapting to your specific context.693. Verify your implementation against the details and edge cases listed above.7071## Harness Integration7273- **Type:** knowledge — this skill is a reference document, not a procedural workflow.74- **No tools or state** — consumed as context by other skills and agents.7576## Success Criteria7778- The patterns described in this document are applied correctly in the implementation.79- Edge cases and anti-patterns listed in this document are avoided.
Run npx skillmds@latest add intense-visions/js-module-pattern in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
JS Module Pattern It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Intense-Visions (@intense-visions) published this skill. Their other Agent Skills are listed on their SkillMD profile.