JavaScript Modules, A Beginner’s Guide
Tags: javascript, react, node, webdev
Published: 2020-07-21 07:51:33

So you are thinking about what is Module & what it does?
Here’s the answer…. If you have a complex app and you have to scroll through hundreds or thousands of lines of code, then the job of debugging or just understanding the app becomes very much harder. Javascript helps us out with this by having ‘imports’ and ‘exports’.
It basically means that the sharing of code between multiple files. A ‘module’ in Javascript can be thought of as a container that holds related code which can then be exported to another file.

##It basically has two main keywords :

>*export* : keyword labels variables and functions that should be accessible from outside the current module.

>*import* : keyword allows the import of functionality(variables and functions) from other modules.

##Benefits of using modules

1. **Maintainability:** A well-designed module aims to lessen the dependencies on parts of the codebase as much as possible so that it can grow and improve independently.

2. **Reusability:** In programming, reusable code is the use of a similar code in multiple functions. No, not by copying and then pasting the same code from one block to another and from there to another and so on. Instead, code reusability defines the methodology you can use to use similar code, without having to re-write it everywhere.

##Modules in Practice

With the help of Modules, we can use the features of one file into another file. Suppose you have two JavaScript files & you have to import and export variables & functions between them.


###1. Importing/Exporting the Single Variable:

>File-one: exporting the variable to file-two

![Alt Text](https://miro.medium.com/max/543/1*ZN7H1BfCxExDAj9cDzk8tg.png)

>File-two: importing the variable from file-one

![Alt Text](https://miro.medium.com/max/516/1*WTNTGF6f_906cwdl3-iUhw.png)

###2. Importing/Exporting multiple Variables or Functions:

>File-one: exporting multiple variables or functions to file-two

![Alt Text](https://miro.medium.com/max/700/1*7E4JnwC01yIPW_cJ_E9Inw.png)

>File-two: importing multiple variables or functions from file-one

![Alt Text](https://miro.medium.com/max/573/1*9EUtEnJfPh2ggdnUeSgawQ.png)

###3. Importing/Exporting Default value(it should be single):

>File-one: exporting Default variable or function to file-two

![Alt Text](https://miro.medium.com/max/596/1*pmhjvWfaiRMJzOZjbu_J1g.png)

>File-two: importing Default variable or function from file-one

![Alt Text](https://miro.medium.com/max/447/1*-P9dLy16h6PHKYJ6-SvNIw.png)

###4. Importing everything (*) at once:

>File one: exporting multiple variables or functions to file-two

![Alt Text](https://miro.medium.com/max/700/1*wml_JIYHWkuTujSQU5NhwQ.png)

>File-two: importing everything from file-one at once(here * denotes everything)

![Alt Text](https://miro.medium.com/max/608/1*3vcCWWhb39pCdElNAcQItQ.png)

###5. Importing /Exporting with an alias(another name):

>File-one: We can give aliases to exported members with the 'as' keyword

![Alt Text](https://miro.medium.com/max/509/1*Azf6SI9C4f0hEUu_ifbD5Q.png)

>File-two: We can also give aliases to imported members with the 'as' keyword

![Alt Text](https://miro.medium.com/max/641/1*qw5gqLsD2b2TR70f5ZCEXw.png)



##So, This is the basic introduction of JavaScript Modules. I hope I am able to make some of your points clear.

**Hope you have enjoyed this and gain something from it. Waiting for your feedback. ✔**

Follow me on Twitter — [@javascript_bug](https://twitter.com/javascript_bug) to check out my other cool posts.

Happy Coding! 💻 😀