Javascript: export and export default

Ravina Deogadkar - Aug 29 '20 - - Dev Community

Another important concept in JavaScript, export statement is used for exporting objects,functions and primitive values from the model that can be used by other programs using import statement. Export statement are in a strict mode always.
There are two types of experts
a. Named Export (zero or more per module)
b. Default Export(only one per module)

Named Export

You can have multiple export per modules. Export is used to export multiple variables. While importing, the name must be similar to corresponding object.
export let name1,name2,name3,..;

export let name1=..., name2=..., name3=...;

export let {name1, name2, name3};

export const function myfunction(){
...
}

export class MyClass{
...
...
}

We can also rename export to avoid naming conflicts.

export name1 as my variable;

Default Export

You can have only one export default per modules. Default exported object can be imported with any name.

export default name1
export default function myfunction()

Re-exporting and Re-importing

It is possible to re-export a function from a module to another module. We want to export variable from multiple modules to a parent modules and then use parent modules to export the imported variables further to other variables. Parent module will be completely used as a port to gather data from multiple modules and then further transport data to other modules.

export from

We can use export from, to export variables from parent module, which is in turn importing from multiple modules.
Consider childmodule1 is exporting a variable myvar and childmodule2 is exporting a function myfunc. Then we have a parentmodule which is importing from both the modules.

import {myVar} from childmodule1;
import {myfunc} from childmodule2;

And now we need to export from this module to be further used by other modules.

export {myVar} from childmodule1;
export {myfunc} from childmodule2;

That's all about export and export default. Hope it might have enlightened the concept.

Happy coding!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .