Chapter 21 — Modules

🎯 Goal (1 line)

Learn how to split JavaScript into multiple files so your projects stay clean, reusable, and scalable.

Why this matters: Once your project grows beyond one file, modules become essential. Every React project and most modern JavaScript projects use them.

Quick Lesson (5 minutes)

Imagine you're building an online shopping app.

Instead of putting everything in one file:

app.js

You split it like this:

project/
│
├── app.js
├── math.js
├── users.js
├── products.js
└── cart.js

Each file does one job.

To share code between files, JavaScript uses:

export
import

Exporting

// math.js

export const add = (a, b) => a + b;

This makes add available to other files.

Importing

// app.js

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

console.log(add(2, 3));

Output:

Named Export vs Default Export

Named Export

export const add = () => {};
export const subtract = () => {};

Import:

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

Notice the curly braces.

Default Export

export default function add() {}

Import:

import add from "./math.js";

No curly braces.

Remember:

Named = {}
Default = no {}

MCQ 1

Which keyword shares something from a file?

A. import

B. export

C. include

D. require

✅ Answer

Explanation:

export makes variables, functions, or classes available to other files.

MCQ 2

Which keyword brings code into another file?

A. export

B. import

C. include

D. share

✅ Answer

Explanation:

import is used to use code from another module.

MCQ 3

Suppose math.js contains:

export const add = (a, b) => a + b;

Which import is correct?

import add from "./math.js";

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

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

import ("./math.js");

✅ Answer

Explanation:

Named exports require curly braces.

MCQ 4

Output?

// math.js
export const x = 5;

// app.js
import { x } from "./math.js";

console.log(x);

A. 5

B. x

C. undefined

D. Error

✅ Answer

MCQ 5

Find the bug.

// math.js
export const add = (a, b) => a + b;

// app.js
import add from "./math.js";

A. No bug

B. Wrong import type

C. Missing semicolon

D. add should be let

✅ Answer

Explanation:

add is a named export, so it must be imported with {}.

Correct:

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

MCQ 6

Suppose:

export default function add() {}

How should it be imported?

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

import add from "./math.js";

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

import default add from "./math.js";

✅ Answer

Explanation:

Default exports don't use curly braces.

MCQ 7

Which statement is TRUE?

A. A file can have many default exports.

B. A file can have only one default export.

C. Default exports need {}.

D. Named exports never use {}.

✅ Answer

Explanation:

Each file can have only one default export.

MCQ 8

Which is valid?

export const PI = 3.14;
export const MAX = 100;

A. Invalid

B. Only one export allowed

C. Valid

D. Must use default

✅ Answer

Explanation:

A file can have many named exports.

MCQ 9

Output?

// utils.js

export const square = n => n * n;

// app.js

import { square } from "./utils.js";

console.log(square(4));

A. 8

B. 16

C. 4

D. Error

✅ Answer

MCQ 10

Find the bug.

// math.js

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

// app.js

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

A. No bug

B. Wrong import

C. Wrong export

D. Missing return

✅ Answer

Explanation:

Default export should be imported without {}.

Correct:

import add from "./math.js";

MCQ 11

Which path is correct if both files are in the same folder?

import { add } from "math.js";

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

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

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

✅ Answer

Explanation:

./ means "current folder."

MCQ 12

Suppose:

// colors.js

export const red = "#f00";
export const blue = "#00f";

Correct import?

import red from "./colors.js";

import { red, blue } from "./colors.js";

import colors from "./colors.js";

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

✅ Answer

MCQ 13

Which is better?

Put every function into one giant file.

Split related functions into modules.

✅ Answer

Explanation:

Smaller files are easier to read, test, and maintain.

MCQ 14

Suppose:

// math.js

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

Which import works?

import sum from "./math.js";

import add from "./math.js";

Both A and B

None

✅ Answer

Explanation:

A default export can be imported with any variable name.

MCQ 15

Which statement is FALSE?

A. Modules help organize code.

B. React projects use modules.

C. Every file should contain all code.

D. Modules make code reusable.

✅ Answer

MCQ 16

Find the bug.

// math.js

const add = (a, b) => a + b;

// app.js

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

A. No bug

B. add wasn't exported

C. Wrong import

D. Missing return

✅ Answer

Correct:

export const add = (a, b) => a + b;

MCQ 17

Which export style is common for utility files?

export const add = ...
export const subtract = ...
export const multiply = ...

export default add;

when many functions exist.

✅ Answer

Explanation:

Utility files usually have many named exports.

MCQ 18 (Hard)

Suppose:

// math.js

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

export const PI = 3.14;

Which import is correct?

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

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

import add, PI from "./math.js";

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

✅ Answer

Explanation:

You can combine a default import and named imports:

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

Common Beginner Mistakes

❌ Forgetting export.

❌ Mixing up default and named imports.

❌ Forgetting ./ before local files.

❌ Using {} with default exports.

❌ Omitting {} with named exports.

Mini Coding Challenge

You have two files.

`math.js`

export const multiply = (a, b) => a * b;

export const divide = (a, b) => a / b;

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

Question

Write the correct imports in app.js.

✅ Answer

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

console.log(square(5));      // 25
console.log(multiply(3, 4)); // 12
console.log(divide(12, 3));  // 4

Expected Output

25
12
4

Mini Project — Utility Library

Imagine you're creating a reusable utility library.

`utils.js`

Create and export these:

export const capitalize = word =>
    word[0].toUpperCase() + word.slice(1);

export const double = number =>
    number * 2;

export default function greet(name) {
    return `Hello ${name}`;
}

`app.js`

Import everything correctly and print:

Hello Alice
Javascript
20

(Hint: capitalize("javascript") should become "Javascript".)

✅ Solution

utils.js

export const capitalize = word =>
    word[0].toUpperCase() + word.slice(1);

export const double = number =>
    number * 2;

export default function greet(name) {
    return `Hello ${name}`;
}

app.js

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

console.log(greet("Alice"));
console.log(capitalize("javascript"));
console.log(double(10));

Expected Output

Hello Alice
Javascript
20

🎯 Chapter 21 Takeaways (The 20% That Gives You 80%)

If you remember only these, you'll be productive in almost every modern JavaScript project:

Split your code into small modules instead of one huge file.
Use export to share code from a file.
Use import to use code from another file.

Named exports use curly braces:

export const add = ...
import { add } from "./math.js";

Default exports do not use curly braces:

export default function greet() {}
import greet from "./greet.js";

A file can have many named exports but only one default export.
Local files are imported using a relative path like ./utils.js.

These are the exact patterns you'll see every day in React projects, Vite apps, and most modern JavaScript codebases.