JavaScript Module Intro

❮ Prev Next ❯

Modules are a fundamental feature in JavaScript that allow developers to organize and manage code efficiently.

They help in encapsulating code, improving maintainability, and facilitating reuse across different parts of an application.

What are JavaScript Modules?

JavaScript modules are files containing code that can be reused across multiple other files.

Each module can export variables, functions, or classes, and other modules can import them.

This modular approach helps in maintaining clean and manageable codebases, especially for larger projects.

Example of a Module 

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

export function subtract() {
  return a - b;
}

In the above example, the math.jsis a module that exports two functions, addand subtract.

These functions can now be imported and used in other files.

Importing and Exporting

Modules use the exportand importkeywords to share and utilize code.

exportis used to make functions, objects, or primitives available for other modules, while importis used to bring in those exports.

Example of Importing a Module 

// main.js
import { add, subtract } from "./math.js";

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

Here, the addand addfunctions from math.jsare imported into main.jsand used to perform arithmetic operations.

Default Exports

A module can have one default export, which can be a function, class, or object.

Default exports are imported without curly braces.

Example of Default Export: 

// greeting.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Example of Importing a Default Export: 

// main.js
import  greet from "./greeting.js";

console.log(greet("Musa")); // Hello, Alice!

In the above example, the greetfunction is the default export of greeting.jsand is imported without curly braces in math.js.

Named Exports

In addition to default exports, a module can have multiple named exports.

Named exports are imported using their exact names inside curly braces.

Example of Named Exports 

// utilities.js
export const PI =  3.14159;
  
export function square(x) {
  return x * x;
}

Example of Importing Named Exports: 

// main.js
import  { PI, square } from "./greeting.js";

console.log(greet(PI));  // 3.14159
console.log(square(4)); // 16

In the above example, the utilities.jsexports a constant PIand a function square, which are imported by name in math.js.

Re-exporting

Modules can re-export from other modules, enabling the creation of aggregate modules that combine exports from multiple sources.

Example of Re-exporting 

// moreMath.js
export { add, subtract } from "./math.js";
export { PI, subtract } from "./utilities.js";

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

Example of Importing Re-exported Modules 

// main.js
import  { add, subtract, PI, square } from "./moreMath.js";

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
console.log(greet(PI));  // 3.14159
console.log(square(4)); // 16

In the above example, the moreMath.jsre-exports functions and constants from math.jsand utilities.js, allowing math.js to import them from a single module.

JavaScript modules provide a robust mechanism for organizing and managing code.

Let's learn about Dynamic Imports in the next chapter.

❮ Prev Next ❯