Module Recap
Module 03 introduced ES modules — the system that organizes modern JavaScript applications into focused, independently-managed files.
What you learned
Section titled “What you learned”Module scope — each module has its own scope. Variables are private unless explicitly exported.
Named exports — export before a declaration; imported with import { name } from './file.js'. Names must match exactly.
Default exports — export default for a module’s primary value; imported without curly braces, name chosen by the importer.
Project organization — one concern per file. Data model, persistence, network, and UI each have their own module. main.js imports from all and initializes the app.
Single execution — a module runs once no matter how many files import it.
The module graph — the browser resolves all imports before running any code. Shared dependencies are fetched and executed once.
The BudgetBuddy module map
Section titled “The BudgetBuddy module map”| File | Exports | Imports |
|---|---|---|
expense.js | default Expense | (none) |
storage.js | saveExpenses, loadExpenses | Expense from expense.js |
api.js | fetchRates | (none) |
ui.js | renderExpenses, bindEvents | (none — receives data as arguments) |
main.js | (none — entry point) | all of the above |
main.js is the only file that knows about every other file. Every other module is unaware of the files that import it.
Named vs default: the decision
Section titled “Named vs default: the decision”A simple rule that covers most situations:
- One primary thing? Default export.
- Multiple equal things? Named exports.
- Both? Default for the primary, named for supporting values.
What is next
Section titled “What is next”Module 04 covers destructuring and spread — the syntax that makes working with objects and arrays cleaner and more expressive. You have already seen hints of it ({ id, description, amount } in the Expense constructor). Now you will learn it in full.