← LocalStorage & SessionStorage Classes →

JavaScript Modules

ES6 Modules provide a standardized way to organize JavaScript code into reusable, maintainable pieces with explicit dependencies.

🤔 What are JavaScript Modules?

ES6 Modules are a way to split JavaScript code into separate files that can be imported and exported. They provide better code organization, reusability, and dependency management.

File-based - One module per file
Strict mode - Modules automatically use strict mode
Static structure - Imports/exports determined at parse time
Async loading - Modules load asynchronously

💡 Benefits of Modules

Better code organization
Explicit dependencies
Encapsulation (private by default)
Tree-shaking support
Better tooling support
Avoid global namespace pollution

Module Syntax

Use export to expose functionality and importto use it. Add type="module" to script tags.

📝 Basic Export & Import

Learn the different ways to export and import functionality between modules.

JavaScript Editor

Export Types:

Named exports - Multiple per module
Default export - One per module
Mixed exports - Both named and default

📦 Advanced Export Patterns

Various export patterns including re-exports and aggregation.

JavaScript Editor

// Different types of exports

// Named exports (multiple per module)
export const apiKey = 'abc123xyz';
export const apiUrl = 'https://api.example.com';

export function fetchData(endpoint) {
  return `${apiUrl}/${endpoint}?key=${apiKey}`;
}

export class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  display() {
    return `${this.name} <${this.email}>`;
  }
}

// Export list (alternative syntax)
const MAX_USERS = 100;
const MIN_AGE = 18;

export { MAX_USERS, MIN_AGE };

// Renaming during export
const secretToken = 'very-secret';
export { secretToken as publicToken };

// Default export (only one per module)
const config = {
  env: 'production',
  debug: false,
  version: '1.0.0'
};

export default config;

// Re-exporting (aggregating exports from other modules)
export { default as Calculator } from './calculator.js';
export { add, subtract } from './mathOperations.js';

// Import examples for this module:
// import config, { apiKey, User, MAX_USERS, publicToken } from './module.js';
// import * as Everything from './module.js';

Export Techniques:

export { name } - Export existing variable
export { name as newName } - Rename during export
export * from './module' - Re-export all
export { name } from './module' - Re-export specific

⚡ Dynamic Imports

Load modules dynamically for code splitting and performance optimization.

JavaScript Editor

// Dynamic Imports (code splitting)
console.log('=== Dynamic Imports ===');

// Traditional static import (at top of file)
// import { heavyFunction } from './heavyModule.js';

// Dynamic import - returns a Promise
async function loadModuleOnDemand() {
  console.log('Starting to load module...');
  
  try {
    // Only load when needed
    const module = await import('./heavyModule.js');
    
    console.log('Module loaded successfully!');
    console.log('Heavy computation:', module.heavyFunction(5));
    
    // You can also destructure
    const { anotherFunction } = await import('./heavyModule.js');
    console.log('Another function:', anotherFunction());
    
    return module;
  } catch (error) {
    console.error('Failed to load module:', error);
  }
}

// Example: Lazy loading based on user action
const buttons = {
  calculator: document.getElementById('calc-btn'),
  chart: document.getElementById('chart-btn'),
  map: document.getElementById('map-btn')
};

// Simulate button clicks
async function handleButtonClick(feature) {
  console.log(`\nLoading ${feature} module...`);
  
  switch (feature) {
    case 'calculator':
      const calcModule = await import('./calculator.js');
      calcModule.init();
      break;
      
    case 'chart':
      const chartModule = await import('./chartRenderer.js');
      chartModule.renderChart();
      break;
      
    case 'map':
      const mapModule = await import('./mapService.js');
      mapModule.showMap();
      break;
  }
}

// Test dynamic loading
setTimeout(() => {
  handleButtonClick('calculator');
  setTimeout(() => handleButtonClick('chart'), 1000);
}, 500);

// Conditional loading based on feature detection
async function loadPolyfillIfNeeded() {
  if (!window.IntersectionObserver) {
    console.log('IntersectionObserver not supported, loading polyfill...');
    await import('intersection-observer-polyfill');
    console.log('Polyfill loaded!');
  } else {
    console.log('IntersectionObserver is natively supported');
  }
}

loadPolyfillIfNeeded();

// Dynamic imports with variables
const modules = {
  analytics: './analytics.js',
  logger: './logger.js',
  validator: './validator.js'
};

async function loadModuleByName(moduleName) {
  if (modules[moduleName]) {
    return await import(modules[moduleName]);
  }
  throw new Error(`Module ${moduleName} not found`);
}

// Example usage
loadModuleByName('logger')
  .then(module => {
    console.log('Logger module loaded:', module);
  })
  .catch(error => {
    console.error('Failed to load module:', error);
  });

When to Use Dynamic Imports:

Code splitting for performance
Loading polyfills conditionally
Feature-based loading
Reducing initial bundle size

Benefits:

Faster initial load time
Reduced memory usage
Better user experience
Progressive enhancement

🔄 Circular Dependencies

Understanding and solving circular dependency issues in modules.

JavaScript Editor

// Circular Dependencies and Solutions
console.log('=== Circular Dependencies ===');

// Module A (a.js)
export const nameA = 'Module A';

import { nameB } from './b.js';

export function getFromB() {
  return `A says: B's name is ${nameB}`;
}

console.log('Module A loaded');

// Module B (b.js)
export const nameB = 'Module B';

import { nameA } from './a.js';

export function getFromA() {
  return `B says: A's name is ${nameA}`;
}

console.log('Module B loaded');

// main.js using both
import { getFromB } from './a.js';
import { getFromA } from './b.js';

console.log(getFromB()); // Works
console.log(getFromA()); // Works

// Problem: What if we need to call functions during initialization?
// Module C (c.js) - problematic
export function funcC() {
  console.log('Function C called');
}

import { funcD } from './d.js';

// This will fail because funcD might not be initialized yet
// funcD(); // ERROR: Cannot access 'funcD' before initialization

// Solution 1: Move imports to top-level scope
// Solution 2: Use dynamic imports for circular dependencies
// Solution 3: Restructure to avoid circular dependencies

// Best practice: Dependency injection pattern
// apiService.js
export function createApiService(config) {
  return {
    get: (url) => `GET ${url} with ${config.apiKey}`,
    post: (url, data) => `POST ${url} with ${data}`
  };
}

// authService.js
export function createAuthService(apiService) {
  return {
    login: (credentials) => {
      return apiService.post('/login', credentials);
    },
    logout: () => {
      return apiService.get('/logout');
    }
  };
}

// app.js - no circular dependency
import { createApiService } from './apiService.js';
import { createAuthService } from './authService.js';

const config = { apiKey: 'secret123' };
const apiService = createApiService(config);
const authService = createAuthService(apiService);

console.log('Login result:', authService.login({ user: 'admin', pass: '123' }));

// Using modules for configuration
// config.js
export const config = {
  api: {
    baseUrl: 'https://api.example.com',
    timeout: 5000
  },
  features: {
    analytics: true,
    caching: false
  }
};

// Using initialization functions
// database.js
let dbInstance = null;

export async function initializeDatabase(connectionString) {
  // Simulate async initialization
  await new Promise(resolve => setTimeout(resolve, 100));
  dbInstance = { connected: true, connectionString };
  console.log('Database initialized:', connectionString);
}

export function getDatabase() {
  if (!dbInstance) {
    throw new Error('Database not initialized. Call initializeDatabase first.');
  }
  return dbInstance;
}

// app.js using initialized modules
import { initializeDatabase, getDatabase } from './database.js';
import { config } from './config.js';

async function startApp() {
  await initializeDatabase(config.api.baseUrl);
  const db = getDatabase();
  console.log('Database connection:', db.connected);
}

startApp();

Solutions for Circular Dependencies:

Restructure code to avoid cycles
Use dependency injection
Move imports inside functions
Use dynamic imports
Create mediator modules

🛒 Practical Example: E-commerce App

Complete e-commerce application demonstrating module architecture.

JavaScript Editor

// Practical Example: E-commerce Application Modules

// productService.js - Handles product data
const products = [
  { id: 1, name: 'Laptop', price: 999.99, category: 'electronics' },
  { id: 2, name: 'Mouse', price: 29.99, category: 'electronics' },
  { id: 3, name: 'Desk', price: 199.99, category: 'furniture' }
];

export async function fetchProducts() {
  // Simulate API call
  return new Promise(resolve => {
    setTimeout(() => resolve(products), 300);
  });
}

export function getProductById(id) {
  return products.find(p => p.id === id);
}

export function filterByCategory(category) {
  return products.filter(p => p.category === category);
}

// cartService.js - Shopping cart functionality
let cartItems = [];

export function addToCart(productId, quantity = 1) {
  const existing = cartItems.find(item => item.productId === productId);
  
  if (existing) {
    existing.quantity += quantity;
  } else {
    cartItems.push({ productId, quantity, addedAt: new Date() });
  }
  
  saveCart();
  return cartItems;
}

export function removeFromCart(productId) {
  cartItems = cartItems.filter(item => item.productId !== productId);
  saveCart();
  return cartItems;
}

export function getCart() {
  return [...cartItems]; // Return copy
}

export function getCartTotal(products) {
  return cartItems.reduce((total, item) => {
    const product = products.find(p => p.id === item.productId);
    return total + (product ? product.price * item.quantity : 0);
  }, 0);
}

function saveCart() {
  localStorage.setItem('cart', JSON.stringify(cartItems));
}

export function loadCart() {
  const saved = localStorage.getItem('cart');
  cartItems = saved ? JSON.parse(saved) : [];
}

// userService.js - User authentication and management
let currentUser = null;

export async function login(email, password) {
  // Simulate API call
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === 'user@example.com' && password === 'password') {
        currentUser = {
          id: 1,
          email,
          name: 'John Doe',
          token: 'fake-jwt-token'
        };
        localStorage.setItem('user', JSON.stringify(currentUser));
        resolve(currentUser);
      } else {
        reject(new Error('Invalid credentials'));
      }
    }, 500);
  });
}

export function logout() {
  currentUser = null;
  localStorage.removeItem('user');
}

export function getCurrentUser() {
  if (!currentUser) {
    const saved = localStorage.getItem('user');
    currentUser = saved ? JSON.parse(saved) : null;
  }
  return currentUser;
}

export function isAuthenticated() {
  return !!getCurrentUser();
}

// utils.js - Utility functions
export function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

export function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

export function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// main.js - Application entry point
import { fetchProducts, getProductById, filterByCategory } from './productService.js';
import { addToCart, getCart, getCartTotal, loadCart } from './cartService.js';
import { login, logout, getCurrentUser, isAuthenticated } from './userService.js';
import { formatCurrency, debounce } from './utils.js';

class ECommerceApp {
  constructor() {
    this.products = [];
    this.cart = [];
    this.user = null;
    this.init();
  }
  
  async init() {
    console.log('Initializing E-Commerce App...');
    
    // Load initial data
    loadCart();
    this.user = getCurrentUser();
    
    // Fetch products
    this.products = await fetchProducts();
    this.cart = getCart();
    
    console.log('Products loaded:', this.products.length);
    console.log('Cart items:', this.cart.length);
    console.log('User authenticated:', isAuthenticated());
    
    // Demonstrate module usage
    this.displayProducts();
    this.displayCartSummary();
    this.simulateUserActions();
  }
  
  displayProducts() {
    console.log('\n=== Available Products ===');
    this.products.forEach(product => {
      console.log(`${product.id}. ${product.name} - ${formatCurrency(product.price)}`);
    });
  }
  
  displayCartSummary() {
    const total = getCartTotal(this.products);
    console.log(`\n=== Cart Summary ===`);
    console.log(`Items: ${this.cart.length}`);
    console.log(`Total: ${formatCurrency(total)}`);
  }
  
  simulateUserActions() {
    console.log('\n=== Simulating User Actions ===');
    
    // Add items to cart
    console.log('\nAdding items to cart...');
    addToCart(1, 2); // 2 Laptops
    addToCart(2, 1); // 1 Mouse
    addToCart(3, 1); // 1 Desk
    
    this.cart = getCart();
    console.log('Updated cart:', this.cart);
    
    // Calculate total
    const total = getCartTotal(this.products);
    console.log(`Cart total: ${formatCurrency(total)}`);
    
    // Filter products
    const electronics = filterByCategory('electronics');
    console.log('\nElectronics:', electronics);
    
    // Get specific product
    const laptop = getProductById(1);
    console.log('\nProduct details for ID 1:', laptop);
    
    // Simulate user login
    console.log('\n=== User Authentication ===');
    if (!isAuthenticated()) {
      login('user@example.com', 'password')
        .then(user => {
          console.log('Login successful:', user.name);
          this.user = user;
        })
        .catch(error => {
          console.error('Login failed:', error.message);
        });
    }
    
    // Demonstrate debounce
    const searchProducts = debounce((query) => {
      console.log(`Searching for: "${query}"`);
      const results = this.products.filter(p => 
        p.name.toLowerCase().includes(query.toLowerCase())
      );
      console.log(`Found ${results.length} products`);
    }, 300);
    
    console.log('\n=== Debounced Search ===');
    searchProducts('lap');
    searchProducts('lapt');
    searchProducts('laptop');
    
    // After debounce delay, only last call executes
  }
}

// Start the application
const app = new ECommerceApp();

// Export the app for use in other modules
export default app;

// Alternative: Using module pattern for configuration
// config.module.js
export const CONFIG = Object.freeze({
  API: {
    BASE_URL: process.env.API_URL || 'https://api.example.com',
    TIMEOUT: 10000
  },
  APP: {
    NAME: 'E-Commerce App',
    VERSION: '1.0.0'
  }
});

// Using environment-specific modules
let apiService;
if (process.env.NODE_ENV === 'development') {
  apiService = await import('./apiService.dev.js');
} else {
  apiService = await import('./apiService.prod.js');
}

💡 Module Architecture Best Practices:

One responsibility per module
Use clear, descriptive names
Keep modules small and focused
Minimize side effects
Use index files for public API
Follow consistent naming conventions

🎯 Advanced Module Patterns

Design patterns and advanced techniques using modules.

JavaScript Editor

// Advanced Module Patterns
console.log('=== Advanced Module Patterns ===');

// 1. Singleton Pattern using Modules
// counter.js
let count = 0;

export function increment() {
  count++;
  console.log(`Count: ${count}`);
  return count;
}

export function decrement() {
  count--;
  console.log(`Count: ${count}`);
  return count;
}

export function getCount() {
  return count;
}

// Since modules are cached, this creates a singleton
// All imports get the same instance

// 2. Factory Pattern
// loggerFactory.js
export function createLogger(level = 'info') {
  const levels = ['debug', 'info', 'warn', 'error'];
  const currentLevelIndex = levels.indexOf(level);
  
  function shouldLog(logLevel) {
    return levels.indexOf(logLevel) >= currentLevelIndex;
  }
  
  return {
    debug: (message) => {
      if (shouldLog('debug')) {
        console.debug(`[DEBUG] ${message}`);
      }
    },
    info: (message) => {
      if (shouldLog('info')) {
        console.info(`[INFO] ${message}`);
      }
    },
    warn: (message) => {
      if (shouldLog('warn')) {
        console.warn(`[WARN] ${message}`);
      }
    },
    error: (message) => {
      if (shouldLog('error')) {
        console.error(`[ERROR] ${message}`);
      }
    }
  };
}

// 3. Observer Pattern
// eventEmitter.js
const listeners = new Map();

export const EventEmitter = {
  on(event, callback) {
    if (!listeners.has(event)) {
      listeners.set(event, []);
    }
    listeners.get(event).push(callback);
  },
  
  off(event, callback) {
    if (listeners.has(event)) {
      const callbacks = listeners.get(event);
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
    }
  },
  
  emit(event, data) {
    if (listeners.has(event)) {
      listeners.get(event).forEach(callback => {
        try {
          callback(data);
        } catch (error) {
          console.error(`Error in event listener for ${event}:`, error);
        }
      });
    }
  }
};

// 4. Plugin System
// pluginSystem.js
const plugins = new Set();

export const PluginSystem = {
  register(plugin) {
    if (typeof plugin.install === 'function') {
      plugins.add(plugin);
      plugin.install(this);
      console.log(`Plugin registered: ${plugin.name || 'Unnamed'}`);
    } else {
      throw new Error('Plugin must have an install method');
    }
  },
  
  unregister(plugin) {
    if (plugins.has(plugin)) {
      plugins.delete(plugin);
      if (typeof plugin.uninstall === 'function') {
        plugin.uninstall(this);
      }
      console.log(`Plugin unregistered: ${plugin.name || 'Unnamed'}`);
    }
  },
  
  getPlugins() {
    return Array.from(plugins);
  }
};

// Example plugin
const analyticsPlugin = {
  name: 'Analytics',
  install(system) {
    console.log('Analytics plugin installed');
    EventEmitter.on('user-action', this.trackAction);
  },
  
  uninstall(system) {
    EventEmitter.off('user-action', this.trackAction);
  },
  
  trackAction(action) {
    console.log(`[Analytics] Tracking action: ${action}`);
    // Send to analytics server
  }
};

// 5. Module Composition
// validation.js - Base validators
export const validators = {
  required: (value) => ({
    valid: value !== null && value !== undefined && value !== '',
    message: 'This field is required'
  }),
  
  email: (value) => ({
    valid: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    message: 'Invalid email format'
  }),
  
  minLength: (length) => (value) => ({
    valid: String(value).length >= length,
    message: `Must be at least ${length} characters`
  }),
  
  maxLength: (length) => (value) => ({
    valid: String(value).length <= length,
    message: `Cannot exceed ${length} characters`
  })
};

// formValidator.js - Composed validator
import { validators } from './validation.js';

export function createFormValidator(rules) {
  return function validateForm(data) {
    const errors = {};
    
    Object.entries(rules).forEach(([field, fieldRules]) => {
      const value = data[field];
      
      for (const rule of fieldRules) {
        const result = rule(value);
        if (!result.valid) {
          errors[field] = result.message;
          break;
        }
      }
    });
    
    return {
      valid: Object.keys(errors).length === 0,
      errors
    };
  };
}

// Usage
const userValidationRules = {
  name: [
    validators.required,
    validators.minLength(2),
    validators.maxLength(50)
  ],
  email: [
    validators.required,
    validators.email
  ],
  password: [
    validators.required,
    validators.minLength(8)
  ]
};

const validateUser = createFormValidator(userValidationRules);

// Test validation
const testUser = {
  name: 'J',
  email: 'invalid-email',
  password: '123'
};

const result = validateUser(testUser);
console.log('\nValidation result:', result);

// 6. Tree-shaking friendly modules
// Export only what's needed for tree shaking
export const importantFunction = () => 'Important';
export const anotherImportantFunction = () => 'Another';

// Avoid side effects in module scope
// Bad: console.log('Module loaded'); // Side effect

// Use init function instead
export function init() {
  console.log('Module initialized');
}

// 7. Module mocking for testing
// In test environment:
// jest.mock('./module.js', () => ({
//   ...jest.requireActual('./module.js'),
//   someFunction: jest.fn()
// }));

Common Module Patterns:

Singleton - Single instance shared across app
Factory - Create objects with different configurations
Observer - Event-driven communication
Plugin - Extensible architecture
Composition - Building complex from simple parts

Next Steps

Now that you understand modules, learn about ES6 Classes for object-oriented programming in JavaScript.

← LocalStorage & SessionStorage Classes →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

JavaScript Modules

🤔 What are JavaScript Modules?

💡 Benefits of Modules

Module Syntax

📝 Basic Export & Import

Export Types:

📦 Advanced Export Patterns

Export Techniques:

⚡ Dynamic Imports

When to Use Dynamic Imports:

Benefits:

🔄 Circular Dependencies

Solutions for Circular Dependencies:

🛒 Practical Example: E-commerce App

💡 Module Architecture Best Practices:

🎯 Advanced Module Patterns

Common Module Patterns:

Next Steps

Follow Us

Our Tools

Our Company

Special Tools