JavaScript lesson · 24 min

JavaScript Modules

Learn why code is split into modules and how import/export thinking keeps projects organized.

Code runs locally in your browser

What you will practice

Understand what a module is.
Separate reusable logic from application code.
Recognize the purpose of export and import.

What this means

A module is a file that owns a focused piece of code. One file might export math helpers, another might export UI helpers, and another might combine them.

Real browser and Node.js modules use `export` and `import`. The lesson runner executes one editable snippet, so the runnable example uses a module-like object to show the same organization idea.

The goal is to stop writing one giant file where everything depends on everything else.

If this is your first time seeing this

Modules help you split a growing program into understandable files.

A module should have a clear job, just like a well-labeled folder.

Mini glossary

Module: A focused file or code unit that exposes selected values.
export: Makes a value available for other modules to import.
import: Brings an exported value from another module into the current file.

Example from everyday life

Modules are like labeled drawers in a workbench. Measuring tools go in one drawer, cables in another, and documents in another. You can still build one project, but you do not dump every item onto the table.

How it works step by step

`formatModule` contains text-formatting behavior.
`lessonModule` contains course-specific behavior.
The final lines use those two focused pieces together.
In a real project, these pieces could live in separate files and be connected with imports.

Where you will use this

A React app keeps API functions, UI components, and formatting helpers in separate modules.
A Node.js app exports database functions from one file and route handlers from another.
A tool site reuses the same formatter module across multiple tools.

Before you run the code

Modules are mostly about boundaries. A good module has a clear job and exposes only what other code needs.

When code grows, modules make it easier to test, rename, replace, and understand.

Common beginner mistakes

Putting unrelated code into one module just because it was nearby.
Exporting everything instead of only the useful public pieces.
Creating circular imports where files depend on each other in a confusing loop.

JavaScript editor

const formatModule = {
  titleCase(text) {
    return text
      .split(" ")
      .map((word) => word[0].toUpperCase() + word.slice(1))
      .join(" ");
  }
};

const lessonModule = {
  makeLabel(course, lesson) {
    return `${course}: ${lesson}`;
  }
};

const lessonTitle = formatModule.titleCase("javascript modules");
const label = lessonModule.makeLabel("Lumio Learn", lessonTitle);

console.log(label);
console.log("In real files: export from one module, import in another.");

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingBuilds output from separated logic

WaitingNames real module keywords

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Add another method to `formatModule`.
Create a new `progressModule` object.
Imagine which object would become which file in a real project.

Previous lesson Next lesson