Understanding imports and exports in JavaScript

Imagine you’d never heard of ES6 or any JS framework like React or Angular (and maybe, if you’re like me a couple of weeks ago, you don’t even have to imagine. That’s fine!). How would you organize your JavaScript code? If you’re not building super complex applications, you might just save your JS code in a different file (or two) and link that file in the script tag of your index.html.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Understanding imports and exports</title>

    <h1>Import 1</h1>
    <h1>Import 2</h2>

    <script src="functions.js"></script>
    <script src="script.js"></script>

That’s a simple solution, but the more complex your applications become, the less ideal of a solution this is. How do you keep track of your variable names? What if you assign the same global var names in different JS files?

That’s why with ES6, modules were introduced to the the JavaScript language. To use modules, you need to understand imports and exports of your code. Imports and exports are also used to work with React components, so it’s really useful to have a good understanding of them.

ES6 modules

Modules use the keywords import and export. When you want to read code exported from another module, you use import. When you want to provide the code in a module to other modules, you use export.

To turn your JS files into native modules, use type=”module” on your HTML script tags, like so:

  type="module" src="functions.js">
  type="module" src="script.js"></script>

(Please note that using modules is different from using regular scripts, and that you need a server environment to use them. If you want to set up a local server environment, take a look at http-server.)

Named and default exports

Named and default exports differ in how we use them and in their syntax. A file can have as many named exports as you need, and you export by using the name of the piece of code you want to export (syntax below). A file can only have one default export, and you have to come up with a name for it (so it could be useful, for example, if you want to export a function that doesn’t have a name).

In React, we use default exports to export our entire component file (there’s an example for this syntax below as well!).

Named and default exports therefore have unique/matching import statements , too.

Named exports

export { nameOfVariable, nameOfFunction};

The named export syntax uses the export keyword and wraps the name of the code you want to export in curly braces.

import { nameOfVariable, nameOfFunction } from './fileName.js';

The corresponding import syntax uses the import keyword, wraps the name of the code you want to import in curly braces and points to the filename of the import with from.

The import statement always has to be at the beginning of your file!

Default exports

export default nameOfFunction;

The default export syntax doesn’t use curly braces, but simply the keywords export default followed by what you want to export.

import nameOfFunction from './fileName.js';

Importing an entire file

To import an entire file, you use the export default syntax on the file you want to import and use the following syntax in the file you want to import to:

import * as objectName from ./fileName.js';

Use the import keyword, * syntax, as and add a name for your new object that you’ve just imported, then point to the source file with from as before.

Examples from React – similar, but different

In React, the concept of creating components that make up your application and connecting them with export/import feels like the next logical progression from JS modules.

The import statement will always be in the beginning of your code, and depending on how many components you use, you can have quite a lot of imports in the beginning of your file.

The export usually comes as the last line, in the end. In React, you use your components’ names for imports and exports. Here is an example from a user sign-in flow:

import SignUpButton from '../Buttons/SignUpButton';
import ToggleToSignIn from '../Buttons/ToggleToSignIn';
import ErrorMessage from '../ErrorMessage';

These components are all imported into one form, and from the file names you can see they’re buttons and error messages. These buttons and error messages all have their own exports for this to work:

export default SignUpButton
export default ToggleToSignIn
export default ErrorMessage

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *