> ## 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 Namespace Export
A namespace export is an ECMAScript module (ESM) syntax that aggregates all named exports from a specified module and re-exports them as properties of a single Module Namespace Object under a new identifier.
```javascript theme={"dark"}
export * as identifierName from './module-path.js';
```
## Technical Mechanics
When the JavaScript engine encounters a namespace export, it performs the following operations:
1. **Resolution:** It resolves the target module specifier (`'./module-path.js'`).
2. **Aggregation:** It collects all exported bindings (variables, functions, classes) from the target module.
3. **Object Creation:** It constructs a Module Namespace Object (`[object Module]`).
4. **Re-exportation:** It exports this newly created namespace object from the current module using the specified `identifierName`.
## Live Bindings vs. Immutability
The generated Module Namespace Object is structurally immutable—it is sealed, and its properties cannot be added, removed, or reassigned. However, ESM utilizes **live bindings**. The properties on the namespace object are not static copies of values; they are direct references to the bindings in the source module. If the source module mutates an underlying exported variable, the value returned by the namespace object's property will dynamically update to reflect that change.
## Scope and Local Bindings
Crucially, a namespace export does **not** import the bindings into the current module's local scope.
This behavior distinguishes `export * as ...` from a two-step import-then-export process. The statement `import * as MathUtils from './math.js'; export { MathUtils };` creates a local `MathUtils` variable that can be accessed within the module. In contrast, `export * as MathUtils from './math.js';` performs the re-export directly without polluting the local scope. You cannot access the aggregated properties within the file performing the export.
## Execution Example
Given a source module with multiple named exports and a mutable variable:
```javascript theme={"dark"}
// source.js
export let counter = 0;
export function increment() {
counter++;
}
```
The namespace export aggregates these into a single named export without creating a local binding:
```javascript theme={"dark"}
// aggregator.js
export * as CoreLogic from './source.js';
// ReferenceError: CoreLogic is not defined
// console.log(CoreLogic.counter);
```
The consuming module imports the namespace object as a standard named import and observes the live bindings:
```javascript theme={"dark"}
// consumer.js
import { CoreLogic } from './aggregator.js';
console.log(CoreLogic.counter); // 0
CoreLogic.increment();
console.log(CoreLogic.counter); // 1 (Demonstrates live bindings)
// TypeError: Cannot assign to read only property 'counter'
// CoreLogic.counter = 5;
```
## Default Export Behavior
If the target module contains a `default` export, the namespace export includes it as a property explicitly named `default` on the resulting Module Namespace Object.
```javascript theme={"dark"}
// ui-components.js
export const Button = () => {};
export default function App() {}
// aggregator.js
export * as UI from './ui-components.js';
// consumer.js
import { UI } from './aggregator.js';
console.log(UI.Button); // [Function: Button]
console.log(UI.default); // [Function: App]
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
