// Tutorial //

ES6 Modules and How to Use Import and Export in JavaScript

Published on September 4, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
ES6 Modules and How to Use Import and Export in JavaScript

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

With ES2015 (ES6), with get built-in support for modules in JavaScript. Like with CommonJS, each file is its own module. To make objects, functions, classes or variables available to the outside world it’s as simple as exporting them and then importing them where needed in other files. Angular 2 makes heavy use of ES6 modules, so the syntax will be very familiar to those who’ve worked in Angular. The syntax is pretty straightforward:

Exporting

You can export members one by one. What’s not exported won’t be available directly outside the module:

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Alligator {
   constructor() {
     // ...
   }
}

Or you can export desired members in a single statement at the end of the module:

export { myNumbers, myLogger, Alligator };

Exporting with alias

You can also give an aliases to exported members with the as keyword:

export { myNumbers, myLogger as Logger, Alligator }

Default export

You can define a default export with the default keyword:

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle'];

export default function myLogger() {
  console.log(myNumbers, pets);
}

export class Alligator {
  constructor() {
    // ...
  }
}

Importing

Importing is also very straightforward, with the import keyword, members to be imported in curly brackets and then the location of the module relative to the current file:

import { myLogger, Alligator } from 'app.js';

Importing with alias

You can also alias members at import time:

import myLogger as Logger from 'app.js';

Importing all exported members

You can import everything that’s imported by a module like this:

import * as Utils from 'app.js';

This allows you access to members with the dot notation:

Utils.myLogger();

Importing a module with a default member

You import the default member by giving it a name of your choice. In the following example Logger is the name given to the imported default member:

import Logger from 'app.js';

And here’s how you would import non-default members on top of the default one:

import Logger, { Alligator, myNumbers } from 'app.js';

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
3 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Please do kindly explain also how to integrate that in index.html file

This comment has been deleted

Appreciate the really concise article. One thing that would be helpful though is a little help on when to use default or not when exporting. I.e. why not just make everything default export?