Learn JavaScript Modules
(ES-6 feature) -
The Complete Guide:
Thread 🧵
(ES-6 feature) -
The Complete Guide:
Thread 🧵
It is one of the features of ES-6.
To learn more about JS Modules we need a server but here we are using a local server that is ‘Live Server’. It is the extension of VS Code.
For the Local server you can use
marketplace.visualstudio.com
To learn more about JS Modules we need a server but here we are using a local server that is ‘Live Server’. It is the extension of VS Code.
For the Local server you can use
marketplace.visualstudio.com
As our program grows bigger, it may contain many lines of code. Instead of putting everything in a single file, you can use modules to separate codes in separate files as per their functionality. This makes our code organized and easier to maintain.
JavaScript modules allow you to break up your code into separate files.JavaScript modules allow you to break up your code into separate files.
JavaScript modules rely on the `import`and `export`statements.
JavaScript modules rely on the `import`and `export`statements.
While Connecting the js files , you need to use the <script></script> tag like this
<script type= “module” src = “ ”></script>
Suppose, a file named "greet.js" contains the following code:
<script type= “module” src = “ ”></script>
Suppose, a file named "greet.js" contains the following code:
Now, to use the code of greet.js in another file, you can use the following code:
Here,
The `greetPerson()` function in the "greet.js" is exported using the `export` keyword
The `greetPerson()` function in the "greet.js" is exported using the `export` keyword
Then, we imported greetPerson()in another file using the import
keyword. To import functions, objects, etc., you need to wrap them around { }
keyword. To import functions, objects, etc., you need to wrap them around { }
If you have multiple things to import from one file then you can use like this
If you have multiple things to export from one file to another then you can use like this
Default Export
You can also perform default export of the module. For example,
In the file greet.js:
You can also perform default export of the module. For example,
In the file greet.js:
Then when importing, you can use:
Renaming imports and exports
To avoid naming conflicts, you can rename these functions, objects, etc. during the export or during the import .
➡️Example: Rename in the module (export file)
To avoid naming conflicts, you can rename these functions, objects, etc. during the export or during the import .
➡️Example: Rename in the module (export file)
➡️Example: Rename in the import file
If you enjoyed reading this thread, please do the following:
1. Like the thread❤️
2. Retweet the first tweet.🔃
3. Follow me and enable notifications: ✅
@CodeMarch
Thank you for reading all the way through.
1. Like the thread❤️
2. Retweet the first tweet.🔃
3. Follow me and enable notifications: ✅
@CodeMarch
Thank you for reading all the way through.
✨ JavaScript for Starters: The Complete Guide ✨
➱ JavaScript Roadmap 2022
➱ JavaScript Fundamentals with Exp.
➱ 50+ Programs to practice with Soln.
➱ 50+ Project Ideas
➱ 25+ Projects Code
Grab it NOW.
codemarch.gumroad.com
➱ JavaScript Roadmap 2022
➱ JavaScript Fundamentals with Exp.
➱ 50+ Programs to practice with Soln.
➱ 50+ Project Ideas
➱ 25+ Projects Code
Grab it NOW.
codemarch.gumroad.com
Loading suggestions...