Explain the differences between CommonJS modules and ES modules in JavaScript

TL;DR

In JavaScript, modules are reusable pieces of code that encapsulate functionality, making it easier to manage, maintain, and structure your applications. Modules allow you to break down your code into smaller, manageable parts, each with its own scope.

CommonJS is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the require() function to load modules and the module.exports or exports object to define the exports of a module.

// my-module.js
const value = 42;
module.exports = { value };

// main.js
const myModule = require('./my-module.js');
console.log(myModule.value); // 42

ES Modules (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the import and export statements to handle module dependencies.

// my-module.js
export const value = 42;

// main.js
import { value } from './my-module.js';
console.log(value); // 42

CommonJS vs ES modules

Loading model at a glance

CommonJS discovers dependencies while code executes, whereas ES modules expose a static graph that hosts can link before evaluation.

This static structure enables native asynchronous loading and build-time analysis such as tree shaking, while CommonJS remains convenient in legacy Node.js code.

Modules in JavaScript

Modules in JavaScript are a way to organize and encapsulate code into reusable and maintainable units. They allow developers to break down their codebase into smaller, self-contained pieces, promoting code reuse, separation of concerns, and better organization. There are two main module systems in JavaScript: CommonJS and ES modules.

CommonJS

CommonJS is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the require() function to load modules and the module.exports or exports object to define the exports of a module.

• Syntax: Modules are included using require() and exported using module.exports.
• Environment: Primarily used in Node.js.
• Execution: require() returns synchronously.
• Modules are loaded dynamically at runtime.

// my-module.js
const value = 42;
module.exports = { value };

// main.js
const myModule = require('./my-module.js');
console.log(myModule.value); // 42

ES Modules

ES Modules (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the import and export statements to handle module dependencies.

• Syntax: Modules are imported using import and exported using export.
• Environment: Can be used in both browser environments and Node.js (with certain configurations).
• Loading and execution: Static dependencies are discovered and linked before a module evaluates. Dynamic import() is asynchronous, and top-level await can suspend evaluation.
• Support: Introduced in ES2015, now widely supported in modern browsers and Node.js.
• Static import and export syntax can be analyzed without executing the module, which enables tools such as tree shakers. It does not guarantee a faster runtime or a smaller bundle.

// my-module.js
export const value = 42;

// main.js
import { value } from './my-module.js';
console.log(value); // 42

Summary

ES modules are the language standard and are usually the best default for new cross-runtime code. CommonJS remains widely used in Node.js packages and existing applications. Interoperability is runtime-specific: current Node.js can synchronously require() an eligible ES module only when its graph contains no top-level await, while import() can load either system through Node's ES module loader.

Further reading

• JavaScript modules - MDN
• Node.js: ECMAScript modules
• Node.js: Loading ECMAScript modules using require()
• Modules, introduction - javascript.info
• Modules - Eloquent JavaScript
• CommonJS vs. ES modules in Node.js
• Understanding CommonJS vs. ES Modules in JavaScript

Exercises