import Redirect 1

This is an experimental technology, part of the Harmony (ECMAScript 6) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

Summary

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

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 myModulefoo, 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

Specification Status Comment
ECMAScript 6 (ECMA-262)
The definition of 'Imports' in that specification.
Draft Initial definition.

Browser compatibility

Help improve compatibility tables by filling out this 11 question survey.

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported[1] Not supported[2] Not supported Not supported Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported Not supported Not supported Not supported Not supported Not supported

[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

Document Tags and Contributors

Last updated by: Sheppy,