Profile picture of Csaba Kissi

Csaba Kissi

@csaba_kissi

Published: March 28, 2025
21
42
249

Understanding JavaScript Module Imports and Exports.

Image in tweet by Csaba Kissi

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!

Image in tweet by Csaba Kissi

4ļøāƒ£ Importing Named Exports When importing named exports, you must use the same names: You can also rename imports if needed! šŸŽ‰

Image in tweet by Csaba Kissi

5ļøāƒ£ Default Exports Example Here, we export a single function multiply as the default export.. You can only have one default export per module! šŸ”‘

Image in tweet by Csaba Kissi

6ļøāƒ£ Importing Default Exports When importing a default export, you can name it anything you like ↓ This makes default exports very flexible!

Image in tweet by Csaba Kissi

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!

Share this thread

Read on Twitter

View original thread

Navigate thread

1/11