1. Prior to ES6, we use to implement modules using libraries. But, ES6 comes with built-in modules
2. ES6 modules are stored in files. There is exactly one module per file and one file per module
3. ES6 comes with named Export and default exports
4. It should be only one default export in a single JavaScript file
5. It can contain one or more named exports in single JavaScript file
6. We should not write conditional export and import
7. Imports are hoisted. So, it doesn’t matter where you write import statement in a file
Default Exports (one per module)
- There should be only one default export per module/ file
- We can implement default export by prefixing the declaration with the keyword “default”
Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export default function() { return 10 + 10 };
If you want to use this function in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import TestModule from ‘TestModule’
console.log(TestModule());
Note : Here, we are using module name/file name for importing function
Named Exports (one or more per module)
- We can export multiple things like function, const, class and etc by prefixing their declarations with the keyword “export”
- These exports are differentiated by their names called named exports
- Use curly braces while importing
Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export function AddNum(num1,num2) { return num1 + num2 };
export const PI=3.14;
If you want to use these in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import { AddNum, PI } from ‘TestModule’
console.log(AddNum(10,10)); console.log(PI);
Mixed named and default Exports
- We can combine both default and named exports in a single module
Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export function AddNum(num1,num2) { return num1 + num2 };
export const PI=3.14;
export default function(){return 10}
If you want to use these in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import TestModule, { AddNum, PI } from ‘TestModule’
console.log(AddNum(10,10));
console.log(PI);
console.log(TestModule());
named export with alias name Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export function AddNum(num1,num2) { return num1 + num2 };
export { AddNum as AddTwoNum }
If you want to use these in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import { AddTwoNum } from ‘TestModule’
console.log(AddTwoNum (10,10));
default import with alias name Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export default function() { return 10 + 10 };
If you want to use this function in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import { default as AddTwoNum } from ‘TestModule’
console.log(AddTwoNum ());
named import with alias name Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export function AddNum(num1,num2) { return num1 + num2 };
export const PI=3.14;
If you want to use these in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import { AddNum as AddTwoNum, PI as PIVal } from ‘TestModule’
console.log(AddTwoNum (10,10));
console.log(PIVal);
namespace import Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export function AddNum(num1,num2) { return num1 + num2 };
export const PI=3.14;
If you want to use these in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import * as TestLib from ‘TestModule’
console.log(TestLib .AddTwoNum (10,10));
console.log(TestLib .PIVal);
Combine default import with namespace import Create a file “TestModule.js” and add following content
//------------ TestModule.js ---------------- //
export function AddNum(num1,num2) { return num1 + num2 };
export const PI=3.14;
export default function(){return 10} ;
If you want to use these in “Main.js” file, add following content
// ------------ Main.js ------------------------ //
import TestModule, * as TestLib from ‘TestModule’
console.log(TestLib .AddTwoNum (10,10));
console.log(TestLib .PIVal);
console.log(TestModule());
Happy Coding :)