import

The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc.

Syntax

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

defaultMember

Name that will refer to the default export from the module.

module-name

The name of the module to import.

name

Name of the object that will refer to the imports.

member, memberN

Name of the exported members to be imported.

alias, aliasN

Names that will refer to the named imports.

Description

The name parameter is the name which will refer to the exported members. The member parameters specify individual members, while the name parameter imports all of them. Below are examples to clarify the syntax.

Import an entire module's contents. This inserts myModule into the current scope, containing all the exported bindings from the module identified by "my-module", often "my-module.js".

import * as myModule from 'my-module';

Import a single member of a module. This inserts myMember into the current scope.

import {myMember} from 'my-module';

Import multiple members of a module. This inserts both foo and bar into the current scope.

import {foo, bar} from 'my-module';

Import a member with a more convenient alias. This inserts shortName into the current scope.

import {reallyReallyLongModuleMemberName as shortName}
  from 'my-module';

Import an entire module for side effects only, without importing any bindings.

import 'my-module';

Import multiple members of a module with convenient aliases.

import {
  reallyReallyLongModuleMemberName as shortName,
  anotherLongModuleName as short
} from 'my-module';

Importing defaults

It is possible to have a default export (whether it is an object, a function, a class, etc.). The  import statement may then be used to import such defaults.

The simplest version directly imports the default:

import myDefault from 'my-module';

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

import myDefault, * as myModule from 'my-module';
// myModule used as a namespace

or

import myDefault, {foo, bar} from 'my-module';
// specific, named imports

Examples

Importing a secondary file to assist in processing an AJAX JSON request.

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from 'file';
getUsefulContents('http://www.example.com', data => {
  doSomethingUseful(data);
});

Specifications

Browser compatibility

[1] See bug 568953.

[2] See Chromium bug 1569

[3] Behind the "Enable experimental JavaScript features" flag(about:flags)

[4] See Safari Technical Preview 21 Release Notes

[5] See ECMAScript modules in browsers

[6] See Modules (ES6) - Chrome Platform Status

See also

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"