ES Modules (import/export)

Named & Default Exports

// module.js
export function add(a, b) {
  return a + b;
}
export const PI = 3.14;
export default "Default Export";

// main.js
import { add, PI } from "./module.js"; // Named import
import anyName from "./module.js"; // Default import

console.log(add(2, 3)); // 5
console.log(PI); // 3.14
console.log(anyName); // "Default Export"

Namespace Import

import * as math from "./module.js";

console.log(math.add(2, 3)); // 5
console.log(math.PI); // 3.14
console.log(math.default); // "Default Export"

Dynamic Imports

if (someCondition) {
  const module = await import("./module.js");
  console.log(module.add(2, 3)); // 5
}

If module.js exports a default function:

if (someCondition) {
  const module = await import("./module.js");
  console.log(module.default(2, 3)); // Call the default export
}

Module Loading & Execution Order

Default Behavior of <script type="module">

• Behaves like defer by default: does not block HTML parsing and executes after HTML is fully parsed.

Execution Order

• Multiple module scripts execute in order of appearance in HTML, like defer scripts.
• Imported modules load in parallel but execute in dependency order.

<script type="module" src="a.js"></script>
<script type="module" src="b.js"></script>

• a.js executes first, followed by b.js, even if b.js loads faster.

// main.js
import './a.js';
import './b.js';
console.log('main.js'); 

• a.js and b.js load in parallel.
• a.js executes first, then b.js, and finally main.js.