import

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

Note: This feature is not implemented in any browsers natively at this point. It is implemented in many transpilers, such as the Traceur Compiler and ES6 Module Transpiler.

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" as 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 "my-module.js" as myModule; // equivalent

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.

Firefox-specific notes

The import and export statements were formerly an ancient feature in Netscape, but it never gained popularity in that time and have been removed in Firefox 3.5 (bug 447713).

See also

• export