JavaScript : ES6 Import, Export Modules

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)

1. There should be only one default export per module/ file 
2. 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)

1.  We can export multiple things like function, const, class and etc by prefixing their declarations with the keyword “export” 
2. These exports are differentiated by their names called named exports 
3. 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

1.  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 :)