JavaScript Modules

JavaScript Modules (Import/Export)

As applications grow larger, organizing code becomes essential. JavaScript Modules help you split your code into reusable, maintainable files. They allow you to import and export pieces of code like functions, objects, classes, or variables between different files.

Why Use Modules?

• Improves code organization and readability
• Encourages code reuse across projects
• Avoids global namespace pollution
• Makes debugging and testing easier
• Supports lazy loading and better performance

1. What Is a Module?

A module is just a JavaScript file that exports variables, functions, or classes, and can import them in other files.

By default, variables and functions in a file are private to that file unless you explicitly export them.

2. Exporting from a Module

There are two ways to export:

Named Export

You can export multiple values using named exports.

// math.js
export const PI = 3.14;

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

Default Export

You can only have one default export per module.

// greet.js
export default function greet(name) {
  return `Hello, ${name}`;
}

3. Importing into a Module

Importing Named Exports

// main.js
import { PI, add } from './math.js';

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


You can also rename imports:

import { add as sum } from './math.js';
console.log(sum(1, 2));

Importing Default Exports

import greet from './greet.js';

console.log(greet('Alice')); // Hello, Alice

4. Mixing Default and Named Exports

You can have both in the same module:

// mixed.js
export const name = 'JavaScript';
export default function() {
  console.log("This is the default function");
}

Importing:

import defaultFunc, { name } from './mixed.js';
defaultFunc();
console.log(name);

5. Module File Structure

Modern JavaScript environments like ES6+, Node.js (ESM), and bundlers like Webpack, Vite, and Parcel support modules.

Make sure to:

• Use .js or .mjs extension
• Use type="module" in HTML for browsers

<script type="module" src="main.js"></script>

6. Common Pitfalls

• File paths must be relative (e.g., './utils.js')
• Default exports don’t use {} in import
• Circular dependencies can cause unexpected behavior
• Modules are loaded once, even if imported multiple times

7. Real-World Example

// utils.js
export function square(x) {
  return x * x;
}

export default function cube(x) {
  return x * x * x;
}


// app.js
import cube, { square } from './utils.js';

console.log(square(3)); // 9
console.log(cube(2));   // 8

Summary

JavaScript modules make your code modular, reusable, and easier to manage. By using export and import, you can split your application into logical units and keep your codebase clean.

Key Points:

• Use export and import to share code
• Named exports allow multiple exports
• Default export allows only one per file
• Always use type="module" in HTML for browser-based code