Modules (import/export)

As applications grow, organizing code becomes critical. JavaScript modules (ES6 modules) provide a standardized way to split code into separate files, where each file can export functionality and import what it needs from other modules. This creates clean, maintainable, testable code with clear dependencies. Modules eliminate global namespace pollution and enable code reuse across projects. Let's master JavaScript's module system!

Why Use Modules?

Benefits of Modules:

Code organization - logical file structure
Reusability - import functionality anywhere
Encapsulation - private by default, explicit exports
Maintainability - easier to find and fix bugs
No global namespace pollution
Clear dependencies - see what each file needs
Better for bundlers and tree-shaking

Modules organize code better

Without Modules

// Old way: Everything in one file
// main.js (1000+ lines)

function add(a, b) {
  return a + b;
}

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

function multiply(a, b) {
  return a * b;
}

class User {
  constructor(name) {
    this.name = name;
  }
}

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

// ... hundreds more lines
// Hard to navigate!
// Everything in global scope!

Output:

Not run yet...

With Modules

// Modern way: Separate modules
// math.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// models/User.js
export class User {
  constructor(name) {
    this.name = name;
  }
}

// main.js
import { add, subtract } from './math.js';
import { User } from './models/User.js';

// Clean, organized!
// Import only what you need!

Output:

Not run yet...

Basic Module Syntax

Exporting from a Module

JAVASCRIPT

// File: math.js

// Named exports (multiple per file)
export function add(a, b) {
  return a + b;
}

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

export const PI = 3.14159;

export class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

// Alternative: Export at end
function divide(a, b) {
  return a / b;
}

function power(a, b) {
  return a ** b;
}

export { divide, power };

// You can also rename on export
function square(x) {
  return x * x;
}

export { square as sq };

Importing from a Module

JAVASCRIPT

// File: main.js

// Import named exports (must use exact names)
import { add, subtract } from './math.js';

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

// Import multiple items
import { add, subtract, PI, Calculator } from './math.js';

console.log(PI);  // 3.14159
let calc = new Calculator();

// Import with rename (alias)
import { add as addition, subtract as subtraction } from './math.js';

console.log(addition(5, 3));  // 8

// Import everything as an object
import * as math from './math.js';

console.log(math.add(5, 3));     // 8
console.log(math.PI);            // 3.14159
let calc2 = new math.Calculator();

Default Exports

A module can have one default export (the main thing the module provides).

JAVASCRIPT

// File: User.js

// Default export (one per file)
export default class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

// Alternative syntax
class User {
  // ... class definition
}

export default User;

// Or with functions
export default function greet(name) {
  console.log(`Hello, ${name}`);
}

// Or with values
export default { name: 'App', version: '1.0.0' };

Importing Default Exports

JAVASCRIPT

// File: main.js

// Import default export (can use any name!)
import User from './User.js';

let user = new User('Alice', 'alice@test.com');
user.greet();  // "Hello, I'm Alice"

// Can name it anything
import MyUser from './User.js';
import Person from './User.js';
import U from './User.js';

// All work - importing the same default export

// Import default along with named exports
// File: utils.js
export default function main() {
  console.log('Main function');
}

export function helper() {
  console.log('Helper function');
}

// Import both
import main, { helper } from './utils.js';

main();     // "Main function"
helper();   // "Helper function"

Mixing Named and Default Exports

JAVASCRIPT

// File: database.js

// Default export (main functionality)
export default class Database {
  constructor(url) {
    this.url = url;
  }
  
  connect() {
    console.log(`Connecting to ${this.url}`);
  }
}

// Named exports (utilities)
export function validateConnection(url) {
  return url.startsWith('mongodb://');
}

export const DEFAULT_TIMEOUT = 5000;

export class ConnectionError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ConnectionError';
  }
}

// --- Using the module ---
// File: app.js

// Import default and named exports together
import Database, { 
  validateConnection, 
  DEFAULT_TIMEOUT, 
  ConnectionError 
} from './database.js';

let url = 'mongodb://localhost:27017';

if (validateConnection(url)) {
  let db = new Database(url);
  db.connect();
}

Common Import Patterns

1. Importing Specific Items

JAVASCRIPT

// Import only what you need
import { add, multiply } from './math.js';

// Good for tree-shaking (removing unused code)
// Bundle only includes 'add' and 'multiply'

2. Import All as Namespace

JAVASCRIPT

// Import everything as an object
import * as math from './math.js';

// Access as properties
math.add(5, 3);
math.multiply(2, 4);
math.PI;

// Good when you need many exports
// Clear namespace (math.add vs just add)

3. Import with Aliases

JAVASCRIPT

// Rename on import to avoid conflicts
import { add as mathAdd } from './math.js';
import { add as stringAdd } from './strings.js';

mathAdd(5, 3);      // Number addition
stringAdd('a', 'b'); // String concatenation

// Or rename multiple
import { 
  longFunctionName as short,
  anotherLongName as another
} from './module.js';

4. Side-Effect Imports

JAVASCRIPT

// Import module for its side effects only
// (module runs but doesn't export anything we need)

import './polyfills.js';  // Adds polyfills to global
import './styles.css';    // Loads CSS (with bundler)
import './analytics.js';  // Initializes tracking

// Module code runs, but nothing imported

5. Dynamic Imports

JAVASCRIPT

// Import modules dynamically (at runtime)
async function loadModule() {
  // import() returns a Promise
  const module = await import('./math.js');
  
  console.log(module.add(5, 3));  // 8
}

// Conditional loading
if (condition) {
  import('./heavy-module.js')
    .then(module => {
      module.doSomething();
    });
}

// Load on demand (code splitting)
button.addEventListener('click', async () => {
  const { openModal } = await import('./modal.js');
  openModal();
});

Module File Structure

TEXT

project/
│
├── src/
│   ├── utils/
│   │   ├── math.js          (math utilities)
│   │   ├── string.js        (string utilities)
│   │   └── validation.js    (validation functions)
│   │
│   ├── models/
│   │   ├── User.js          (User class)
│   │   ├── Product.js       (Product class)
│   │   └── Order.js         (Order class)
│   │
│   ├── services/
│   │   ├── api.js           (API calls)
│   │   ├── auth.js          (authentication)
│   │   └── database.js      (database operations)
│   │
│   ├── components/
│   │   ├── Header.js        (Header component)
│   │   ├── Footer.js        (Footer component)
│   │   └── Button.js        (Button component)
│   │
│   └── main.js              (entry point)
│
└── index.html

Practical Examples

Example 1: Utility Functions Module

JAVASCRIPT

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

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

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) throw new Error('Division by zero');
  return a / b;
}

export const PI = 3.14159;
export const E = 2.71828;

// File: utils/string.js
export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function reverse(str) {
  return str.split('').reverse().join('');
}

export function truncate(str, length) {
  if (str.length <= length) return str;
  return str.slice(0, length) + '...';
}

// File: main.js
import { add, multiply, PI } from './utils/math.js';
import { capitalize, truncate } from './utils/string.js';

console.log(add(5, 3));              // 8
console.log(PI);                     // 3.14159
console.log(capitalize('hello'));    // "Hello"
console.log(truncate('Long text here', 8));  // "Long tex..."

Example 2: Class-Based Module

JAVASCRIPT

// File: models/User.js
export default class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.createdAt = new Date();
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  
  static validateEmail(email) {
    return email.includes('@');
  }
}

export class UserManager {
  constructor() {
    this.users = [];
  }
  
  addUser(user) {
    this.users.push(user);
  }
  
  findByEmail(email) {
    return this.users.find(u => u.email === email);
  }
}

// File: main.js
import User, { UserManager } from './models/User.js';

let user1 = new User('Alice', 'alice@test.com');
let user2 = new User('Bob', 'bob@test.com');

let manager = new UserManager();
manager.addUser(user1);
manager.addUser(user2);

console.log(manager.findByEmail('alice@test.com'));

Example 3: API Service Module

JAVASCRIPT

// File: services/api.js
const BASE_URL = 'https://api.example.com';

export async function fetchUsers() {
  const response = await fetch(`${BASE_URL}/users`);
  if (!response.ok) throw new Error('Failed to fetch users');
  return response.json();
}

export async function fetchUserById(id) {
  const response = await fetch(`${BASE_URL}/users/${id}`);
  if (!response.ok) throw new Error('User not found');
  return response.json();
}

export async function createUser(userData) {
  const response = await fetch(`${BASE_URL}/users`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  if (!response.ok) throw new Error('Failed to create user');
  return response.json();
}

export async function updateUser(id, userData) {
  const response = await fetch(`${BASE_URL}/users/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  if (!response.ok) throw new Error('Failed to update user');
  return response.json();
}

export async function deleteUser(id) {
  const response = await fetch(`${BASE_URL}/users/${id}`, {
    method: 'DELETE'
  });
  if (!response.ok) throw new Error('Failed to delete user');
  return true;
}

// File: main.js
import { 
  fetchUsers, 
  fetchUserById, 
  createUser 
} from './services/api.js';

async function loadUserData() {
  try {
    let users = await fetchUsers();
    console.log('All users:', users);
    
    let user = await fetchUserById(1);
    console.log('User 1:', user);
    
    let newUser = await createUser({
      name: 'Charlie',
      email: 'charlie@test.com'
    });
    console.log('Created user:', newUser);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

loadUserData();

Example 4: Configuration Module

JAVASCRIPT

// File: config.js
export default {
  api: {
    baseURL: 'https://api.example.com',
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json'
    }
  },
  
  app: {
    name: 'My App',
    version: '1.0.0',
    environment: 'development'
  },
  
  features: {
    enableAnalytics: true,
    enableNotifications: false,
    maxUploadSize: 5242880  // 5MB
  }
};

// File: services/api.js
import config from './config.js';

async function fetchData(endpoint) {
  const response = await fetch(`${config.api.baseURL}${endpoint}`, {
    headers: config.api.headers
  });
  return response.json();
}

// File: main.js
import config from './config.js';

console.log(`Running ${config.app.name} v${config.app.version}`);

if (config.features.enableAnalytics) {
  initAnalytics();
}

JavaScript Modules

Master import/export for code organization

// Interactive Modules Demonstration
// Note: This simulates module behavior

console.log("=== Module Exports ===");

// Simulating a math module
const mathModule = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  PI: 3.14159
};

console.log("Math module exports:");
console.log("  - add");
console.log("  - subtract");
console.log("  - multiply");
console.log("  - PI");

console.log("\n=== Named Imports ===");

// Simulating: import { add, PI } from './math.js'
const { add, PI } = mathModule;

console.log("Imported: add, PI");
console.log("add(5, 3):", add(5, 3));
console.log("PI:", PI);

console.log("\n=== Import with Alias ===");

// Simulating: import { add as sum } from './math.js'
const { add: sum } = mathModule;

console.log("Imported: add as sum");
console.log("sum(10, 5):", sum(10, 5));

console.log("\n=== Import All ===");

// Simulating: import * as math from './math.js'
const math = mathModule;

console.log("Imported: * as math");
console.log("math.add(2, 3):", math.add(2, 3));
console.log("math.PI:", math.PI);

console.log("\n=== Default Export ===");

// Simulating default export
class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

console.log("Default export: User class");
const user = new User("Alice");
console.log(user.greet());

console.log("\n=== Mixed Exports ===");

// Simulating module with default + named exports
const databaseModule = {
  default: class Database {
    constructor(url) {
      this.url = url;
    }
    connect() {
      return `Connected to ${this.url}`;
    }
  },
  validateConnection: (url) => url.includes("://"),
  DEFAULT_TIMEOUT: 5000
};

const Database = databaseModule.default;
const { validateConnection, DEFAULT_TIMEOUT } = databaseModule;

console.log("Module exports:");
console.log("  Default: Database class");
console.log("  Named: validateConnection, DEFAULT_TIMEOUT");

const db = new Database("mongodb://localhost");
console.log(db.connect());
console.log("Timeout:", DEFAULT_TIMEOUT);

console.log("\n=== Module Organization ===");

console.log("Typical project structure:");
console.log("  utils/");
console.log("    ├── math.js");
console.log("    └── string.js");
console.log("  models/");
console.log("    ├── User.js");
console.log("    └── Product.js");
console.log("  services/");
console.log("    ├── api.js");
console.log("    └── auth.js");
console.log("  main.js");

console.log("\n=== Benefits of Modules ===");

const benefits = [
  "✓ Code organization",
  "✓ Reusability",
  "✓ Encapsulation",
  "✓ No global pollution",
  "✓ Clear dependencies",
  "✓ Easier testing",
  "✓ Better maintenance"
];

benefits.forEach(b => console.log(b));

console.log("\n=== Common Patterns ===");

console.log("\n1. Named exports:");
console.log("   export function func() {}");
console.log("   import { func } from './module'");

console.log("\n2. Default export:");
console.log("   export default class MyClass {}");
console.log("   import MyClass from './module'");

console.log("\n3. Mixed:");
console.log("   export default Main");
console.log("   export { helper1, helper2 }");
console.log("   import Main, { helper1 } from './module'");

console.log("\n4. Import all:");
console.log("   import * as utils from './utils'");
console.log("   utils.func1()");

console.log("\n=== Best Practices ===");

console.log("\n✓ One module per file");
console.log("✓ Use named exports for utilities");
console.log("✓ Use default export for main functionality");
console.log("✓ Import only what you need");
console.log("✓ Organize by feature/domain");
console.log("✓ Keep modules focused and small");

Output:

Click "Run" to execute your code...

💡 Tip: Use console.log() to see your output in the console above.

Important Notes

Module Requirements:

Modules must be served via HTTP(S), not file:// protocol
Use type="module" in script tag: <script type="module" src="main.js">
Modules are automatically in strict mode
Modules are deferred by default (like defer attribute)
Each module has its own scope (not global)
File extensions (.js) are required in import paths in browsers

HTML

<!-- HTML file -->
<!DOCTYPE html>
<html>
<head>
  <title>Modules Example</title>
</head>
<body>
  <h1>My App</h1>
  
  <!-- Regular script (old way) -->
  <script src="old-script.js"></script>
  
  <!-- Module script (modern way) -->
  <script type="module" src="main.js"></script>
  
  <!-- Inline module -->
  <script type="module">
    import { add } from './math.js';
    console.log(add(5, 3));
  </script>
</body>
</html>

Key Takeaways

Modules organize code into separate files with explicit dependencies
export makes functionality available to other modules
import brings functionality from other modules
Named exports: multiple per file, exact names required
Default export: one per file, any name on import
import * as name imports all as an object
Use aliases with 'as' to rename imports/exports
Dynamic imports with import() for code splitting
Modules have their own scope (no global pollution)
Organize by feature: utils/, models/, services/, components/

What's Next?

You now understand JavaScript modules and can organize code into maintainable, reusable pieces! You've learned named and default exports, import patterns, and how to structure modular applications.

In the next lesson, we'll explore Optional Chaining and Nullish Coalescing—two powerful operators (?. and ??) that make working with potentially null/undefined values much cleaner and safer!

💪 Practice Challenge:

Before moving on, try:

Create a math utilities module with named exports
Create a User class module with default export
Build an API service module with multiple functions
Organize a project into utils/, models/, services/ folders
Practice importing with aliases and namespace imports

Test Your Understanding

Question 1 / 4

What are JavaScript modules?

Score: 0 / 0

Why Use Modules?

Benefits of Modules:

Code organization - logical file structure
Reusability - import functionality anywhere
Encapsulation - private by default, explicit exports
Maintainability - easier to find and fix bugs
No global namespace pollution
Clear dependencies - see what each file needs
Better for bundlers and tree-shaking

Modules organize code better

Without Modules

// Old way: Everything in one file
// main.js (1000+ lines)

function add(a, b) {
  return a + b;
}

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

function multiply(a, b) {
  return a * b;
}

class User {
  constructor(name) {
    this.name = name;
  }
}

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

// ... hundreds more lines
// Hard to navigate!
// Everything in global scope!

Output:

Not run yet...

With Modules

// Modern way: Separate modules
// math.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// models/User.js
export class User {
  constructor(name) {
    this.name = name;
  }
}

// main.js
import { add, subtract } from './math.js';
import { User } from './models/User.js';

// Clean, organized!
// Import only what you need!

Output:

Not run yet...

Basic Module Syntax

Exporting from a Module

JAVASCRIPT

// File: math.js

// Named exports (multiple per file)
export function add(a, b) {
  return a + b;
}

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

export const PI = 3.14159;

export class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

// Alternative: Export at end
function divide(a, b) {
  return a / b;
}

function power(a, b) {
  return a ** b;
}

export { divide, power };

// You can also rename on export
function square(x) {
  return x * x;
}

export { square as sq };

Importing from a Module

JAVASCRIPT

// File: main.js

// Import named exports (must use exact names)
import { add, subtract } from './math.js';

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

// Import multiple items
import { add, subtract, PI, Calculator } from './math.js';

console.log(PI);  // 3.14159
let calc = new Calculator();

// Import with rename (alias)
import { add as addition, subtract as subtraction } from './math.js';

console.log(addition(5, 3));  // 8

// Import everything as an object
import * as math from './math.js';

console.log(math.add(5, 3));     // 8
console.log(math.PI);            // 3.14159
let calc2 = new math.Calculator();

Default Exports

A module can have one default export (the main thing the module provides).

JAVASCRIPT

// File: User.js

// Default export (one per file)
export default class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

// Alternative syntax
class User {
  // ... class definition
}

export default User;

// Or with functions
export default function greet(name) {
  console.log(`Hello, ${name}`);
}

// Or with values
export default { name: 'App', version: '1.0.0' };

Importing Default Exports

JAVASCRIPT

// File: main.js

// Import default export (can use any name!)
import User from './User.js';

let user = new User('Alice', 'alice@test.com');
user.greet();  // "Hello, I'm Alice"

// Can name it anything
import MyUser from './User.js';
import Person from './User.js';
import U from './User.js';

// All work - importing the same default export

// Import default along with named exports
// File: utils.js
export default function main() {
  console.log('Main function');
}

export function helper() {
  console.log('Helper function');
}

// Import both
import main, { helper } from './utils.js';

main();     // "Main function"
helper();   // "Helper function"

Mixing Named and Default Exports

JAVASCRIPT

// File: database.js

// Default export (main functionality)
export default class Database {
  constructor(url) {
    this.url = url;
  }
  
  connect() {
    console.log(`Connecting to ${this.url}`);
  }
}

// Named exports (utilities)
export function validateConnection(url) {
  return url.startsWith('mongodb://');
}

export const DEFAULT_TIMEOUT = 5000;

export class ConnectionError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ConnectionError';
  }
}

// --- Using the module ---
// File: app.js

// Import default and named exports together
import Database, { 
  validateConnection, 
  DEFAULT_TIMEOUT, 
  ConnectionError 
} from './database.js';

let url = 'mongodb://localhost:27017';

if (validateConnection(url)) {
  let db = new Database(url);
  db.connect();
}

Common Import Patterns

1. Importing Specific Items

JAVASCRIPT

// Import only what you need
import { add, multiply } from './math.js';

// Good for tree-shaking (removing unused code)
// Bundle only includes 'add' and 'multiply'

2. Import All as Namespace

JAVASCRIPT

// Import everything as an object
import * as math from './math.js';

// Access as properties
math.add(5, 3);
math.multiply(2, 4);
math.PI;

// Good when you need many exports
// Clear namespace (math.add vs just add)

3. Import with Aliases

JAVASCRIPT

// Rename on import to avoid conflicts
import { add as mathAdd } from './math.js';
import { add as stringAdd } from './strings.js';

mathAdd(5, 3);      // Number addition
stringAdd('a', 'b'); // String concatenation

// Or rename multiple
import { 
  longFunctionName as short,
  anotherLongName as another
} from './module.js';

4. Side-Effect Imports

JAVASCRIPT

// Import module for its side effects only
// (module runs but doesn't export anything we need)

import './polyfills.js';  // Adds polyfills to global
import './styles.css';    // Loads CSS (with bundler)
import './analytics.js';  // Initializes tracking

// Module code runs, but nothing imported

5. Dynamic Imports

JAVASCRIPT

// Import modules dynamically (at runtime)
async function loadModule() {
  // import() returns a Promise
  const module = await import('./math.js');
  
  console.log(module.add(5, 3));  // 8
}

// Conditional loading
if (condition) {
  import('./heavy-module.js')
    .then(module => {
      module.doSomething();
    });
}

// Load on demand (code splitting)
button.addEventListener('click', async () => {
  const { openModal } = await import('./modal.js');
  openModal();
});

Module File Structure

TEXT

project/
│
├── src/
│   ├── utils/
│   │   ├── math.js          (math utilities)
│   │   ├── string.js        (string utilities)
│   │   └── validation.js    (validation functions)
│   │
│   ├── models/
│   │   ├── User.js          (User class)
│   │   ├── Product.js       (Product class)
│   │   └── Order.js         (Order class)
│   │
│   ├── services/
│   │   ├── api.js           (API calls)
│   │   ├── auth.js          (authentication)
│   │   └── database.js      (database operations)
│   │
│   ├── components/
│   │   ├── Header.js        (Header component)
│   │   ├── Footer.js        (Footer component)
│   │   └── Button.js        (Button component)
│   │
│   └── main.js              (entry point)
│
└── index.html

Practical Examples

Example 1: Utility Functions Module

JAVASCRIPT

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

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

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) throw new Error('Division by zero');
  return a / b;
}

export const PI = 3.14159;
export const E = 2.71828;

// File: utils/string.js
export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function reverse(str) {
  return str.split('').reverse().join('');
}

export function truncate(str, length) {
  if (str.length <= length) return str;
  return str.slice(0, length) + '...';
}

// File: main.js
import { add, multiply, PI } from './utils/math.js';
import { capitalize, truncate } from './utils/string.js';

console.log(add(5, 3));              // 8
console.log(PI);                     // 3.14159
console.log(capitalize('hello'));    // "Hello"
console.log(truncate('Long text here', 8));  // "Long tex..."

Example 2: Class-Based Module

JAVASCRIPT

// File: models/User.js
export default class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.createdAt = new Date();
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  
  static validateEmail(email) {
    return email.includes('@');
  }
}

export class UserManager {
  constructor() {
    this.users = [];
  }
  
  addUser(user) {
    this.users.push(user);
  }
  
  findByEmail(email) {
    return this.users.find(u => u.email === email);
  }
}

// File: main.js
import User, { UserManager } from './models/User.js';

let user1 = new User('Alice', 'alice@test.com');
let user2 = new User('Bob', 'bob@test.com');

let manager = new UserManager();
manager.addUser(user1);
manager.addUser(user2);

console.log(manager.findByEmail('alice@test.com'));

Example 3: API Service Module

JAVASCRIPT

// File: services/api.js
const BASE_URL = 'https://api.example.com';

export async function fetchUsers() {
  const response = await fetch(`${BASE_URL}/users`);
  if (!response.ok) throw new Error('Failed to fetch users');
  return response.json();
}

export async function fetchUserById(id) {
  const response = await fetch(`${BASE_URL}/users/${id}`);
  if (!response.ok) throw new Error('User not found');
  return response.json();
}

export async function createUser(userData) {
  const response = await fetch(`${BASE_URL}/users`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  if (!response.ok) throw new Error('Failed to create user');
  return response.json();
}

export async function updateUser(id, userData) {
  const response = await fetch(`${BASE_URL}/users/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  if (!response.ok) throw new Error('Failed to update user');
  return response.json();
}

export async function deleteUser(id) {
  const response = await fetch(`${BASE_URL}/users/${id}`, {
    method: 'DELETE'
  });
  if (!response.ok) throw new Error('Failed to delete user');
  return true;
}

// File: main.js
import { 
  fetchUsers, 
  fetchUserById, 
  createUser 
} from './services/api.js';

async function loadUserData() {
  try {
    let users = await fetchUsers();
    console.log('All users:', users);
    
    let user = await fetchUserById(1);
    console.log('User 1:', user);
    
    let newUser = await createUser({
      name: 'Charlie',
      email: 'charlie@test.com'
    });
    console.log('Created user:', newUser);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

loadUserData();

Example 4: Configuration Module

JAVASCRIPT

// File: config.js
export default {
  api: {
    baseURL: 'https://api.example.com',
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json'
    }
  },
  
  app: {
    name: 'My App',
    version: '1.0.0',
    environment: 'development'
  },
  
  features: {
    enableAnalytics: true,
    enableNotifications: false,
    maxUploadSize: 5242880  // 5MB
  }
};

// File: services/api.js
import config from './config.js';

async function fetchData(endpoint) {
  const response = await fetch(`${config.api.baseURL}${endpoint}`, {
    headers: config.api.headers
  });
  return response.json();
}

// File: main.js
import config from './config.js';

console.log(`Running ${config.app.name} v${config.app.version}`);

if (config.features.enableAnalytics) {
  initAnalytics();
}

JavaScript Modules

Master import/export for code organization

// Interactive Modules Demonstration
// Note: This simulates module behavior

console.log("=== Module Exports ===");

// Simulating a math module
const mathModule = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  PI: 3.14159
};

console.log("Math module exports:");
console.log("  - add");
console.log("  - subtract");
console.log("  - multiply");
console.log("  - PI");

console.log("\n=== Named Imports ===");

// Simulating: import { add, PI } from './math.js'
const { add, PI } = mathModule;

console.log("Imported: add, PI");
console.log("add(5, 3):", add(5, 3));
console.log("PI:", PI);

console.log("\n=== Import with Alias ===");

// Simulating: import { add as sum } from './math.js'
const { add: sum } = mathModule;

console.log("Imported: add as sum");
console.log("sum(10, 5):", sum(10, 5));

console.log("\n=== Import All ===");

// Simulating: import * as math from './math.js'
const math = mathModule;

console.log("Imported: * as math");
console.log("math.add(2, 3):", math.add(2, 3));
console.log("math.PI:", math.PI);

console.log("\n=== Default Export ===");

// Simulating default export
class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

console.log("Default export: User class");
const user = new User("Alice");
console.log(user.greet());

console.log("\n=== Mixed Exports ===");

const Database = databaseModule.default;
const { validateConnection, DEFAULT_TIMEOUT } = databaseModule;

console.log("Module exports:");
console.log("  Default: Database class");
console.log("  Named: validateConnection, DEFAULT_TIMEOUT");

const db = new Database("mongodb://localhost");
console.log(db.connect());
console.log("Timeout:", DEFAULT_TIMEOUT);

console.log("\n=== Module Organization ===");

console.log("\n=== Benefits of Modules ===");

benefits.forEach(b => console.log(b));

console.log("\n=== Common Patterns ===");

console.log("\n1. Named exports:");
console.log("   export function func() {}");
console.log("   import { func } from './module'");

console.log("\n2. Default export:");
console.log("   export default class MyClass {}");
console.log("   import MyClass from './module'");

console.log("\n3. Mixed:");
console.log("   export default Main");
console.log("   export { helper1, helper2 }");
console.log("   import Main, { helper1 } from './module'");

console.log("\n4. Import all:");
console.log("   import * as utils from './utils'");
console.log("   utils.func1()");

console.log("\n=== Best Practices ===");

Output:

Click "Run" to execute your code...

💡 Tip: Use console.log() to see your output in the console above.

Important Notes

Module Requirements:

Modules must be served via HTTP(S), not file:// protocol
Use type="module" in script tag: <script type="module" src="main.js">
Modules are automatically in strict mode
Modules are deferred by default (like defer attribute)
Each module has its own scope (not global)
File extensions (.js) are required in import paths in browsers

HTML

<!-- HTML file -->
<!DOCTYPE html>
<html>
<head>
  <title>Modules Example</title>
</head>
<body>
  <h1>My App</h1>
  
  <!-- Regular script (old way) -->
  <script src="old-script.js"></script>
  
  <!-- Module script (modern way) -->
  <script type="module" src="main.js"></script>
  
  <!-- Inline module -->
  <script type="module">
    import { add } from './math.js';
    console.log(add(5, 3));
  </script>
</body>
</html>

Key Takeaways

Modules organize code into separate files with explicit dependencies
export makes functionality available to other modules
import brings functionality from other modules
Named exports: multiple per file, exact names required
Default export: one per file, any name on import
import * as name imports all as an object
Use aliases with 'as' to rename imports/exports
Dynamic imports with import() for code splitting
Modules have their own scope (no global pollution)
Organize by feature: utils/, models/, services/, components/

What's Next?

You now understand JavaScript modules and can organize code into maintainable, reusable pieces! You've learned named and default exports, import patterns, and how to structure modular applications.

In the next lesson, we'll explore Optional Chaining and Nullish Coalescing—two powerful operators (?. and ??) that make working with potentially null/undefined values much cleaner and safer!

💪 Practice Challenge:

Before moving on, try:

Create a math utilities module with named exports
Create a User class module with default export
Build an API service module with multiple functions
Organize a project into utils/, models/, services/ folders
Practice importing with aliases and namespace imports

Test Your Understanding

Question 1 / 4

What are JavaScript modules?

Score: 0 / 0

Why Use Modules?

Without Modules

With Modules

Basic Module Syntax

Exporting from a Module

Importing from a Module

Default Exports

Importing Default Exports

Mixing Named and Default Exports

Common Import Patterns

1. Importing Specific Items

2. Import All as Namespace

3. Import with Aliases

4. Side-Effect Imports

5. Dynamic Imports

Module File Structure

Practical Examples

Example 1: Utility Functions Module

Example 2: Class-Based Module

Example 3: API Service Module

Example 4: Configuration Module

JavaScript Modules

Important Notes

Key Takeaways

What's Next?

Test Your Understanding

What are JavaScript modules?

Mastering JavaScript modules! 📦

Continue Learning JavaScript

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

JavaScript Tutorials

Modules (import/export)

Why Use Modules?

Without Modules

With Modules

Basic Module Syntax

Exporting from a Module

Importing from a Module

Default Exports

Importing Default Exports

Mixing Named and Default Exports

Common Import Patterns

1. Importing Specific Items

2. Import All as Namespace

3. Import with Aliases

4. Side-Effect Imports

5. Dynamic Imports

Module File Structure

Practical Examples

Example 1: Utility Functions Module

Example 2: Class-Based Module

Example 3: API Service Module

Example 4: Configuration Module

JavaScript Modules

Important Notes

Key Takeaways

What's Next?

Test Your Understanding

What are JavaScript modules?

Mastering JavaScript modules! 📦

Continue Learning JavaScript

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

JavaScript Tutorials