Overview
Javascript was mostly used for functional programming. If we ever wanted to make the code modular we had to separate the code in different files and load them as scripts.
With ES6 it is now possible to import the code from one file to another as Modules. Modules are javascript files that can be loaded in a different mode. This was necessary because modules have different semantics.
Advantages of using modules
- Module codes always run in strict mode.
- Variables created inside the module are module scoped only. They are never added to the global scope.
- Value of
this
in top level module isundefined
. - Module should
export
the code inorder to make it accessible. - Module can import another modules as well.
The real power of modules is the ability to export
and import
only bindings you need, rather than whole code.
Exporting Modules
Basic Exporting
//export properties export var name = 'Prashant Yadav'; export let age = 23; export const nationality = 'Indian'; //export methods export function add(num1, num2){ return num1 + num2; } //export class export class Addition{ constructor(num1, num2){ this.num1 = num1; this.num2 = num2; } add(){ return this.num1 + this.num2; } } //This is private as we are not export it let rectangle = (width, height) => { return width * height; } let square = (length) => { return rectangle(length, length); } //exporting square separately export { square };
There are a few things you should remember while exporting the modules.
- You can
export
as many modules as you want from a single file. function
andclass
names should be specified if you are not exporting them asdefault
.- There can be only one
default
module exported.
Exporting Default Module
The default value for a module is a single variable, function or class specified by the default
keyword.
//exporting anonymous function export default function(num1, num2){ return num1 + num2; } //exporting anonymous class export default class{ constructor(num1, num2){ this.num1 = num1; this.num2 = num2; } add(){ return this.num1 + this.num2; } } //exporting named function let add = function(num1, num2) => { return num1 + num2; } export default add; // OR export {add as default} //exporting multiple values export let name = 'prashant'; export let age = 23; export default function(name, age){ return `${name} is ${age} years old`; }
Renaming export modules
We can rename the module name while exporting them.
//exporting named function let add = function(num1, num2) => { return num1 + num2; } export {add as sum};
Importing Modules
When we import the module the binding to which we assign the values act as const variable. We cannot re declare them and/or use them as variables, function, class.
Note: ./
, /
, ../
indicates the directory listing. Use them accordingly to find your files.
Basic Importing
//import single import { add } from './module.js'; console.log(add(1, 2)); // 3
Importing multiple modules
//import multiple import { name, age } from './module.js'; console.log(name, age); // 'Prashant', 23
Import all modules
//import all the modules import * from './module.js' console.log(name, age); console.log(add(1,2)); // 'Prashant', 23 // 3
Note! we cannot change the value of imported binding directly. We have to do it explicitly through the imported module.
//export data export name = 'prashant'; export function updateName(val){ name = val; } //import data import {name, updateName} from './example.js'; console.log(name); //prashant updateName('pranav'); console.log(name); //pranav name = 'sachin'; //syntax error
Importing default modules
we can give any name to default modules
//importing default modules import sum from './example.js' //Exporting multiple values with one default value export let name = 'prashant'; export let age = 23; export function(name, age){ return `${name} is ${age} years old.`; } import display, {name, age} from './modules.js'; // OR import {display as default, name, age} from './modules.js'; console.log(display(name, age)); //"prashant is 23 years old"
Renaming import modules
We can rename the module name while importing them.
//Renaming modules while importing import {sum as add} from './example.js'
Re-exporting imported modules
we can re-export the imported modules.
//Basic import { add } from './modules.js'; export { add } //In single line export { add } from './modules.js'; //Renaming and exporting export { add as sum } from './modules.js'; //Exporting all modules export * from './modules.js';
Loading modules in browser
Evan before ES6 browsers hand different ways to import files.
- Load different files with
script
element andsrc
. - Embedding inline code with
script
element and withoutsrc
.
But browsers have now updated themselves to handle the modular code.
We can use type
attribute to use the import
and export
.
//load the file <script src="modules.js" type="module"></script> //load the inline script <script type="module"> import { add } from './modules.js'; console.log(add(1, 2)); </script>