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.

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:

// 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:

// 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:

// 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.

// 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]

Master JavaScript with Deep Grasping Methodology!

Learn More