Nearby lessons
13 of 22JavaScript ES6 Modules
📌 What are ES6 Modules?
Modules in JavaScript allow code to be organized into separate files. This promotes reusability, maintainability, and clarity. ES6 introduced import and export statements for handling modules.
1️⃣ Basic Module Import/Export
Use the export keyword to export variables/functions/classes from one file and import to use them in another.
Code Example
PREVIEW READY
2️⃣ Exporting Multiple Members
You can export multiple items from a file and import them all at once.
Code Example
PREVIEW READY
3️⃣ Exporting Classes
You can export classes alongside variables and functions.
Code Example
PREVIEW READY
4️⃣ Short Export Syntax
Instead of exporting each item individually, you can export them together at the end.
Code Example
PREVIEW READY
5️⃣ Import All as Object
Use * as alias to import everything into a namespace-like object.
Code Example
PREVIEW READY
6️⃣ Default Export
You can have one default export per module. Useful for exporting single functions or classes.
React Playground
export default function App() { return ( <div> <h1>Hello React!</h1> </div> ); }
7️⃣ Default + Named Export Together
You can export both default and named values from the same file.
React Playground
export default function App() { return ( <div> <h1>Hello React!</h1> </div> ); }
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!AJS - setTimeout