Modules Introduction

You will be able to split JavaScript into separate files and connect them with import and export so code is reusable and easier to maintain.

What it is

A JavaScript module is a file that can export values and import values from other files. Instead of putting all code in one script, you create small files for related behavior, such as math.js, ui.js, or api.js. Each module has its own top-level scope, so variables do not automatically leak into the global object.

Related terms include export, import, default export, named export, and module specifier, which is the path used in import.

Why it matters

• Keeps large programs organized by feature or responsibility.
• Reduces accidental global variable conflicts.
• Makes functions and constants reusable across pages or tests.
• Helps tools understand dependencies for bundling and linting.
• Supports clearer team workflows because files have smaller purposes.

Syntax or steps

The smallest useful pattern is: create a file that exports something, then import it in another file.

1. In math.js, use export before a function or constant.
2. In app.js, use import with the relative path, including the file extension.
3. In HTML, load the entry file with <script type="module" src="app.js"></script>.

Example

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Modules</title>
</head>
<body>
  <p id="output"></p>
  <script type="module" src="app.js"></script>
</body>
</html>

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

export const PI = 3.14159;

// app.js
import { add, PI } from "./math.js";

document.getElementById("output").textContent = `2 + 3 = ${add(2, 3)}`;
console.log(PI);

Part by part: export function add makes add available to other modules. import { add, PI } brings those named exports into app.js. The type="module" attribute tells the browser to treat app.js as an ES module, so it can use import and export.

To run this in a browser, serve the files from a local web server. Opening index.html directly from disk may block module loading due to browser security rules.

Common mistakes

• Forgetting type="module". Fix: add it to the script tag.
• Using file:// instead of a local server. Fix: serve files with a simple HTTP server.
• Missing the file extension in the import path. Fix: use ./math.js, not ./math, in browser modules.
• Mixing default and named imports. Fix: match the export style: export default imports without braces, named exports import with braces.

When to use it

Use ES modules when you want modern, reusable JavaScript with explicit dependencies. Use classic scripts when you need very small pages or must support old environments without module loading.

Practice

Guided exercise: create greet.js that exports a function named greet. Import it in app.js and display Hello, Ada! in the page.

Challenge: export a default object with name and score, then import it and log the name. Hint: use export default and import player from "./player.js".

Quick check

Question: Why does app.js need type="module"?

Answer: It enables ES module syntax such as import and export and gives the script module scoping and strict-mode behavior.

Summary

Modules let you divide JavaScript into files with clear inputs and outputs. By exporting reusable pieces and importing them where needed, you reduce global clutter and make code easier to test, read, and maintain.