JavaScript ES6+

Modules (Import/Export)

Organize code into reusable, maintainable modules

Find videos you like?

Save to resource drawer for future reference!

ES6 Modules: Code Organization

Modules let you split code into separate files and import/export between them. Each module has its own scope, preventing global namespace pollution!

Benefits of Modules

✓ Reusability - Use code across multiple files
✓ Maintainability - Organize code logically
✓ Encapsulation - Private by default, export only what's needed

Named Exports

Export multiple items from a module

📄 math.js (Export)

// Export individual items
export const PI = 3.14159;
export const E = 2.71828;

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

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

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

📄 app.js (Import)

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

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

const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20

// Import all as object
import * as Math from './math.js';
console.log(Math.PI);   // 3.14159
console.log(Math.E);    // 2.71828

Named Export Variations

Different ways to export named items (simulated)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Default Exports

One main export per module

📄 user.js (Export)

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

// Or with function
export default function createUser(name) {
  return { name };
}

📄 app.js (Import)

// Import default (no braces!)
import User from './user.js';

const alice = new User('Alice');
alice.greet(); // Hi, I'm Alice

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

// Both work - same import!

Default Export Examples

One default export per file (simulated)

javascript

code

DarkEditable

// Simulating default exports from different files

// person.js - Default export class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const personModule = Person; // Simulating: export default Person
console.log('Person class exported');

// utils.js - Default export function
function formatDate(date) {
  return date.toLocaleDateString();
}
const utilsModule = formatDate; // Simulating: export default formatDate
console.log('formatDate function exported');

// config.js - Default export object
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};
const configModule = config; // Simulating: export default config
console.log('Config object exported:', configModule);

// Using the imports
const alice = new personModule('Alice', 25);
console.log('Created person:', alice);
console.log('Formatted date:', utilsModule(new Date()));
console.log('API URL:', configModule.apiUrl);

// In actual .js files:
// export default class Person { ... }

Console Output

Click "Run Code" to see output here...

Mixing Named & Default Exports

Combine both in one module

Best of Both Worlds!

📄 utils.js

// Named exports
export const VERSION = '1.0.0';
export function helper() {
  return 'Helper function';
}

// Default export
export default function main() {
  return 'Main function';
}

📄 app.js

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

console.log(main());     // Main function
console.log(VERSION);    // 1.0.0
console.log(helper());   // Helper function

Mixed Export Patterns

Combining named and default exports (simulated)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Re-exporting Modules

Create barrel exports for easier imports (simulated)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Dynamic Imports (Lazy Loading)

Load modules on demand (simulated)

javascript

code

DarkEditable

// Simulating dynamic imports with async functions

// Static loading (immediate)
const utils = {
  format: (str) => str.toUpperCase()
};
console.log('Utils loaded immediately');

// Simulating dynamic import (lazy loading)
const heavyModule = {
  heavyFunction: () => console.log('Heavy function executed!')
};

// Dynamic loading simulation
function simulateClick() {
  console.log('Button clicked - loading module...');
  // In real module: const { heavyFunction } = await import('./heavy-module.js');
  setTimeout(() => {
    heavyModule.heavyFunction();
  }, 100);
}
simulateClick();

// Conditional loading pattern
function loadModule(name) {
  console.log(`Loading ${name} module...`);
  
  if (name === 'admin') {
    const admin = { init: () => console.log('Admin initialized') };
    admin.init();
  } else {
    const user = { init: () => console.log('User initialized') };
    user.init();
  }
}

loadModule('admin');
loadModule('user');

// Error handling pattern
function loadChart() {
  try {
    console.log('Chart loading...');
    const Chart = class {
      constructor() {
        console.log('Chart created!');
      }
    };
    return new Chart();
  } catch (error) {
    console.error('Failed to load chart:', error);
  }
}

loadChart();

// In actual .js files:
// const module = await import('./file.js');

Console Output

Click "Run Code" to see output here...

Key Takeaways

📦

Named Exports

Multiple exports per file
export {} const, function, class };
import { name } from './file.js';

⭐

Default Export

One per file
export default class/function
import name from './file.js';

🔄

Import Variations

import * as Name - All as object
import { x as y } - Rename
await import() - Dynamic

🎯

File Extension

Always include .js in import paths
Relative paths use ./ or ../

Pro Tip

Use named exports for utilities and default export for the main item (component, class, etc.). This makes imports more predictable!

Previous Topic

For...of Loop

Iterating over iterable objects with clean syntax.

Next Topic

Symbols

Unique identifiers and symbol use cases in modern JavaScript.

Ask a Question

Have a question about Modules? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Modules (Import/Export)

Organize code into reusable, maintainable modules

Find videos you like?

Save to resource drawer for future reference!

ES6 Modules: Code Organization

Modules let you split code into separate files and import/export between them. Each module has its own scope, preventing global namespace pollution!

Benefits of Modules

✓ Reusability - Use code across multiple files
✓ Maintainability - Organize code logically
✓ Encapsulation - Private by default, export only what's needed

Named Exports

Export multiple items from a module

📄 math.js (Export)

// Export individual items
export const PI = 3.14159;
export const E = 2.71828;

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

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

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

📄 app.js (Import)

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

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

const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20

// Import all as object
import * as Math from './math.js';
console.log(Math.PI);   // 3.14159
console.log(Math.E);    // 2.71828

Named Export Variations

Different ways to export named items (simulated)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Default Exports

One main export per module

📄 user.js (Export)

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

// Or with function
export default function createUser(name) {
  return { name };
}

📄 app.js (Import)

// Import default (no braces!)
import User from './user.js';

const alice = new User('Alice');
alice.greet(); // Hi, I'm Alice

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

// Both work - same import!

Default Export Examples

One default export per file (simulated)

javascript

code

DarkEditable

// Simulating default exports from different files

// In actual .js files:
// export default class Person { ... }

Console Output

Click "Run Code" to see output here...

Mixing Named & Default Exports

Combine both in one module

Best of Both Worlds!

📄 utils.js

// Named exports
export const VERSION = '1.0.0';
export function helper() {
  return 'Helper function';
}

// Default export
export default function main() {
  return 'Main function';
}

📄 app.js

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

console.log(main());     // Main function
console.log(VERSION);    // 1.0.0
console.log(helper());   // Helper function

Mixed Export Patterns

Combining named and default exports (simulated)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Re-exporting Modules

Create barrel exports for easier imports (simulated)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Dynamic Imports (Lazy Loading)

Load modules on demand (simulated)

javascript

code

DarkEditable

// Simulating dynamic imports with async functions

// Static loading (immediate)
const utils = {
  format: (str) => str.toUpperCase()
};
console.log('Utils loaded immediately');

// Simulating dynamic import (lazy loading)
const heavyModule = {
  heavyFunction: () => console.log('Heavy function executed!')
};

loadModule('admin');
loadModule('user');

loadChart();

// In actual .js files:
// const module = await import('./file.js');

Console Output

Click "Run Code" to see output here...

Key Takeaways

📦

Named Exports

Multiple exports per file
export {} const, function, class };
import { name } from './file.js';

⭐

Default Export

One per file
export default class/function
import name from './file.js';

🔄

Import Variations

import * as Name - All as object
import { x as y } - Rename
await import() - Dynamic

🎯

File Extension

Always include .js in import paths
Relative paths use ./ or ../

Pro Tip

Use named exports for utilities and default export for the main item (component, class, etc.). This makes imports more predictable!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

For...of Loop

Symbols

JavaScript Code Editor

Building Your Learning Module...

Modules (Import/Export)

ES6 Modules: Code Organization

Benefits of Modules

📄 math.js (Export)

📄 app.js (Import)

Named Export Variations

📄 user.js (Export)

📄 app.js (Import)

Default Export Examples

Best of Both Worlds!

Mixed Export Patterns

Re-exporting Modules

Dynamic Imports (Lazy Loading)

Key Takeaways

Named Exports

Default Export

Import Variations

File Extension

Pro Tip

For...of Loop

Symbols

JavaScript Code Editor

Modules (Import/Export)

ES6 Modules: Code Organization

Benefits of Modules

📄 math.js (Export)

📄 app.js (Import)

Named Export Variations

📄 user.js (Export)

📄 app.js (Import)

Default Export Examples

Best of Both Worlds!

Mixed Export Patterns

Re-exporting Modules

Dynamic Imports (Lazy Loading)

Key Takeaways

Named Exports

Default Export

Import Variations

File Extension

Pro Tip