Javascript Modules: Import & Export

In every programming language we have modules which we can import and export. In C, Java, python, Javascript every language uses this concept of modules. Everything which is written in one single file is by default private for that file, means you can use that inside that file but you are not allowed to use this code in another file. But Import and Export allows us to do this via very simple syntax. Let's understand this.

Why Modules?

Assume you have to write a code in which you have to sendEmail to user, Now you can send email for various purposes like verification, forgot-password, something user have bought etc. And you have written this sendingEmail logic inside of a file and then in that same file you have written the logic for authentication and payments. Now your code code is for more than 2000 lines.

Imagine a single file larger than 2000 line. You might think why not write this code in different file according to their category. Like sendingEmail in Utils directory, auth logic in auth directory and similarly payments in payments directory. By doing this our code becomes modular. We know where we will find code of particular topic. So, it make debugging much easier for us.

Some Problems which modules solves

1. Global Scope Pollution: Without modules everything goes into global scope. And because of this different files can accidentally overwrites variables.

2. No clear Ownership: It is very hard for developers to find out which file is responsible for what.

3. Poor Scalability: This way works for small scripts and projects but when it come to scale the application this would be disastrous.

These are some of the problems which modules solves for us.

How to Import & Export?

Importing and exporting are very simple and easy concept in javascript with a very beginner-friendly syntax. For Importing, simply use import keyword and for exporting, simply use export keyword.

export function add(a,b){
    ....
}

import add from "filePath"

In some languages like javascript we have pre written modules which we can simply import and can use them in our code. Like Math module this module is used for finding round numbers , generating random numbers, flooring and ceiling the number.

Default vs Named Export

When working with module you can export functions, API's, variables, classes using two methods. First, by default export this uses default keyword and another is by using named export these are the normal export.

Lets understand the difference between these two ways of export

• Named Export:
  You can export multiple things by their name no extra keyword required.
  And when importing use curly braces and inside that write the name of function, variables which you have exported and then the file Path

Exporting:

export function add(a,b){}

Importing:

import {add} from "filePath"

• Default Export:
  Here you simply have to use default keyword before the exporting field name and after the export keyword.
  And when importing you can simply import it without curly braces and can give any name to it. But note that this name will be having reference of that exported item in the imported file.

Exporting:

function add(a,b){}

export default add;

Importing:

import sum from "filePath"

    //Here in this file add will be referenced as sum

[NOTE]:

1. Every file can have only one default export rest should be named export .

2. If you want to rename your importing function, in default you can simply write new name whereas in named import case use as keyword for renaming it.

Advantages of Modules

1. Provides Reusability in code you can import and can use that function anywhere in your code.

2. Encapsulate your hidden logics and expose only the part of code which needs to be exposed.

3. You can only import whatever is needed.

4. It is easy to maintain, debug, update and scale.

Diagram For Understanding

---

Conclusion

You are going to see this concept of exporting and importing in every projects and software. Wherever you work you will see export and import so having a good understanding of them is really important for you.