bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JS Module Namespace

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind JS Module Namespace?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Order

Put the learning moves in the order that makes the concept easiest to apply.

Module Namespace Features
Module Namespace Support
The Module Namespace Object

The Module Namespace Object

When you use the syntax: import * as name from " module "; JavaScript creates a module namespace object . This is an immutable object that contains all the exported bindings from that module.

import * as
name
 from "
module
";

JavaScript creates a module namespace object .

This is an immutable object that contains all the exported bindings from that module.

Example

// math_module.js export const PI = 3.14159; export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
  return a * b;
}

Module Namespace Support

Module namespace support refers to the mechanism that allows you to import all exports from a module into a single namespace object .

The Module Namespace feature is a part of the ES Modules introduced in ECMAScript 2015 to help organize and access modules in a consistent way.

Module Namespace Features

FeatureDescription
NamespaceA special object containing all exports from a module
Syntaximport * as name from module
PurposeOrganize, access, and reference module exports safely
Read OnlyYou can access exports but not reassign them
Live BindingIf an exported value changes in the module, the namespace reflects that change automatically
EnumerableIts properties are enumerable and correspond to named exports
PrototypeThe namespace is a plain object with no prototype (Object.getPrototypeOf(math) === null).

Related Syntax

import { add } from "./math_module.js";
import math from "./math_module.js";
import * as math from "./math_module.js";

Module Namespace Export

Module namespace export refers to exporting an entire imported module namespace object from another module.

Namespace Export

Normally, you import all of a module's exports into a module namespace object like this:

Example

import * as math from "./math_module.js";
let myPi = math.PI;
let result = math.add(2, 3);

With module namespace exports, you can re-export that entire namespace from your own module - without having to import it first:

utilities.js

export * from "./math_module.js";
import * as math from "./utilities.js";

The syntax export * as name from "module" was added in ECMAScript 2020 .

Syntax Overview

SyntaxResult
export * from "module"Re-export all named exports individually (not as a namespace)
export * as name from "module"Re-export all exports grouped under a single namespace
export { name } from "module"Re-export specific exports

Aggregator Scripts

An aggregator script is a script used only to import and re-export items from other modules.

Instead of filling your top module with many import statements, you can use a single aggregator script to do it all.

Previous

JavaScript Modules Import

Next

JavaScript Dynamic Modules