JavaScript 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';

Tired of Poor JavaScript Skills? Fix That With Deep Grasping!Learn More

Functions

Methods

Constructors

Classes

Destructuring

Decorators

Modules

Accessors

Variables

Fields

Parameters

Error Handling

Control Flow

Statement Forms

Loops

Primitive Types

Comments

Access Operators

Spread Operators

Call Operators

Conditional Operators

Logical Operators

Equality Operators

Relational Operators

Arithmetic Operators

Assignment Operators

Update Operators

Unary Operators

Yield Operators

Bitwise Operators

Shift Operators

JavaScript Default Export

Export Syntax

Import Syntax

Dynamic Imports

Combining Default and Named Exports

Re-exporting a Default Export

​Export Syntax

​Import Syntax

​Dynamic Imports

​Combining Default and Named Exports

​Re-exporting a Default Export

Export Syntax

Import Syntax

Dynamic Imports

Combining Default and Named Exports

Re-exporting a Default Export