Nearby lessons

13 of 22

JavaScript 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.

Example02
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

2️⃣ Exporting Multiple Members

You can export multiple items from a file and import them all at once.

Example03
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

3️⃣ Exporting Classes

You can export classes alongside variables and functions.

Example04
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

4️⃣ Short Export Syntax

Instead of exporting each item individually, you can export them together at the end.

Example05
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

5️⃣ Import All as Object

Use * as alias to import everything into a namespace-like object.

Example06
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

6️⃣ Default Export

You can have one default export per module. Useful for exporting single functions or classes.

Example07
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

7️⃣ Default + Named Export Together

You can export both default and named values from the same file.

Example08
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3