Platform under construction

Modules & Code Organization

Advanced

JavaScript Modules

JavaScript modules split code into files with explicit dependencies instead of sharing everything through the global scope.

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

// app.js
import { formatTitle } from "./format.js";

Modules & Code Organization

Modules make dependencies explicit.

A module is a JavaScript file that can import values from other modules and export values for other modules to use.

Module scripts use type="module". They run in strict mode, have their own scope and load dependencies through import statements.

The main value of modules is organization. You can keep data logic, DOM logic, formatting helpers and API code in separate files.

type="module"

Loads a script as an ES module.

Own scope

Top-level declarations do not become window globals.

Strict mode

Modules run with strict JavaScript rules automatically.

Dependency graph

Imports describe which files depend on which other files.

Examples

Good module code makes dependencies visible instead of magical.

Split code by responsibility

import { loadItems } from "./api.js";
import { renderItems } from "./render.js";

const items = await loadItems();
renderItems(items);

Everything in one global file

window.items = [];
window.loadItems = function () {};
window.renderItems = function () {};

Code patterns

Reusable examples for quick reference.

These examples focus on imports, exports, module boundaries, on-demand loading and file structure you can use in real projects.

Load module script

Use type="module" in HTML.

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

Import dependency

Module paths are explicit.

import { renderList } from "./render-list.js";

Private module state

Top-level values stay inside the file unless exported.

const cache = new Map();

export function getCached(key) { return cache.get(key); }

Deferred by default

Module scripts do not block HTML parsing like classic scripts.

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

Rules that matter

Organize by responsibility.

A module system only helps when files have clear jobs, small public APIs and predictable import paths.

Use modules for real applications

They keep code organized as files grow.

Keep imports explicit

A file should show its dependencies at the top.

Avoid global variables

Modules already provide file-level scope.

Split by responsibility

API, DOM, formatting and state can live in separate files.

Use relative paths carefully

Browser imports need correct file paths.

Remember strict mode

Modules catch sloppy JavaScript patterns earlier.

Production thinking

A project that is easy to navigate is easier to debug, test and grow.

Why does this matter?

Without modules, larger JavaScript projects become a chain of globals and hidden dependencies.

Accessibility

Organized modules make it easier to keep interaction, focus handling and status messages consistent across a site.

Production note

Production builds often bundle modules, but the source code should still be structured as modules.

SEO note

Module organization does not rank pages directly, but reliable JavaScript helps rendered content and navigation work consistently.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a new module name to the files array.
Explain why app.js should be the entry point.
Write one import statement as a comment.

Practice assignment

Do this before moving to the next topic.

Create one module script tag.
Sketch three module files.
Assign one responsibility to each file.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JavaScript Modules.