Modules (import/export)
📚 What are ES Modules? ES Modules let you split your JavaScript into separate files and share code between them. export makes a value available to other files. import loads it. Modern JavaScript apps (React, Vue, Node.js) are built entirely with modules - each file is its own module.
Appy Says…
Every React project you've seen uses import. Every npm package uses export. ES Modules are the modern standard for splitting JavaScript across multiple files — and they're the foundation of every serious web project.
What are ES Modules?
ES Modules (ESM) let you split JavaScript into files. Each file is a module with its own scope. You choose what to share with export and what to use from other files with import.
- •Named export:
export function greet() { ... } - •Default export:
export default function App() { ... } - •Named import:
import { greet } from './utils.js'; - •Default import:
import App from './App.jsx'; - •Import all named exports:
import * as utils from './utils.js'; - •Rename:
import { greet as hello } from './utils.js'; - •Re-export:
export { greet } from './utils.js';
Think of it like a Minecraft mod pack
Each mod file in a mod pack does one job and exports tools that other mods can use. Your main game file imports the ones it needs. Modules work the same — each file focuses on one thing and shares only what it needs to, keeping everything organised.
How It Works
- •1. A file is a module — its variables and functions are private by default
- •2. Add
exportbefore anything you want to share - •3. In another file,
importwhat you need - •4. Module paths:
'./file'(relative),'react'(npm package),'@/lib/utils'(alias) - •5. Browsers load modules with
<script type="module">; bundlers (Vite/webpack) handle imports at build time - •6.
import()— dynamic import for lazy loading:const mod = await import('./heavy.js');
Real-World Examples
- •React:
import React, { useState } from 'react'; - •Utils:
import { formatDate, slugify } from './utils/string.js'; - •npm:
import confetti from 'canvas-confetti'; - •Lazy load a page component:
const Dashboard = lazy(() => import('./Dashboard')) - •Export a config:
export const API_URL = 'https://api.app.com';
Key Facts
- •ES Modules are static — all imports are resolved at parse time, enabling tree-shaking (removing unused code)
- •You can have only one default export per file, but unlimited named exports
- •Before ESM, JavaScript used CommonJS (
require/module.exports) — still used in Node.js projects - •Circular imports (A imports B, B imports A) are allowed but can cause
undefinedvalues — avoid them
Watch Out!
Mixing default and named imports is a common source of confusion. A default import can be named anything: import Foo from './bar' works even if the file exports default function baz. Named imports MUST match the exported name exactly (unless renamed).
Remember
One export default per file (the main thing). Multiple export for named things. Import curly braces for named, no curly braces for default.
What You Learned
- •ES Modules split code into files; use
exportto share,importto use - •Named exports use curly braces; default exports don't
- •Unlocks: organising any multi-file project, using npm packages, React component architecture
Key Facts
- →ES Modules are static — all imports are resolved at parse time, enabling tree-shaking (removing unused code)
- →You can have only one default export per file, but unlimited named exports
- →Before ESM, JavaScript used CommonJS (
require/module.exports) — still used in Node.js projects - →Circular imports (A imports B, B imports A) are allowed but can cause
undefinedvalues — avoid them
Real-World Examples
Remember
One export default per file (the main thing). Multiple export for named things. Import curly braces for named, no curly braces for default.
Quick Quiz
export makes code?