A JavaScript module is a small piece of code that can be used in different parts of your program. It helps break down big projects into smaller, more manageable sections, each focused on a specific task. This makes your code easier to understand, maintain, and fix when needed. By using modules, you can keep your code organized and reuse parts of it across different projects.

Modules can contain

• Variables

• Functions

• Classes

• Objects

Modules are code blocks that can export and/or import functions and values.

// Export an "add" function
export function add(a, b) {
  return a + b;
}

// Import an "add" function
import { add } from './math.js';
let result = add(2, 3);

Modules let you to break up code into separate files.

Modules is a fundamental feature in modern JavaScript.

Module Files

A JavaScript module is usually a file, but it can also be an HTML script.

A module file is a .js file using import / export.

A module script is an HTML script using import / export.

Module File "message.js"

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Module Script:

The Export Keyword

A module uses the export keyword to share values with other files.

A module can have many named exports.

A module can (optionally) have one default export.

JavaScript Modules Import

Import

You can import modules in two ways, based on if they are named exports or default exports.

Named imports are constructed using curly braces:

import { name, age } from "./person.js";

Default exports are not:

import message from "./message.js";

---

Named Imports

Named imports match named exports in a module.

They let you import one or more explicitly named variables or functions from a module.

You must use the exact names enclosed in curly { } braces:

Examples

Import the named exports name and age from the file person.js:

import { name, age } from "./person.js";

Import the named exports add, subtract, and PI from the file math.js:

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

Named Import Rules

Import names must match export names:

import { addd } from './math.js'; // ❌ Error (name mismatch)

You can import multiple items at once:

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

You can rename them using as:

import { add as addition } from './math.js';

---

Default Import

Default import is the way to import the primary exported value from a module - the one that was exported using export default.

Defalt imports are the counterpart to default exports.

You can give a default export any name you like, during import, without using curly braces:

Examples

Import a default export from the file message.js:

import text from "./message.js";

import message from "./message.js";

Default Import vs Named

Feature	Default Import	Named Import
Typical use case	One main feature per module	Multiple features
Matches export name?	No (you choose)	Yes (must match)
Can rename freely?	Always	Only with as
Export count	Only one default export allowed	Multiple exports allowed

Named Exports

A named export gives a name to each item.

Items can be exported individually, or wrapped in { } at the bottom:

Module File "person.js"

name and age exported individually:

// export name and age
export const name = "Jesse";
export const age = 40;

name and age exported at once at the bottom:

const name = "Jesse";
const age = 40;

// export name and age
export { name, age };

You import named exports by wrapping them in { }.

The names must match exactly.

Module Script

Name Strictness

With named exports, the imported names must match exactly.

Name exports avoid mistakes caused by typos or renaming.

import { calcluate } from './math.js'; // ❌ error thrown

---

Toolbox Utilities (Helpers)

Utilities work best with named exports if they contain multiple helpers:

• math.js

• stringUtils.js

• domHelpers.js

• dateHelpers.js

When to Use Named Export?

Cases	Why Named Export
Many functions	Clearly lists all functions
Strictness needed	Prevents name typos
Big projects	Improves consistency
Utility sets	Matches module structure
Tree-shaking	Removes unused code automatically