We import-export modules, let's first see what they are:

Modules in JavaSript

As the size of our code increases we divide it into smaller pieces called modules. A module in JavaScript is just a file containing any class, function, etc.

These modules are joined together to form a whole application, you can think of it as a car, where it has many parts, each doing different functions. They all are joined together to form the whole working car.

Exporting and Importing modules

Now we need to Export the modules and Import them somewhere. In JavaSript there are two ways to do that :

• The older method called Common Js it is also the standard method.

• The newer ES6(ECMAScript6) method.

Common JS

Exporting

It is done by using "module.exports" .

function printHello(){
    console.log("Hello There!!");
}
module.exports=printHello;

We can have only a single module.exports in a file.

To export multiple things we use an object.

function sayHii(name){
    console.log("Hii "+ name);
}
module.exports={ printHello, sayHii }

Importing

It is done using "require" with the path of the file.

const methods = require('./modules.js');
// using the functions:
methods.printHello();
methods.sayHii("Priyanshu");

We can require a module with any name or alias. Here I have called it as "methods" .

The exported module sends as an object, hence to access the functions I have to use methods "." sayHIi().

We can also call by destructuring the object:

const { printHello, sayHii } = require('./modules.js');

ECMAScript6 (ES6)

This is not the default method in JavaScript, hence to make it work first you have to add the type : "module" in the package.json file.

Exporting

We have two types of export:

• named export

• default export

Named Export:

Just write the "export" keyword before something you want to export.

export printHello(){
    console.log("Hello world");
}
export array=['apple','banana','carrot'];

You can have as many named export in a file. It sends the elements as an object where it is imported.

Default export

export object={name:"priyanshu",age:21};
export default sayHii(name){
    console.log("Hii "+ name);
}

We can have only a single default export in a file.

Importing

It is done with import-from keyword.

Importing named exports

import { sayHii,sayBye } from './modules.js';
sayHii();
sayBye();

Since named exports are sent as an object, we have to destructure it. We can't have a different name or alias for the imported element.

Importing Default exports

import any_Name_To_The_Imported_Defualt_Element from "./modules.js";
any_Name_To_The_Imported_Defualt_Element();

We can import the default exported element with any name, and Javascript will recognize it.

Conclusion

That's the end, hope you understood the concept.

If you liked the blog, do like and comment down what you feel.

You can also subscribe to my newsletter by entering your email below.

Thanks for reading.