DEV Community

loading...

ECMA Script import and export

King Rayhan
My name is Rayhan and I'm a full stack web developer, Nodejs wizard. With my 6+ years of freelancing career, I learned a lot of modern webs developing tools and frameworks like expressjs, reactjs..
Updated on ・3 min read

The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.

This feature is only implemented natively in Safari and Chrome at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
There are 4 types of exports:

1 — Named exports (several per module)

2 — Default exports (one per module)

3 — Mixed named & default exports

4 — Cyclical Dependencies

1. Name exports

you can export variable, object or function.

Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

Suppose I have a file named lib.js and there some js variable

//------ lib.js ------
export var str1 = 'string 1';
export var str2 = 'string 2';
Enter fullscreen mode Exit fullscreen mode

In my main.js

//------ lib.js ------
import { str1 , str2 } from './lib'
console.log(str2); // Output:  string 1
console.log(str2); // Output:  string 2
Enter fullscreen mode Exit fullscreen mode

I can also export like this,

var str1 = 'string 1';
var str2 = 'string 2';
var str2 = 'string 3';
export { str1 , str2 , str3 }
Enter fullscreen mode Exit fullscreen mode

then import,

import { str1 , str2 , str3 } from './lib'
console.log(str1); // Output:  string 1
console.log(str2); // Output:  string 1
console.log(str3); // Output:  string 1
Enter fullscreen mode Exit fullscreen mode

With import object from another file(s) I could give an alias

import { str1 as StringOne , str2 , str3 } from './lib'
console.log(StringOne); // Output:  string 1
Enter fullscreen mode Exit fullscreen mode

Not only variable, but you can also export any function, class or variable or anything

//------ lib.js ------
function squire(n){
    return n*n;
}
var myInfo = {
 name: 'King Rayhan',
 age: 21
};
export { squire , myInfo }
//------ main.js ------
import { squire , myInfo } from './lib'
console.log(squire(3)); // output: 9
console.log('Name: ' + myInfo.name); // output: Name : King Rayhan
console.log('Age: ' + myInfo.age); // output: Age: 21
Enter fullscreen mode Exit fullscreen mode

2. Default exports

One module can have only one default export. As shown previous examples we can export one function or variable or object or anything, but only one.

//------ myFunc.js ------
export default function () { //... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
Enter fullscreen mode Exit fullscreen mode

Here are some example,

export default var info = {
 name: 'Rayhan',
 age: 21
};
// --- or
var info = {
 name: 'Rayhan',
 age: 21
};
Enter fullscreen mode Exit fullscreen mode

export default info;
Now, I can import that default export to your main file,

import info from './lib'
console.log(info.name); // Rayhan
Enter fullscreen mode Exit fullscreen mode

It is not mandatory to use the same name of the corresponding object, you can name it anything you want.

//------------- lib.js
export default var info = {
    name: 'Rayhan',
    age: 21
};

// ------------- main.js
import MyInformation from './lib'
console.log(MyInformation.name); // Rayhan
console.log(MyInformation.age); // 21
Enter fullscreen mode Exit fullscreen mode

3. Mixed named & default exports

we can export normal object and default object at a time

// ---------- lib.js
var info = {
 name: 'Rayhan',
 age: 21
};
var fullName = 'King Rayhan';
export default fullName;
export { info };
// ----------- main.js
import name , { info } from './lib'
console.log(name); // King Rayhan
console.log(info.age); // 21
Enter fullscreen mode Exit fullscreen mode

As mentioned before, we can call the default object by any name but the non-default object must be the exact name.

Import Syntax
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
Export Syntax
export { name1, name2, , nameN };
export { variable1 as name1, variable2 as name2, , nameN };
export let name1, name2, , nameN; // also var, function
export let name1 = , name2 = , , nameN; // also var, const

export default expression;
export default function () {  } // also class, function*
export default function name1() {  } // also class, function*
export { name1 as default,  };

export * from ;
export { name1, name2, , nameN } from ;
export { import1 as name1, import2 as name2, , nameN } from ;
Enter fullscreen mode Exit fullscreen mode

Discussion (0)