Chapter 14: Modules

Modules are a way to organize and manage code in JavaScript. They allow you to split your code into separate files and include only the necessary parts in different contexts. This promotes better code organization, reuse, and maintainability. In this chapter, we will explore CommonJS and ES modules, as well as how to export and import modules using different syntax.

CommonJS and ES Modules

CommonJS Modules

CommonJS is a module specification used primarily in Node.js environments. It allows you to use require and module.exports to include and export code from different files.

Example:

Exporting in CommonJS:

// math.js
function add(a, b) {
  return a + b;
}

module.exports = add;

Importing in CommonJS:

// app.js
const add = require("./math");
console.log(add(2, 3)); // Output: 5

ES Modules (ECMAScript Modules)

ES Modules are the official standard for JavaScript modules, supported in both Node.js and browser environments. They use import and export keywords to include and export code from different files.

Example:

Exporting in ES Modules:

// math.js
export function add(a, b) {
  return a + b;
}

Importing in ES Modules:

// app.js
import { add } from "./math.js";
console.log(add(2, 3)); // Output: 5

Exporting and Importing Modules

CommonJS Modules

Exporting:

You can export functions, objects, or any other values using module.exports.

Example:

// utils.js
const PI = 3.14;

function square(x) {
  return x * x;
}

module.exports = { PI, square };

Importing:

Use require to import modules and access their exports.

Example:

// main.js
const { PI, square } = require("./utils");
console.log(PI); // Output: 3.14
console.log(square(4)); // Output: 16

ES Modules

Exporting:

You can export values using export or export default.

Named Export:

// utils.js
export const PI = 3.14;

export function square(x) {
  return x * x;
}

Default Export:

// utils.js
export default function square(x) {
  return x * x;
}

Importing:

Use import to include modules. You can import named exports or default exports.

Named Import:

// main.js
import { PI, square } from "./utils.js";
console.log(PI); // Output: 3.14
console.log(square(4)); // Output: 16

Default Import:

// main.js
import square from "./utils.js";
console.log(square(4)); // Output: 16

Mixing CommonJS and ES Modules

In some projects, you might encounter a mix of CommonJS and ES Modules. Node.js provides support for both, but you need to be aware of their differences and limitations.

Importing CommonJS in ES Modules

You can import CommonJS modules in ES Modules using import syntax, but you'll need to handle default exports carefully.

Example:

// commonjs-module.js
module.exports = { PI: 3.14 };

// es-module.js
import commonjsModule from "./commonjs-module.js";
console.log(commonjsModule.PI); // Output: 3.14

Exporting ES Modules in CommonJS

To use ES Modules in CommonJS, you need to use dynamic import().

Example:

// es-module.js
export const PI = 3.14;

// commonjs-module.js
(async () => {
  const { PI } = await import("./es-module.js");
  console.log(PI); // Output: 3.14
})();

Summary

In this chapter, you learned about:

• CommonJS Modules: How to use require and module.exports for importing and exporting code in Node.js environments.
• ES Modules: The modern standard using import and export for modules, supported in both browsers and Node.js.
• Exporting and Importing: How to handle module exports and imports using both CommonJS and ES Module syntax.
• Mixing Modules: How to handle scenarios where both CommonJS and ES Modules are used in the same project.

Understanding modules and their usage is crucial for managing complex codebases and building scalable applications.