JavaScript offers an advanced feature named modules, using these modules we can utilize any object, class, literal, or function of one JavaScript file to any other JavaScript file. It improves the code’s reusability and reduces the loading time of the HTML file. For this purpose, the JavaScript modules provide two keywords, “import” and “export”.
Implementation of Export in JavaScript
A keyword “export” is required whenever we export the data of one file to another file. Using the keyword “export” we can export anything like a variable, function, or class to any other file. What we have to do is, simply write the “export” keyword prior to that variable, function, class, or anything we want to export.
The syntax to export a variable, function, and class is:
export var emp_name;
//exporting a function
export function emp(){
}
//exporting a class
export class employee{
}
Now we will figure out the working of the “export” keyword with the help of the following example, Let say we create the file with the name export.js:
Consider the following example that determines how to export a variable, function, or class:
export function emp(){
console.log("Employee name is Mike Smith");
}
export class Employee{
constructor(emp_name)
{
console.log("Welcome " + emp_name);
}
}
The alternate syntax for exporting the file elements is:
Using the above-given syntax we can export all elements of the file in a single statement, and while importing we will utilize the same name for variable, function, and class. For example:
function emp(){
console.log("Employee name is Mike Smith");
}
class Employee{
constructor(emp_name)
{
console.log("Welcome " + emp_name);
}
}
export {emp_name, emp, Employee};
Another way of exporting is default export, it is very helpful in exporting a single element:
export default emp_name;
This helps in importing the variable into any other class with any other name.
Implementation of Import in JavaScript
In JavaScript, the keyword “import” is used whenever we import anything from a file. We have to write the “import” keyword before anything we want to import from some other file.
The syntax to import a variable, function, and class is:
import {emp_name} from ‘./file name’
//importing a function
Import {emp} from ‘./file name’
//importing a class
import {employee} from ‘./file name’
We created another file with the name “import.js” and imported all the data from the file “export.js”:
console.log(emp_name);
import {emp} from "./export.js"
emp();
import {Employee} from "./export.js"
let a = new Employee("John");
A variable, function, and a class is imported from the file “./export”:
The output will verify that every element present in the “./export.js” file is imported to the “import.js” file:
emp_name is variable, emp is a function, and Employee is a class created in the export.js file:
console.log(emp_name);
emp();
let a = new Employee("John");
Now here, in the above code, we import all the elements in a single statement:
We will get the following output:
Now we will consider another example to understand how to import a default element:
console.log(_name);
We import a default member from the file “export.js” with “_name”:
In the “export.js” file the variable is created with the name “emp_name”:
But we access the same variable with “_name” in the “import.js” file and get the following output:
We get the same output, this means while importing any default element it is not necessary to use the same name as in the first file, instead, we can also use any different names.
Conclusion
Import and export are new features introduced in the modules of JavaScript to improve the reusability of the code. JavaScript provides import and export keywords to utilize the code of one file to other files. In this article, we determine how to work with the module’s import and export features. To better understand the concept we consider some examples and implement them in JavaScript.
After thoroughly studying this article, someone can analyze that while using import and export features of the module we have to use the same name for the variable, function, and class in both the files (the file from where you are exporting the data and the file in which you are importing the data). While “default” is an exceptional case where there is no such requirement, you can use any name of your choice while importing.
