Default Export

A default export is an ECMAScript Module (ESM) directive used to expose a single, primary value—such as a function, class, object, or primitive—from a module. Unlike named exports, a module can contain at most one default export. The exported value can be imported into another module without using the curly brace syntax required for named imports, and it can be bound to any arbitrary local identifier.

Under the hood, a default export is syntactic sugar for a named export where the exported identifier is strictly the reserved keyword default.

Export Syntax

Default exports can be applied directly to anonymous or named declarations, applied to previously declared references, or created using the named export alias syntax. Because a module can only have one default export, the following examples represent mutually exclusive implementations.

Exporting declarations directly:

// Alternative 1: Anonymous function declaration
export default function() {
  console.log("Executed");
}

// Alternative 2: Anonymous class declaration
export default class {
  constructor() {}
}

// Alternative 3: Named function declaration (name is local to the exporting module)
export default function initializeApp() {
  // ...
}

Exporting references, expressions, and aliases:

// Alternative 4: Exporting a reference
const config = { port: 8080 };
export default config;

// Alternative 5: Exporting an evaluated expression
export default 10 * 5; 

// Alternative 6: Exporting an existing variable using named export alias syntax
const config = { port: 8080 };
export { config as default };

Note: You cannot use export default directly with variable declarations (const, let, var) on the same line. The declaration and the export must be separated.

Import Syntax

When statically importing a default export, the receiving module dictates the identifier name. The JS engine resolves the default binding from the source module and assigns it to the provided local identifier.

// The identifier 'ServerConfig' is arbitrarily chosen by the importing module
import ServerConfig from './config.js';

The above syntax is functionally identical to importing the default keyword as a named import and aliasing it:

// Equivalent to the standard default import syntax
import { default as ServerConfig } from './config.js';

Note: While named imports use curly braces, they are strictly a distinct static binding syntax and not object destructuring. For example, named imports use the as keyword for aliasing (import { default as ServerConfig } from './config.js'), whereas object destructuring uses a colon (const { default: ServerConfig } = obj).

Dynamic Imports

When loading modules asynchronously using dynamic imports (await import()), the default export is not returned directly. Instead, the promise resolves to a module namespace object. The default export must be accessed via the .default property on this resolved object.

// Dynamic import of a module containing a default export
const module = await import('./config.js');

// Accessing the default export
console.log(module.default);

Combining Default and Named Exports

A single module can utilize both one default export and multiple named exports.

Exporting:

export const apiVersion = 'v1';
export const timeout = 5000;

export default function fetchResource() {
  // ...
}

Importing: The default import must precede the named imports in the syntax.

import fetchResource, { apiVersion, timeout } from './network.js';

Re-exporting a Default Export

A default export can be aggregated and re-exported from a central module (often an index.js file).

To pass through the default export of another module as the default export of the current module:

export { default } from './module.js';

To pass through the default export of another module as a named export of the current module:

export { default as ModuleName } from './module.js';

Master JavaScript with Deep Grasping Methodology!

Learn More