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

JavaScript: ES6 Arrow Functions

1. It is also called “fat arrow” =>
2. These is more concise syntax for writing expressions
3. It doesn’t have its own “this”
4. These are anonymous and change the way “this” binds in functions
5. By using arrow function we can avoid having to type the function keyword, return keyword, and curly brackets ( i.e. it is implicit )

Arrow Function with One Parameter

Traditional Way

function test(param) { return param+10; }

test(10);

New Way

var test=(param) => param + 10 ;

test(10);

Arrow Function with Multiple Parameters

Traditional Way

function test(param1,param2) { return param1 + param2; }

test(10,10);

New Way

var test=(param1, param2) => param1 + param2 ;

test(10,10);

Arrow Function without Parameters

Traditional Way

function test() { return 10; }

test();

New Way

var test=() => 10 ;

test();

Arrow Function with Multiple Statements

Traditional Way

function test() {

      var p1=10;

      var p2=20;

      return p1+p2;

 }

test();

New Way

var test=() => {

       let p1=10;

       let p2=20;

      return p1+p2;

}

test();

Arrow Function with Object

Traditional Way

function test(name,email) {

    return

      {

          Name: name,

          Email: email

      };

  }

test(‘rama’,’rama@gmail.com’);

New Way

var test=(name,email) => ({ Name:name, Email:email});

test(‘rama’,’rama@gmail.com’);

Happy Coding :)