JavaScript ES6 modules: how import and export work

This chapter covers modules and imports/exports in JavaScript. We will see how to use them to organise and share code more effectively, and how to move data between files safely. We will also see how to put these features to work, with concrete, practical examples.

Modules and imports/exports are part of the ECMAScript 6 (ES6) specification, introduced in 2015. All current browsers support them natively: a transpiler such as Babel or a bundler such as Webpack is only needed to target very old browsers, or to bundle files together.

What is a module in JavaScript (ES6)?

Modules are a way of structuring and organising code by splitting it across separate, independent files. The code becomes easier to understand and to maintain in the long run, because each part is more readable and more reusable.

How modules work, and what they buy you

The idea rests on the export keyword, which makes selected parts of the code reachable from outside the module. Everything the end user does not need stays hidden, and only the relevant items are exported.

The benefits are many. First, isolating the different parts of the code avoids name clashes, which matters especially when a team works on a large project. Second, the code is better organised, split into files that are easier to maintain. Finally, code becomes easy to reuse by importing it into other projects.

Creating a module with the “export” keyword

To create a module in JavaScript, put the export keyword in front of the items you want to be reachable from outside. For example, to export a saluer function defined in a module.js file:

export function saluer() {
  console.log("Bonjour !");
}

You can also export several items from a module by putting export in front of each one. For example:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

The export default statement designates one default item for your module. If you do not explicitly import a named item, that default one is imported instead. For example:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

How do you import a module in JavaScript (ES6)?

Modules let you split your code across files and organise a project more effectively. The previous section showed how to export from a module with export. But how do you bring a module into your own code? That is what this section covers.

Using the “import” statement

To import a module in JavaScript, you use the import statement. Here is an example:

import * as monModule from '/chemin/vers/mon/module';

This syntax imports every item of the monModule module and stores them in an object of the same name. You can also say exactly which items you want, by following import with the list of names in curly braces:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

Named items can be renamed on the way in as well, with “import” followed by the “{ nom1 as alias1, nom2 as alias2 }” syntax, like this:

import { nom1 as alias1, nom2 as alias2 } from 'module';

To import a class or a function exported as an export default, do it like this:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

When a default import and named imports come from the same module, put the default one first, like this:

import MonModule, { maFonction } from './monModule';

// using the default import
const monModule = new MonModule();

// using the named import
maFonction();

Finally, dynamic import with import() loads a module asynchronously. It is useful when you only want to load a module at the point where it is actually needed, rather than making the browser fetch it for nothing.

import('./monModule').then(monModule => {
  // using the imported items
  monModule.maFonction();
  monModule.maVariable;
});

How do you use modules in the browser?

We have seen how to create and export modules with export, and how to import them with import. These statements are not supported by every browser yet, though. Several ways of using modules in a browser exist, and this section goes through them.

Using the “type=module” attribute on “script” tags

To use modules in the browser, add the type=module attribute to the script tag that loads your JavaScript file. It tells the browser the file is a module and has to be handled differently from a standard script. Here is an example:

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

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Prints 'ma variable'

Using a bundler such as Webpack

Another way of loading modules in the browser is to use a bundler. A bundler gathers several modules and JavaScript files into a single file, which the browser loads more easily. Webpack is a popular one, with plenty of advanced features for handling modules. If you want to learn Webpack, I have written a tutorial about it.

Conclusion

We have seen how to create a module with export and how to import one with import. We have also covered paths and environment when importing modules, along with default and named imports/exports. Finally, we have seen how to use modules in the browser with the type=module attribute on script tags.

This tutorial has given you the basics to get started with JavaScript and to understand the key concepts of the language. From here you can carry on learning and specialise in a field such as web development. Keep going, and good luck with your projects!