JavaScript modules
JavaScript modules, import/export, and dynamic imports
Learn JavaScript modules with focused lessons on ES modules, import and export syntax, dynamic imports, module loading, script async and defer, browser environments, code splitting, and reusable module boundaries.
Module lessons and concepts
Browser JavaScript environment
Understand where browser JavaScript runs before splitting code into module files and loading dependencies.
Outcome: Know the runtime context where modules, scripts, and browser APIs execute.
- browser JavaScript
- module environment
- window object
Script loading basics
Learn how classic scripts run so module loading order and dependency boundaries make sense.
Outcome: Connect script execution order to page loading and module usage.
- script tag
- JavaScript loading
- script execution
Scripts, async, and defer
Compare normal scripts, async scripts, defer scripts, and how loading strategy affects browser execution.
Outcome: Choose loading behavior that keeps pages responsive and predictable.
- async defer
- script loading
- defer JavaScript
Modules introduction
Start with ES modules, strict mode, module scope, file boundaries, and why modules organize large JavaScript codebases.
Outcome: Structure code into files with explicit dependencies instead of global variables.
- JavaScript modules
- ES modules
- module scope
Export and import
Use named exports, default exports, import paths, namespace imports, and re-export patterns.
Outcome: Move functions, classes, constants, and helpers between module files clearly.
- import export JavaScript
- named exports
- default export
Dynamic imports
Load modules on demand with dynamic import when code should be fetched only after it is needed.
Outcome: Reduce upfront code and load optional features at runtime.
- dynamic import
- code splitting
- lazy loading JavaScript
Functions as module exports
Package reusable behavior into exported functions with clear parameters and return values.
Outcome: Design modules that expose small, predictable function APIs.
- export function
- module functions
- reusable JavaScript
Classes as module exports
Share class-based models across files while keeping construction, methods, and inheritance organized.
Outcome: Use modules to keep object models and UI behavior separated.
- export class
- JavaScript classes
- class modules
Promises with module loading
Connect module loading to promise-based asynchronous flow and understand dynamic import results.
Outcome: Handle on-demand module loading with promise and async/await patterns.
- dynamic import promise
- JavaScript promises
- async modules
Async/await for module boundaries
Use async functions when modules load data, initialize features, or wait for optional dependencies.
Outcome: Coordinate module startup and asynchronous dependencies without nested callbacks.
- async await modules
- module initialization
- await import