import

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

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur CompilerBabel or Rollup.

Syntax

JavaScript
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";
name
Name of the object that will receive the imported values.
member, memberN
Name of the exported members to be imported.
defaultMember
Name of the exported default to be imported.
alias, aliasN
Name of the object that will receive the imported property
module-name
The name of the module to import. This is a file name.

Description

The name parameter is the name of the object that will receive the exported members. The member parameters specify individual members, while the name parameter imports all of them. name may also be a function if the module exports a single default parameter rather than a series of members. 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 "my-module.js".

JavaScript
import * as myModule from "my-module";

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

JavaScript
import {myMember} from "my-module";

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

JavaScript
import {foo, bar} from "my-module";

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

JavaScript
import {reallyReallyLongModuleMemberName as shortName} from "my-module";

Import multiple members of a module with convenient aliases.

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

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

JavaScript
import "my-module";

Importing defaults

It is possible to have default export (whether it is an object, a function, a class, etc.). Reciprocally, it is possible to use the import instruction to import such defaults.

The simplest version directly imports the default:

JavaScript
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:

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

or

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

Examples

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

JavaScript
// --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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Imports' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support No support[2] No support[1] No support Build 14342  No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 36.0 No support No support No support No support 36.0

[1] See bug 568953.

[2] See Chromium bug 1569

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements/import

ECMAScript6 JavaScript Modules Statement