ES Modules — import & export

1. Introduction

ES Modules (ESM) is the official, standardized module system for JavaScript. It manages modules using the import and export keywords, enabling static analysis and native module loading directly in web browsers.

2. Why It Matters

ES Modules are parsed statically before code execution. This design allows bundlers to perform optimizations like Tree Shaking (removing unused code) and allows browsers to load modules in parallel, improving performance.

3. Real-World Analogy

Think of a Customs Declaration System:

• CommonJS (Packed trunk): You bring a sealed shipping crate into a country. Customs must open and scan the entire crate (run the module code) to find what is inside before they can approve it.
• ES Modules (Declared cargo manifesto): You attach a clear cargo manifest list showing exactly what is exported and imported (static declarations) to the outside of the container. Customs reads the manifest and routes the container immediately, without needing to open it first (enabling static analysis and optimization).

4. ES Modules Syntax

Unlike CommonJS, ES Modules use explicit export statements to share functions, classes, or values:

5. ES Modules in the Browser

To run ES Modules natively in web browsers, load script tags using the type="module" attribute:

Characteristics of script modules in browsers:
• Strict Mode: Script modules automatically run in strict mode (no need to specify "use strict").
• CORS Requirements: Modules are loaded using CORS, requiring server responses to include correct headers.
• Deferred Load: Script modules are deferred by default, loading in parallel and executing only after the DOM has finished parsing.

6. Practical Example

This script demonstrates importing all exports from a module into a namespace object:

7. Common Mistakes

• Omitting file extensions in relative imports: Modern bundlers (like Webpack) resolve files without extensions automatically, but native browser modules and Node.js ESM require relative imports to specify file extensions explicitly: import { add } from './math.js'.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

<!-- HTML -->
<script type="module">
  // Objective: import calculation helpers
  import { add } from './math'; // throws error! Why?
</script>

import { add } from './math.js'; // Specifies extension

11. Interview Questions

12. Production Considerations

• • CORS Headers: When serving ES Modules natively in production, configure the hosting server to include correct CORS headers (like Access-Control-Allow-Origin). Browsers fetch modules using CORS, and missing headers will cause module loads to fail.