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).
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.
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.
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();ES6 introduced a formal module syntax. Key features of ESM:
export defines the public API.import brings in functionality from other modules.If multiple instances are needed, use a factory function inside the ESM.
// 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;
}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.