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

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: Modules are loaded 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).
• Execution: Modules are loaded asynchronously.
• Support: Introduced in ES2015, now widely supported in modern browsers and Node.js.
• Modules are loaded statically at compile-time.
• Enables better performance due to static analysis and tree-shaking.

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

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

Summary

While CommonJS was the default module system in Node.js initially, ES modules are now the recommended approach for new projects, as they provide better tooling, performance, and ecosystem compatibility. However, CommonJS modules are still widely used in existing code bases and libraries especially for legacy dependencies.

Further reading

• JavaScript modules - MDN
• CommonJS vs ES Modules: the shift from require to import
• Modules, introduction - javascript.info
• Modules - Eloquent Javascript
• CommonJS vs. ES modules in Node.js
• Understanding CommonJS vs. ES Modules in JavaScript