Modules in JavaScript (import, export)

As JavaScript applications grow, managing code becomes increasingly complex. To address this, modern JavaScript uses modules, which allow developers to split code into separate files for better structure and maintainability. Modules help organize code, avoid global variable pollution, reuse functions and classes, and build scalable applications.

Modules use:

• export ? to share code

• import ? to use shared code

1. What Are Modules?

A module is a JavaScript file that exports its functions, variables, or classes so they can be imported into other files.

Example module files:

• math.js

• app.js

• user.js

• helper.js

You export from one file and import in another.

2. Named Exports

Allows exporting multiple items by name.

math.js

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

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

app.js

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

console.log(add(5, 3));
console.log(multiply(4, 2));

Output:

8
8

3. Exporting Variables

data.js

export const pi = 3.14;
export let name = "JavaScript";

main.js

import { pi, name } from "./data.js";
console.log(pi, name);

4. Exporting a Class

User.js

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

app.js

import { User } from "./User.js";

let u = new User("Aman");
console.log(u.name);

5. Default Export

A file may contain only one default export.

message.js

export default function() {
    return "Welcome to JavaScript!";
}

Default import:

import showMessage from "./message.js";
console.log(showMessage());

No curly braces required.

6. Default + Named Exports Together

utils.js

export default function greet() {
    console.log("Hello");
}

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

app.js

import greet, { sum } from "./utils.js";

greet();
console.log(sum(4, 6));

7. Renaming Imports

import { sum as addNumbers } from "./utils.js";
console.log(addNumbers(2, 3));

8. Importing Everything (*)

import * as math from "./math.js";

console.log(math.add(2, 3));
console.log(math.multiply(3, 4));

9. Using Modules in Browsers

To enable modules in HTML, add type="module":

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

This enables:

• import/export

• strict mode

• clean scope

10. Modules Automatically Use Strict Mode

Modules enforce strict mode even without writing "use strict".

Example:

x = 10; // Error in module

Real-Life Example 1: Utility Functions

utils/math.js

export function square(n) {
    return n * n;
}

export function cube(n) {
    return n * n * n;
}

main.js

import { square, cube } from "./utils/math.js";

console.log(square(4));
console.log(cube(3));

Real-Life Example 2: User Authentication Module

auth.js

export function login(user, pass) {
    return user === "admin" && pass === "1234";
}

app.js

import { login } from "./auth.js";

console.log(login("admin", "1234"));

Example Program (Complete)

operations.js

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

export default function message() {
    return "Operations module loaded";
}

main.js

import msg, { add } from "./operations.js";

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

Output:

Operations module loaded
30

Common Mistakes Beginners Make

• Forgetting type="module" in HTML

• Incorrect file paths (./ is required)

• Mixing default and named imports incorrectly

• Multiple default exports (only one allowed)

• Importing before exporting