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.