Csaba Kissi

Understanding JavaScript Module Imports and Exports. 

JavaScript Modules.

🧑‍💻 ES6 introduced a powerful way to organize and structure your code using modules.

I'll show you how to use imports/exports, the differences between named and default exports, and practical examples.

1️⃣ What are ES6 Modules?

Modules are JavaScript files that encapsulate code and allow you to export variables, functions, or classes.

This helps keep the code organized and reusable across different application parts.

Need a home for your API, website, or full-stack project? 🏡

http://sevalla.com has got your back! Simple hosting, speedy, and stress-free.

✨ App Hosting, Your Way

Deploy apps in your favorite language—JavaScript, Python, PHP, Go, Rust, C#, or anything else!

🔒 Database Hosting, Safe & Sound

Keep your data secure and accessible, making your projects smooth and scalable.

⚡ Static Sites at Warp Speed

Blazing-fast performance for your portfolio, blog, or business site.

2️⃣ Exporting Modules

You can export items from a module in two main ways: named exports and default exports.

• Named Exports: Allows you to export multiple items.

• Default Exports: Allows you to export a single item as the default.

Let's see examples! 👇

3️⃣ Named Exports Example

In this example, we export a constant pi and a function add. You can export as many items as needed! 

4️⃣ Importing Named Exports

When importing named exports, you must use the same names:

You can also rename imports if needed! 🎉 

5️⃣ Default Exports Example

Here, we export a single function multiply as the default export..

You can only have one default export per module! 🔑 

6️⃣ Importing Default Exports

When importing a default export, you can name it anything you like ↓

This makes default exports very flexible! 

7️⃣ Summary

• Use named exports for multiple items.
• Use default exports for a single item.
• Keep your code modular and organized! 💡

Now, you’re ready to use ES6 modules in your projects!

Enjoyed this thread?

- Retweet the first tweet and share it with your Twitter crew
- Follow @csaba_kissi for more insightful content

Thanks for reading!