JavaScript Lesson 19: Modules (Import/Export)

Modules let you split your code into multiple files and share code between them. This is how every professional JavaScript project is organized.

Named Exports

// File: math.js
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
export const PI = 3.14159;

// OR export at the bottom
function subtract(a, b) { return a - b; }
const E = 2.71828;
export { subtract, E };

// File: main.js
import { add, multiply, PI } from "./math.js";

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

// Import with alias
import { add as addNumbers } from "./math.js";

// Import everything
import * as MathUtils from "./math.js";
console.log(MathUtils.PI);

Default Export

// File: Calculator.js
class Calculator {
  add(a, b) { return a + b; }
  subtract(a, b) { return a - b; }
}

export default Calculator;  // one default per file

// File: main.js
import Calculator from "./Calculator.js";  // any name!
const calc = new Calculator();
console.log(calc.add(10, 5));  // 15

Using Modules in HTML

<!-- Add type="module" to your script tag -->
<script type="module" src="main.js"></script>

<!-- Inside main.js you can now import -->
// import { add } from "./math.js";

Real-World Pattern

// utils/validation.js
export const isEmail = (str) => /\S+@\S+\.\S+/.test(str);
export const isPassword = (str) => str.length >= 8;

// utils/formatters.js
export const formatDate = (date) => date.toLocaleDateString();
export const formatCurrency = (n) => `$${n.toFixed(2)}`;

// main.js
import { isEmail, isPassword } from "./utils/validation.js";
import { formatCurrency } from "./utils/formatters.js";

console.log(isEmail("test@example.com"));  // true
console.log(formatCurrency(9.999));        // "$10.00"