In JavaScript ES6, there is a new feature introduced ‘Modules’. Using modules, you can access variable, functions or classes written in another JavaScript file.
Modules enhance the reusability. Using modules you can maintain your code easily. Using module feature, you can attach only those required JavaScript file which are very necessary at loading time. And on request can use other file. So, it enhance a website loading time also.
Modules can load each other by using the keywords ‘export’ and ‘import’.
export: keyword labelled variables or functions says that this variable or function should be accessible from outside of this current module.
import: allows us to import the functionality written in some other module.
Modules always work in strict mode. E.g. assigning to an undeclared variable will give an error.
Let us understand with an example.
Suppose there is a JavaScript file named ‘greeting.js’ which contains export function. It should be used from some outer JavaScript file ‘main.js’ module using the import keyword.
// greeting.js
export function greeting(user) {
alert(`Hello, ${user}!`);
}
// main.js
import {greeting} from './greeting.js';
greeting('John'); // Hello, John!
Let us see some more example.
Suppose you are using index.html in which, you have to include main.js file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Advance JavaScript - Module</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>
#Output
ES6 Module
main.js
import { message } from "./library.js";
document.write(message);
library.js
export let message = 'ES6 Modules';
You can export multiple things together using :
export{variable_name, function_name, class_name};
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Advance JavaScript - Module</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>
#main.js
import { message, user, student } from "./library.js"; //importing multiple things at once.
document.write(message);
document.write(user('Share Query'));
let obj = new student();
#library.js
let message = 'ES6 Modules';
function user(name){
return `Hello ${name}`;
}
class student{
constructor(){
console.log('Constructon Method');
}
}
export{message, user, student}; //exporting all variable, function and class though a single export method.
You can also make an short name or alias of variable or function name or class name during importing.
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Advance JavaScript - Module</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>
#main.js
import { message as msg, user as us, student } from "./library.js"; //importing multiple things at once.
document.write(msg);
document.write(us('Share Query'));
let obj = new student();
#library.js
let message = 'ES6 Modules';
function user(name){
return `Hello ${name}`;
}
class student{
constructor(){
console.log('Constructon Method');
}
}
export{message, user, student}; //exporting all variable, function and class though a single export method.
In some cases, you will have to use all the things defined in the library.js file. In that case, simply use a special symbol (*) and an alias name for this.
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Advance JavaScript - Module</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>
#main.js
import * as lib from "./library.js"; //importing multiple things at once.
document.write(lib.message);
document.write(lib.user('Share Query'));
let obj = new lib.student();
#library.js
let message = 'ES6 Modules';
function user(name){
return `Hello ${name}`;
}
class student{
constructor(){
console.log('Constructon Method');
}
}
export{message, user, student}; //exporting all variable, function and class though a single export method.
