Platform under construction

Modules & Code Organization

Advanced

Export & Import

export makes values available from a module. import brings those exported values into another module.

// format.js
export function formatTitle(value) { return value.trim(); }

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

Modules & Code Organization

Export only what another file should use.

Named exports let a module expose multiple specific values. Import statements then select the names they need.

The exported name is part of the module contract. Renaming or removing it can break importing files.

A good module exports a small public surface and keeps implementation details private inside the file.

Named export

Exports a specific value by name.

Named import

Imports specific exported names.

Alias

Renames an import locally with as.

Module contract

The public names other files rely on.

Examples

Good module code makes dependencies visible instead of magical.

Export a small public API

const internalCache = new Map();

export function getItem(id) {
  return internalCache.get(id);
}

Exporting every internal detail

export const cache = new Map();
export let retryCount = 0;
export function temporaryDebugHelper() {}

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.

Export function

Expose one reusable helper.

export function formatTitle(value) {
  return value.trim();
}

Import by name

Use curly braces for named exports.

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

Export list

Export values after they are declared.

function parseItem(value) { return value; }
function formatItem(value) { return String(value); }

export { parseItem, formatItem };

Import alias

Avoid local naming conflicts.

import { formatTitle as formatHeading } from "./format.js";

Rules that matter

Organize by responsibility.

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

Prefer named exports for utilities

They make imports searchable and explicit.

Keep internals private

Do not export values only because they exist.

Use aliases sparingly

Aliases help conflicts but can hide the original contract.

Group related exports

A module should have a clear theme.

Avoid circular imports

Two files importing each other can create initialization bugs.

Treat exports as public API

Changing them can break other files.

Production thinking

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

Why does this matter?

Import and export create the boundaries that keep a codebase understandable.

Accessibility

Shared accessibility helpers can be exported once and reused consistently.

Production note

Production modules should expose stable names and hide implementation details.

SEO note

Clear module boundaries reduce JavaScript breakage that can affect rendered content.

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 one exported helper and import it.
Rename one import with as.
Decide which names should stay private.

Practice assignment

Do this before moving to the next topic.

Write one named export.
Import it from another file.
Explain the module contract.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Export & Import.