import

The following content does not reflect the final state of the ECMAScript 6 modules specification. For more accurate documentation, see ECMAScript 6 modules: the final syntax.

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

Syntax

import 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 name , { member [ , [...] ] } 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.

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.

import myModule from "my-module.js";

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

import {myMember} from "my-module.js";

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

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

Import an entire module's contents, with some also being explicitly named. This inserts myModule, foo, and bar into the current scope. Note that foo and myModule.foo are the same, as are bar and myModule.bar.

import myModule, {foo, bar} from "my-module.js";

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

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

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

import "my-module.js";

Examples

Importing a secondary file to assist in processing a 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.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Specifications

Browser compatibility

[1] Partial support is behind a command line flag: --harmony-modules. See this V8 bug.

[2] See this Firefox bug.

See also

• export