JavaScript Modules: Organizing Code with import and export

The Problem: Script-Tag Chaos 🌪️

Before modules (pre-2015), multi-file JavaScript looked like this:

<script src="utils.js">
</script>
<script src="cart.js">
</script>
<script src="app.js">
</script>

Three files — butone shared global scope:

// utils.js
let total = 0;
// global 🌍
// cart.js
let total = 999;
// 😱 SILENTLY overwrites utils.js's total!
// app.js
console.log(total);
// 999? 0? Depends on load order 💀

Load order matters, names collide, and nobody knows which file "owns" anything. This chaos is exactly why the community invented workarounds (like Lesson 22's closure-basedmodule pattern) — until 2015, when JavaScript gotrealmodules built in.

What Is a Module?

A module is simply a JavaScript file that:

1. Has its own private scope(nothing leaks to global)
2. Exportsspecific things it wants to share
3. Importsspecific things it needs from other modules

That's it. A module = a file with walls and doors. 🧱🚪

export: Opening the Doors 🚪

Nothing in a module is visible outside unless youexportit. Two flavors:

① Named Exports — Share Multiple Things by Name

// 📄 mathUtils.js — a module!
// Export inline, at the declaration:
export const TAX_RATE = 0.18;
export function add(a, b) {
  return a + b;
}// Private to this file — NOT exported, invisible outside 🔒:
function secretHelper() {
  return "nobody outside can call me";
}// …or export at the bottom, as a list:
function multiply(a, b) {
  return a * b;
}function divide(a, b) {
  return a / b;
}export {
  multiply, divide
};

Anything withoutexportstaysprivate— modules give you Lesson 31's encapsulation at thefilelevel, for free.

② Default Export — Share One Main Thing

Each module can haveonedefault export — its "headline" feature:

// 📄 User.js
export default class User {
  constructor(name) {
    this.name = name;
  } greet() {
    return `Hi, I'm ${this.name} 👋`;
  }
}

Or with a function:

// 📄 formatPrice.js
export default function formatPrice(amount) {
  return `₹${amount.toFixed(2)}`;
}

import: Walking Through the Doors 📥

Importing Named Exports — Names in Braces, Must Match

// 📄 app.js
import {
  add, multiply, TAX_RATE
} from "./mathUtils.js";
console.log(add(2, 3));
// 5
console.log(multiply(4, 5));
// 20
console.log(TAX_RATE);
// 0.18

Rules of named imports:

• ✅ Use curly braces{ }
• ✅ Names must match the exportsexactly(or rename withas— below)
• ❌ Typos fail loudly:import { addd }→ SyntaxError at load time (strict mode in action — Lesson 36!)

Importing a Default Export — Any Name You Like

// 📄 app.js
import User from "./User.js";
// no braces! name is YOUR choice
import format from "./formatPrice.js";
// renamed freely ✅
const u = new User("Priya");
console.log(u.greet());
// "Hi, I'm Priya 👋"
console.log(format(99.9));
// "₹99.90"

import formatPrice, {
  add, TAX_RATE
} from "./mathUtils.js";
//     👆 default        👆 named — together ✅

// Rename on import (avoid name collisions):
import {
  add as sum
} from "./mathUtils.js";
console.log(sum(2, 3));
// 5
// Import EVERYTHING as a namespace object:
import * as MathUtils from "./mathUtils.js";
console.log(MathUtils.add(2, 3));
// 5
console.log(MathUtils.TAX_RATE);
// 0.18
// Import for side effects only (runs the file, imports nothing):
import "./setupAnalytics.js";

<!-- ❌ Classic script — imports will ERROR: -->
<script src="app.js"></script>


<!-- ✅ Module script — imports work: -->
<script type="module" src="app.js"></script>

❌ CORS error: Cross origin requests are only supported for HTTP…❌ "Cannot use import statement outside a module"

my-shop/├── index.html├── mathUtils.js      🧮 calculations├── products.js       📦 data└── app.js            🎛️ the conductor (entry point)

// 📄 mathUtils.js — named exportsexport function formatPrice(amount) {  return `₹${amount.toFixed(2)}`;}
export function applyTax(amount, rate = 0.18) {
  return amount *(1 + rate);
  // default param — Lesson 38!}

// 📄 products.js — data + a default export
export const products =[ {
  name: "Keyboard", price: 1299
}, {
  name: "Mouse", price: 599
}, {
  name: "Cable", price: 199
}];
export default function findProduct(name) {
  return products.find(p => p.name === name);
  // arrow + find — Lesson 41!
}

// 📄 app.js — the entry point imports what it needs
import {
  formatPrice, applyTax
} from "./mathUtils.js";
import findProduct, {
  products
} from "./products.js";
console.log("🛒 PRODUCT CATALOG");
products.forEach(p => {
  console.log(`${p.name}: ${formatPrice(p.price)} (+tax: ${formatPrice(applyTax(p.price))})`);
});
const found = findProduct("Mouse");
console.log(`\n🔍 Found: ${found.name} — ${formatPrice(found.price)}`);

<!-- 📄 index.html -->
<!DOCTYPE html>
<html>
<head><title>My Shop 🛒</title></head>
<body>
  <h1>My Shop — check the console! (F12)</h1>
  <script type="module" src="app.js"></script>   <!-- ⭐ the magic attribute -->
</body>
</html>

Output:

🛒 PRODUCT CATALOGKeyboard: ₹1299.00(+tax: ₹1532.82)Mouse: ₹599.00(+tax: ₹706.82)Cable: ₹199.00(+tax: ₹234.82)🔍 Found: Mouse — ₹599.00

Notice the architecture:app.jsdoesn't knowhowtax is calculated orhowproducts are found — it just imports abilities. Change the tax rate? One file. Add products? One file.That's the whole point of modules: change one room without rebuilding the house.🏠

A Quick Word on Node.js (CommonJS) 🟢

If you explore Node.js tutorials, you may see theoldermodule system:

// CommonJS (Node's classic style — still everywhere):
const fs = require("fs");
// require instead of import
module.exports = myFunction;
// module.exports instead of export

Modern rule:use ES modules (import/export) everywhere. Node fully supports them now (.mjsfiles or"type": "module"in package.json) — recognize CommonJS when you see it, but write ESM.

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 46 Quiz 🧠

1. What two keywords power JavaScript modules, and what does each do?
2. Fix this:import { formatPrice } from "utils.js";(the file sits next to app.js)
3. What's the difference in import syntax between a named export and a default export?
4. Why do modules fail when you double-click index.html — and what's the fix?
5. Name two thingstype="module"gives you automatically (besides import/export).

(Answers: 1. export shares specific things from a file; import brings them into another file · 2. Relative paths need./:from "./utils.js"· 3. Named imports use braces with exact names (import { add }), default imports use no braces and any name (import add) · 4. Browsers block modules over file:// for security — run a local server (e.g., VS Code Live Server) so it loads overhttp://localhost· 5. Automatic strict mode and deferred execution (plus per-file scope)