Engineering Fluency OS

Why This Matters

A real application has thousands of lines of code. Putting everything in one file is chaos. Modules let you split code into separate files, each with a clear responsibility. You export what other files need and import what you depend on.

This is how all professional software is organized — from npm packages to Python libraries to your own project files. Understanding modules is the bridge between writing scripts and building real applications.

Define Terms

Visual Model

main.js

utils.jsexport formatDate

api.jsexport fetchUser

lodash (npm)third-party

App runs

import

The full process at a glance. Click Start tour to walk through each step.

Modules split code into files. Import what you need, export what others need.

Code Example

Code

// --- utils.js ---
// Named exports: export specific items
export function formatDate(date) {
  return date.toLocaleDateString();
}

export const PI = 3.14159;

// Default export: the main thing this module provides
export default function greet(name) {
  return `Hello, ${name}!`;
}

// --- main.js ---
// Import default export (any name works)
import greet from "./utils.js";

// Import named exports (must match names)
import { formatDate, PI } from "./utils.js";

// Import everything as a namespace
import * as utils from "./utils.js";

console.log(greet("Alice"));   // Hello, Alice!
console.log(formatDate(new Date()));  // 2/22/2026
console.log(PI);               // 3.14159

// Import from npm packages
import express from "express";
import { useState } from "react";

// Dynamic import (lazy loading)
const module = await import("./heavy-module.js");

Interactive Experiment

Try these exercises:

Create two files: math-utils.js with an add function, and main.js that imports and uses it.
Try both named exports and a default export. What is the difference?
Install a small npm package (like chalk or dayjs) and import it into your code.
What happens if you try to use a variable that was not exported from a module?
Create a module that exports a class, then import and instantiate it from another file.

Quick Quiz

Coding Challenge

Module Pattern

Write a function called `createModule` that returns an object with two methods: `add(key, value)` stores a key-value pair, and `get(key)` retrieves it. The internal storage should NOT be accessible from outside — only through add/get. This is the module pattern: encapsulating private state.

Loading editor...

Real-World Usage

Modules are the organizing principle of all modern software:

React apps: Each component is a module: import Button from "./Button".
Node.js servers: Routes, middleware, and models are separate module files.
Python projects: Packages with __init__.py organize libraries like Django, Flask, NumPy.
Monorepos: Large codebases use workspaces where each package is a module boundary.
Bundlers: Webpack, Vite, and esbuild resolve import trees and bundle modules for the browser.

Modules & Imports