1. Concept library
  2. JavaScript & TypeScript
  3. Module 8: Modules and tooling

Concept

ES modules

import and export split code into files with explicit dependencies. Named exports keep names consistent across files; a default export is one main thing per file.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

  1. Explain what import and export do and how named and default exports differ
  2. Split a file into modules with explicit dependencies
  3. Spot an import cycle and explain why one side sees undefined

In practice

A few lines that show ES modules doing its job.

TypeScript
// money.ts
export function format(cents: number): string {
  return "$" + (cents / 100).toFixed(2);
}
export const ZERO = 0;

// cart.ts
import { format, ZERO } from "./money.js";
import type { Item } from "./types.js";
export default function total(items: Item[]) { return format(ZERO); }

The common mistake

Watch for

Creating an import cycle, where a.ts imports b.ts which imports a.ts. One side sees an undefined binding at load time, and the failure appears only in some entry points.

What to know first

Your roadmap puts these before ES modules, unless you already know them.

How it stays learned

Once a session shows you understand ES modules, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

  1. Day 3First recall, while it is fresh
  2. Day 7Second, a week on
  3. Day 18Last, when it has settled

Where it leads

Topics that build on ES modules.

Next in the moduletsconfig essentials →