Tutorial

ES6 Modules and How to Use Import and Export in JavaScript

Published on September 4, 2020
author

Alligator.io

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';

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

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?

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel