JavaScript export

export makes a function, variable or class available to other modules.

There are two kinds: named exports and a single default export.

A file can have many named exports but only one default.

Example

// Simulating a module's exports as a plain object.
const mathModuleExports = {
  double: function (n) { return n * 2; },
  PI_ROUNDED: 3
};

console.log(mathModuleExports.double(5));
console.log(mathModuleExports.PI_ROUNDED);

The output is 10 then 3.

In a real file this would be two separate export statements.

Named and Default Exports

export function name() {} exports it by that name.

export default marks the one main export of the file.

export { a, b } exports several names already declared.

Syntax

export const PI_ROUNDED = 3;
export function double(n) { return n * 2; }
export default double;

A file can have any number of named exports but only one default.

Named Exports, Simulated

Each key on the exports object stands in for one named export.

Example

const shapesExports = {
  square: function (side) { return side * side; },
  circle: function (r) { return Math.round(Math.PI * r * r); }
};

console.log(shapesExports.square(4));
console.log(shapesExports.circle(3));

Both would be written as separate export statements in a real file.

Exporting a List

This is the same as exporting each one individually.

Example

function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }

const exportedList = { add: add, subtract: subtract };

console.log(exportedList.add(2, 3));
console.log(exportedList.subtract(5, 2));

The real syntax is export { add, subtract }; after declaring both functions.

A Default Export

This is for a file whose whole purpose is one thing.

A default export is imported without curly braces, and under any name.

Example

function double(n) { return n * 2; }

const moduleExports = { default: double };

console.log(moduleExports.default(21));

The real syntax is simply export default double;.

Renaming on Export

as exports something under a different public name.

Example

function internalHelper(n) { return n + 1; }

const moduleExports = { increment: internalHelper };

console.log(moduleExports.increment(5));

The real syntax is export { internalHelper as increment };.

One Default Per File

Declaring a second default export is a syntax error in a real module.

Example

const moduleExports = { default: "first" };

console.log(moduleExports.default);

Named exports have no such limit.

Complete Example

<!-- shapes.js -->
<script type="module">
  export const PI_ROUNDED = 3;

  export function square(side) {
    return side * side;
  }

  function circle(radius) {
    return Math.round(PI_ROUNDED * radius * radius);
  }

  export default circle;
</script>

<!-- This file now has:
     - a named export: PI_ROUNDED
     - a named export: square
     - a default export: circle -->

Try It Yourself

Real export syntax needs a module file loaded by another file.

Try the simulated version:

Run the opening example and change what the object exports.

Important Points

• export makes a name available to other files.
• A file can have many named exports.
• A file can have only one default export.
• export { a as b } renames on the way out.
• Default exports are imported without curly braces.

Conclusion

Named exports suit a file offering several related things.

A default export suits a file whose whole job is one thing.

Most real files use a mixture of both.