JavaScript Modules — Exports. There’re many ways to export members of…
By: John Au-Yeung
Tags: Programming, Technology, JavaScript, Software Development, Web Development

Photo by chuttersnap on Unsplash

JavaScript modules allow us to divide code into small pieces. They also let us keep some code private while exposing other pieces of code that can be imported into another module.

In this article, we look at how to export modules in various ways.

Inline vs Clause Style Named Exports

There’re 2 ways to add named exports to a JavaScript module. For instance, we can write the following:

export const foo = 1;

export const bar = 2;

export const baz = () => {};

or we can write the following:

const foo = 1;

const bar = 2;

const baz = () => {};

export { foo, bar, baz };

We can also export members under different names with the as keyword a follows:

const foo = 1;

const bar = 2;

const baz = () => {};

export { foo, bar, baz as qux };

Re-exporting Members

We can export members that are imported from other modules. For instance, we can do that as follows:

bar.js

const foo = 1;

const bar = 2;

const baz = () => {};

export { foo, bar, baz as qux };

foo.js :

export * from "./bar";

index.js :

import { foo } from "./foo";

In the code above, we re-exported all members from the bar.js module in foo.js . Then we import foo from foo.js instead of bar.js .

We don’t have to export all the members. For instance, we can export selected members from bar.js as follows:

bar.js

const foo = 1;

const bar = 2;

const baz = () => {};

export { foo, bar, baz };

foo.js :

export { foo, bar } from "./bar";

index.js :

import { foo } from "./foo";

Making a Re-export the Default Export

We can mark a re-export as a default. For instance, we can change the re-export in foo.js as the default export as follows:

bar.js

const foo = 1;

const bar = 2;

const baz = () => {};

export { foo, bar, baz };

foo.js :

export { foo as default } from "./bar";

index.js :

import foo from "./foo";

In the code above, we export foo from bar in foo.js as a default export, so we can import it in index.js as a default import.

We can also export default exports as follows:

bar.js :

let foo = 1;

export default foo;

foo.js :

export { default } from "./bar";

index.js :

import foo from "./foo";

Then foo in index.js is 1.

Mixing Named and Default Exports in One Module

We can have both named and default exports in one module. For instance, we can write the following code to do that:

bar.js

export const bar = 3;

export const baz = "abc";

let foo = 1;

export default foo;

index.js :

import foo, { bar, baz } from "./bar";

In the code above, bar.js has both named and default exports. Then we can import each member as we expected in index.js .

Photo by Lutz Baumann on Unsplash

The Default Export is Just Another Named Export

Default exports are just another named export, except that we can only have one of them. For instance, given the following module:

bar.js :

let foo = 1;

export default foo;

Then we can import it with the default as keywords as follows:

index.js :

import { default as foo } from "./bar";

Now index.js has a named default export.

We can also turn named exports into default exports as follows:

bar.js :

let foo = 1;

export { foo as default };

Then we can import it as follows:

import foo from "./bar";

Loading Modules with import

We can use the import function that comes with the Webpack module bundle to import modules dynamically.

For instance, we can write the following code to do that:

bar.js :

let foo = 1;

export { foo as default };

index.js :

(async () => {

const foo = await import("./bar");

console.log(foo.default);

})();

Then we imported a default export from bar.js in index.js . It’s a promised-based API so we use async and await to import it.

Then we access the default export with the default property of the imported module.

For named exports, we can write the following to import the members. Given the following module:

bar.js :

export let foo = 1;

We can write the following in index.js to import it:

(async () => {

const foo = await import("./bar");

console.log(foo.foo);

})();

As we can see, named exports are accessed by their property name. So foo.foo is 1.

Conclusion

There’re many ways to export members in JavaScript modules. We can have named and default exports. Also, we can re-export members from another module. Finally, we can use the import function to import modules dynamically. It returns a promise.

A note from JavaScript in Plain English:

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!