Best of Modern JavaScript — Import and Export Styles

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at how to use JavaScript modules.

Named Exporting Styles

We can export anything in our JavaScript modules.

Some things we can export include:

export var foo = "...";
export let bar = "...";
export const MY_CONST = "...";

export function qux() {
  //...
}

export function* gen() {
  //...
}

export class Baz {
  //...
}

We export var , let , const variables.

And we can also export various kinds of functions and classes.

We can also list all the exports at the end of the file.

For example, we can write:

var foo = "...";
let bar = "...";
const MY_CONST = "...";

function qux() {
  //...
}

function* gen() {
  //...
}

class Baz {
  //...
}

export { MY_CONST, foo, bar, qux, gen, Baz };

We have one export statement with all the items we export at the end.

Re-exporting

We can re-export module members by writing:

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

Given that foo.js has:

export var foo = "...";
export let bar = "...";

This syntax is the shorthand for importing all the members from foo.js and export them with the same names all in one line.

We can also use the as keyword to export the members.

For example, we can write;

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

to rename the foo variable to qux .

We can do the same thing as default export.

For example, we can write:

export { default } from "./foo";

given that we have:

export default "...";

We can also re-export named exports as default exports.

For example, we can write:

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

given that we have:

export const baz = "...";

in foo.js .

We imported baz from foo.js , which is a named export as a default export.

Having Both Named Exports and a Default Export in a Module

We can have both named and default exports inside a module.

For example, we can write:

var foo = "...";
let bar = "...";
const MY_CONST = "...";

function qux() {
  //...
}

function* gen() {
  //...
}

class Baz {
  //...
}

export { MY_CONST, foo, bar, qux, gen, Baz };

export default function quux() {}

all in one module.

Then we can write:

import quux, { MY_CONST, foo, bar, qux, gen, Baz } from "./foo";

to import them.

This is similar to what we had with CommonJS.

It’s probably a good idea to avoid mixing named and default exports to avoid confusion.

The default export is just another named export.

However, its name is default unless we rename it with as or import it with the name we want.

For example, we can import default exports by writing:

import { default as foo } from 'lib';
import foo from 'lib';

We can use default as an export name, but not as a variable name.

Conclusion

There’re many ways to export something with our code.

We can also re-export imports all in one line.