Introduction of Import and Export in JavaScript
Know about the modules system and use of import and export
In early days, JavaScript was light-weight very simple script file which is load faster and do some tasks on website . But when It evolve in modern JavaScript , large projects are build by it. many frameworks are build by using JavaScript. In large Projects , code base are large and many codes lines thousand of lines are written .
Just think when that huge lines of codes when written in only one file then how it possible to maintain the code . and also there will be very difficult to understand the code. and also when the files push into production , the one file is huge size which effect in performance.
In this article I discussed about the concept of modules and how it done in JavaScript.
Introduction about modules system
module means simple file it will be any file with any extension but we are in JavaScript. so Lets say the different JavaScript files which are created and handle properly and all files are interconnected on system so they can share and used code into one another file is modules system.
Problems without modules
problems are simple . The file size increase which becomes more complex o handle and we donot have idea about the what this code files is about.
This makes harder to refactor code and also maintain it when some bug arise we have to look on deeper inside file and it takes more time on just finding the code .
so module sytem introduces in JavaScript .
How to use modules system
we can used simple by using two keywords : Import and export . By word we can guess the what is it used for . Import is used to import another file code and export is use to export the code so that other file can import it for use it .
Types of modules in JavaScript
Asynchronous Module Definition (AMD)
Common JS
Universal Module Definition (UMD)
ES Modules
The official JavaScript module is ES Modules System in which we used import and export keyword .
Problems on not using module system
The problems are listed below :
Global Scope pollution : The variables, function declaration all are global scope means easily access in different script file which can cause name collision and also some variable may get override.
No dependency management : we have to load all the scripts manually in index.html file and also remember the order of maintaining to load the script files like one after another . If order does not maintain the code files cannot be used in another file.
Hard to maintain and reuse the code
Appling the module system
It is easy to apply module system just by add the attribute type module in script tag . The entry script file means the file which call all other modules like main.js
like shown on below image
Types of Export and Import
There are two types of export and import the files.
Default export : The default export is done by simple
export default <code>. Here code placeholder is for any variables, function, object any code which you want to export from file.Named export : The named export is done by simple using export keyword before any code like
export let score =0;or there is another way of doing by simply write many codes like function, variable and at last used export {add,score} . like this this is also one way .
Note : The default export should be only one in one code files and there is as many named export .
while importing
Default import is simple by just
import <name_of_code> from "<filename.js>". We can give any name while importing default export in place of<name_of_code>.Named Import : while importing named export , The curly braces is used like
import {add,score} from './calculation.js". the name must be same in named export
Exporting the code
Importing the code
Conclusion
The module system enables to write modular code means the different pattern where one code files share the code and we can use in another files making the code files isoated from one another .
It encapsulate our variables and functions which makes it private in that file so there is no chance of conflicting the name of variable and function. and It makes our projects scalable and maintainable.
