Skip to content

JavaScript Modules

This lesson explains JavaScript Modules in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript ES6+ Modules Overview

JavaScript ES6+ modules allow developers to split code into separate files and reuse functions, variables, classes, and objects across an application. Modules make JavaScript projects easier to organize, test, maintain, and scale.

Modern JavaScript uses export and import syntax to share code between files. ES modules are widely used in frontend frameworks, Node.js applications, build tools, design systems, component libraries, and production web applications.

Module Feature Description Common Usage
export Makes code available to other files. Functions, constants, classes.
import Loads exported code from another file. Utilities, services, components.
Named Export Exports multiple values by name. Utility files and helpers.
Default Export Exports one main value from a file. Components, classes, main functions.
Dynamic Import Loads modules only when needed. Lazy loading and performance.
Module Scope Keeps variables private to the file unless exported. Avoid global pollution.

JavaScript ES6 Module Example

// math.js

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

export const appName = "JavaScript Tutorial";

// app.js

import { add, appName } from "./math.js";

console.log(add(10, 20));
console.log(appName);

This example shows how to export a function and a constant from one file, then import and use them in another file using ES6 module syntax.

Top 10 JavaScript ES6 Module Examples

The following examples show the most common ES module patterns used in modern JavaScript projects, frontend frameworks, backend services, and interviews.

# Example Syntax
1 Named Export Function export function add(a, b) { return a + b; }
2 Named Export Constant export const API_URL = "/api/users";
3 Import Named Export import { add } from "./math.js";
4 Default Export export default function getUser() { return "John"; }
5 Import Default Export import getUser from "./user.js";
6 Export Class export class User { constructor(name) { this.name = name; } }
7 Rename Import import { add as sum } from "./math.js";
8 Import Everything import * as math from "./math.js";
9 Re-export export { add } from "./math.js";
10 Dynamic Import const module = await import("./math.js");

Best Practices

  • Use modules to keep files small, focused, and reusable.
  • Use named exports for utility functions and shared constants.
  • Use default exports when a file has one main responsibility.
  • Use clear file names such as apiClient.js, utils.js, or User.js.
  • Keep import paths simple and consistent.
  • Avoid circular dependencies between modules.
  • Use dynamic imports for lazy loading large features.
  • Group related exports with barrel files only when it improves readability.

Common Mistakes

  • Forgetting to use type="module" when running modules directly in the browser.
  • Mixing named imports and default imports incorrectly.
  • Forgetting curly braces when importing named exports.
  • Using curly braces when importing a default export.
  • Creating large modules that do too many things.
  • Using circular imports that make code harder to debug.
  • Forgetting file extensions in browser-based module imports.

Key Takeaways

  • ES6 modules help organize JavaScript code across multiple files.
  • export makes functions, constants, classes, and objects reusable.
  • import loads exported code into another file.
  • Named exports support multiple exports from one file.
  • Default exports are useful when a file exports one main value.
  • Dynamic imports help improve performance through lazy loading.
  • Modules reduce global variables and improve maintainability.

Pro Tip

Use named exports for shared utilities and default exports for main components or classes. This makes your imports easier to read and keeps your JavaScript project structure clean.

You now understand JavaScript ES6+ modules, including named exports, default exports, imports, re-exports, namespace imports, dynamic imports, module scope, best practices, and real-world module patterns. Continue to the next lesson to learn JavaScript Promises and asynchronous programming.