REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

JavaScript Modules

AI & DATA SCIENCE // modules

ES Modules (ESM) are the standard module system. Modules have their own scope, run in strict mode, and are cached after first load.

Syntax

<script type="module" src="app.js"></script>
// In app.js
import './setup.js'; // runs once and is cached

Deep Dive Course

ES Modules are file-based. Each module has its **own scope** — no global variables leak between modules. They run in **strict mode** automatically. Modules are **cached**: importing the same module twice returns the same instance. Circular dependencies are supported but require careful design.

1Understanding JavaScript Modules

ES Modules are file-based. Each module has its own scope — no global variables leak between modules. They run in strict mode automatically. Modules are cached: importing the same module twice returns the same instance. Circular dependencies are supported but require careful design.

💡

Modules are deferred by default in browsers — they don't block HTML parsing. You don't need the 'defer' attribute on module scripts.

editor.html

// Module scope isolation
// moduleA.js
const secret = 'not global';  // NOT accessible outside
export const publicValue = 42;

// main.js
import { publicValue } from './moduleA.js';
console.log(publicValue);  // 42
// console.log(secret);    // ReferenceError

localhost:3000

2Practical Example

Here is a real-world application of JavaScript Modules showing how it is used in production JavaScript code.

editor.html

// Dynamic import (lazy loading)
async function loadAnalytics() {
  if (userHasConsented) {
    // Only imported when needed!
    const { trackEvent } = await import('./analytics.js');
    trackEvent('page_view');
  }
}

localhost:3000

3Best Practices

Follow these guidelines when working with JavaScript Modules:

1. Use .js extension in import paths for compatibility

2. Avoid circular dependencies — they often indicate a design issue

3. Use type: module in Node.js package.json for ESM support

⚠️

Tip: Modules are deferred by default in browsers — they don't block HTML parsing. You don't need the 'defer' attribute on module scripts.

editor.html

// Module scope isolation
// moduleA.js
const secret = 'not global';  // NOT accessible outside
export const publicValue = 42;

// main.js
import { publicValue } from './moduleA.js';
console.log(publicValue);  // 42
// console.log(secret);    // ReferenceError

localhost:3000

Examples

Example 01Basic Usage

// Module scope isolation
// moduleA.js
const secret = 'not global';  // NOT accessible outside
export const publicValue = 42;

// main.js
import { publicValue } from './moduleA.js';
console.log(publicValue);  // 42
// console.log(secret);    // ReferenceError

Example 02Advanced Example

// Dynamic import (lazy loading)
async function loadAnalytics() {
  if (userHasConsented) {
    // Only imported when needed!
    const { trackEvent } = await import('./analytics.js');
    trackEvent('page_view');
  }
}

Best Practices

Use .js extension in import paths for compatibility
Avoid circular dependencies — they often indicate a design issue
Use type: module in Node.js package.json for ESM support

Interview Question

What is dynamic import and when do you use it?▼

Hint: Lazy loading for performance.

import() (dynamic) is a function-like syntax that returns a Promise with the module. Unlike static imports (which are hoisted and always loaded), dynamic imports load the module on demand. This enables code splitting and lazy loading — don't load code until the user actually needs it, reducing initial bundle size.

Exercises

MediumPractice using JavaScript Modules in a real scenario.

View Solution

// Module scope isolation
// moduleA.js
const secret = 'not global';  // NOT accessible outside
export const publicValue = 42;

// main.js
import { publicValue } from './moduleA.js';
console.log(publicValue);  // 42
// console.log(secret);    // ReferenceError

Frequently Asked Questions

What is dynamic import and when do you use it?▼

Related Functions

Import-ExportExport-by-DefaultExport-Named