Default Values in Modules

The module syntax is really optimized for exporting and importing default values from modules, as this pattern was quite common in other module systems, like CommonJS (another JavaScript module format popularized by Node.js). The default value for a module is a single variable, function, or class as specified by the default keyword, and you can only set one default export per module. Using the default keyword with multiple exports is a syntax error.

Exporting Default Values

Here’s a simple example that uses the default keyword:

export default function(num1, num2) {
    return num1 + num2;
}

This module exports a function as its default value. The default keyword indicates that this is a default export. The function doesn’t require a name because the module itself represents the function.

You can also specify an identifier as the default export by placing it after export default, such as:

function sum(num1, num2) {
    return num1 + num2;
}
export default sum;

Here, the sum() function is defined first and later exported as the default value of the module. You may want to choose this approach if the default value needs to be calculated.

A third way to specify an identifier as the default export is by using the renaming syntax as follows:

function sum(num1, num2) {
    return num1 + num2;
}
export { sum as default };

The identifier default has special meaning in a renaming export and indicates a value should be the default for the module. Because default is a keyword in JavaScript, it can’t be used for a variable, function, or class name (it can be used as a property name). So the use of default to rename an export is a special case to create a consistency with how non-default exports are defined. This syntax is useful if you want to use a single export statement to specify multiple exports, including the default, at once.

Importing Default Values

You can import a default value from a module using the following syntax:

// import the default
import sum from "./example.js";
console.log(sum(1, 2));     // 3

This import statement imports the default from the module example.js. Note that no curly braces are used, unlike you’d see in a non-default import. The local name sum is used to represent whatever default function the module exports. This syntax is the cleanest, and the creators of ECMAScript 6 expect it to be the dominant form of import on the Web, allowing you to use an already-existing object.

For modules that export both a default and one or more non-default bindings, you can import all exported bindings with one statement. For instance, suppose you have this module:

export let color = "red";
export default function(num1, num2) {
    return num1 + num2;
}

You can import both color and the default function using the following import statement:

import sum, { color } from "./example.js";
console.log(sum(1, 2));     // 3
console.log(color);         // "red"

The comma separates the default local name from the non-defaults, which are also surrounded by curly braces. Keep in mind that the default must come before the non-defaults in the import statement.

As with exporting defaults, you can import defaults with the renaming syntax, too:

// equivalent to previous example
import { default as sum, color } from "example";
console.log(sum(1, 2));     // 3
console.log(color);         // "red"

In this code, the default export (default) is renamed to sum and the additional color export is also imported. This example is equivalent to the preceding example.