JavaScript Modules (import and export)

A module is a JavaScript file that shares some of its code with other files using export and import.

Why Modules?

As a project grows, one huge file becomes hard to read. Modules let you:

• Keep each part in its own file: cart.js, prices.js, ui.js
• Hide helper code. Only what you export can be used outside
• Avoid name clashes. Every module has its own scope, so two files can both have a variable called total
• Reuse code across projects, and load libraries from npm

Named Exports

Put export before anything you want to share. A file can have many named exports.

// prices.js
export const GST = 0.18;

export function withTax(price) {
  return Math.round(price * (1 + GST));
}

export function formatRs(amount) {
  return "Rs " + amount.toLocaleString("en-PK");
}

const secretMargin = 0.3;   // not exported: private to this file

Import them by the same names, inside curly brackets:

// app.js
import { withTax, formatRs } from "./prices.js";

console.log(formatRs(withTax(25000)));

Rs 29,500

Default Export

A file can also have one default export. This is common when a file has one main thing, like a class.

// Cart.js
export default class Cart {
  constructor() { this.items = []; }
  add(name, price) { this.items.push({ name, price }); }
  total() { return this.items.reduce((sum, i) => sum + i.price, 0); }
}

When importing a default export, you choose the name and do not use curly brackets:

import Cart from "./Cart.js";
import ShoppingCart from "./Cart.js";   // any name works

Import and Export Syntax

Using Modules in a Page

Load the starting file with type="module":

<script type="module" src="app.js"></script>

Module scripts are different from normal scripts:

A Module You Can Run

A Try it page cannot hold two files, but you can still see module behaviour. Inside type="module", variables are not global, and you can import a library from a CDN:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script type="module">
import confetti from "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/+esm";

const out = document.getElementById("demo");
const message = "Module loaded! You passed the exam.";

out.innerHTML = message + "<br>Is 'message' global? " + (typeof window.message !== "undefined");
confetti();
</script>

</body>
</html>

Module loaded! You passed the exam.
Is 'message' global? false

Dynamic import()

import() used like a function loads a module only when needed. It returns a promise. This keeps the first page load small.

document.getElementById("chartBtn").addEventListener("click", async () => {
  const { drawChart } = await import("./chart.js");
  drawChart();
});

The chart.js file is downloaded only when someone clicks the button.

Import Maps

An import map lets you give short names to module URLs, so you can write import confetti from "confetti" instead of a long link:

<script type="importmap">
{
  "imports": {
    "confetti": "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/+esm"
  }
}
</script>
<script type="module">
  import confetti from "confetti";
  confetti();
</script>

In real projects, tools like Vite, Next.js or Node.js use the same import/export syntax, and handle packages from npm for you.

Exercise