Modules in JavaScript – From Classic Patterns to ES Modules and Structural Differences

Introduction

Modules in JavaScript serve the same purpose as classes: grouping related data and behavior. They can interact with other modules and share functionality. However, they differ significantly in syntax and structure — especially between classic modules and ES Modules (ESM).

Classic Modules

Before ES6, modules were commonly implemented using functions that returned a public API object. These are known as factory functions:

function Publication(title, author, pubDate) {
  var publicAPI = {
    print() {
      console.log(`
Title: ${title}
By: ${author}
${pubDate}
`);
    }
  };
  return publicAPI;
}

Classic modules encapsulate data within the function scope and expose only selected methods. Unlike classes, they don’t use this, and private data is naturally protected.

Comparison with Classes

Classes store data and methods on object instances, and everything is public by default. In contrast, classic modules return only what should be public, keeping the rest private inside the factory function.

Instantiating Classic Modules

To use a classic module, simply call the function — no new keyword required:

var YDKJS = Book({
  title: "You Don't Know JS",
  author: "Kyle Simpson",
  publishedOn: "June 2014",
  publisher: "O'Reilly",
  ISBN: "123456-789"
});
YDKJS.print();

ES Modules (ESM)

ES6 introduced a formal module syntax. Key features of ESM:

• Each file is a module.
• export defines the public API.
• import brings in functionality from other modules.
• Modules are singletons — only one instance is created and shared.

If multiple instances are needed, use a factory function inside the ESM.

Example: Mixing ESM and Classic Modules

// publication.js
function printDetails(title, author, pubDate) {
  console.log(`
Title: ${title}
By: ${author}
${pubDate}
`);
}
export function create(title, author, pubDate) {
  var publicAPI = {
    print() {
      printDetails(title, author, pubDate);
    }
  };
  return publicAPI;
}

In another file:

// blogpost.js
import { create as createPub } from "publication.js";
export function create(title, author, pubDate, URL) {
  var pub = createPub(title, author, pubDate);
  var publicAPI = {
    print() {
      pub.print();
      console.log(URL);
    }
  };
  return publicAPI;
}

Conclusion

Modules in JavaScript are powerful tools for organizing code. Classic modules offer flexibility and natural encapsulation, while ES Modules provide a formal, file-based structure. Understanding the differences and choosing the right pattern for your needs is essential for writing clean and scalable JS applications.