> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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:**
```javascript theme={"dark"}
// Alternative 1: Anonymous function declaration
export default function() {
console.log("Executed");
}
```
```javascript theme={"dark"}
// Alternative 2: Anonymous class declaration
export default class {
constructor() {}
}
```
```javascript theme={"dark"}
// Alternative 3: Named function declaration (name is local to the exporting module)
export default function initializeApp() {
// ...
}
```
**Exporting references, expressions, and aliases:**
```javascript theme={"dark"}
// Alternative 4: Exporting a reference
const config = { port: 8080 };
export default config;
```
```javascript theme={"dark"}
// Alternative 5: Exporting an evaluated expression
export default 10 * 5;
```
```javascript theme={"dark"}
// 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.
```javascript theme={"dark"}
// 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:
```javascript theme={"dark"}
// 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.
```javascript theme={"dark"}
// 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:**
```javascript theme={"dark"}
export const apiVersion = 'v1';
export const timeout = 5000;
export default function fetchResource() {
// ...
}
```
**Importing:**
The default import must precede the named imports in the syntax.
```javascript theme={"dark"}
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:
```javascript theme={"dark"}
export { default } from './module.js';
```
To pass through the default export of another module as a named export of the current module:
```javascript theme={"dark"}
export { default as ModuleName } from './module.js';
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
