Are You Using Imports & Exports Properly?

Harsha Vardhan
Nov 15, 2020 · 4 min read
Image for post
Image for post
Photo by Andy Li on Unsplash

JavaScript Modules are separated by files and loaded asynchronously. Exports are defined using the export keyword and imports are defined using import keyword.

While the basics of imports and exports are simple to understand, there are many other ways to work with ES Modules. In this article, we’ll go over all of the ways in which you can export and import within your modules.

Exports

1. Default Export

const foo = () => console.log('foo');export default foo;

We can also export a function declaration or a class declaration by default.

export default function foo() {
console.log('foo');
}

We can also export values as a default export.

export default 555;

2. Named Export

export const foo = () => console.log('foo');

We can also immediately export function and class declarations.

export function foo() {
console.log('foo')
}

If we wanted to export a variable which was already defined, we could do that by wrapping the variable in curly brackets. This is usually done at the end of the file.

const foo = () => console.log('foo');export { foo }; 

In order to rename the named export, use the as keyword. We can also export other variables at the same time.

const foo = () => console.log('foo');
const bar = 123;
export { foo as printFoo, bar };

3. Aggregated Exports

export * from "./foo.js";

This will take all of the named exports of ./foo.js and re-export them. It won’t re-export default exports though, since a module can only have one default export. We can also specifically export default modules from other files, or name the default export when we re-export it.

export { default } from "./foo.js";// orexport { default as foo } from "./foo.js";

We can also selectively export different variables from another module, instead of re-exporting everything.

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

Finally, we can wrap up an entire module into a single named export using the as keyword. Suppose, consider the following file.

// funcs.js
export function foo() {console.log('foo')}
export function bar() {console.log('bar')}

We can now pack this into a single export which is an object containing all of the named and default exports.

export * as funcs from "./funcs.js"; 
// { foo: function foo(), bar: function bar() }

Imports

1. Default Imports

import fooFunctions from "./foo.js";

We can also import all of the exports, including named and default exports, at the same time. This will put all of them exports into an object, and the default export will be given the property name default.

import * as foo from "./foo.js"; 
// { default: foo }

2. Named Imports

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

We can also rename the import as we import it using the as keyword.

import {foo as fooFunction, bar} from './foo.js`

We can also mix named and default exports in the same import statement.

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

Finally, we can import a module without listing any of the exports we want to use in our file. This is called a side-effect import, and will execute the code in the module without providing us any exported values.

import "./fruitBasket.js";

3. Dynamic Imports

Since ES Modules are asynchronous, the module won’t immediately be available. We have to wait for it to be loaded before we can do anything with it. If our module can’t be found, the dynamic import will throw an error.

It’s a good practice to use try/ catch when using dynamic imports.

async function printFn() {
try {
const fooFn = await import('./foo.js');
} catch {
console.error("Error getting foo module:");
}
return fooFn();
}

Conclusion

I hope you found this article helpful. If so, get more similar content by subscribing to Decoded, our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store