Techie BabajiLearn to Code. Build Real Skills.
JavaScript · Advanced

ES Modules

Modules let you split code into small files that each do one job, and import exactly what you need.

Intermediate 5 min Lesson 38 of 49
Before you start:Functions
0/49 in JavaScript
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Export values from a module
  • Import named and default exports
  • Load modules in the browser with type="module"
  • Understand module scope

Explanation#

export makes a function, variable or class available to other files. import brings it in.

Named exports (export function add) are imported by exact name in braces. A module can have one default export, imported with any name.

In the browser use <script type="module" src="main.js">. Modules are deferred and in strict mode automatically.

Each module has its own scope — top-level variables are not global — which prevents naming clashes.

Code example: Splitting code into files#

JavaScriptmain.js Illustrative
// math.js
export const PI = 3.14159;
export function area(r) { return PI * r * r; }
export default function round2(n) { return Math.round(n * 100) / 100; }


// main.js
import round2, { area, PI } from './math.js';
import * as math from './math.js';


console.log(round2(area(2)));     // 12.57
console.log(PI === math.PI);      // true


<!-- index.html -->
<script type="module" src="main.js"></script>
Expected output
12.57
true

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. math.js exports two named values and one default function.
  2. main.js imports the default (any name) and the named exports (exact names).
  3. import * as math collects every export into one object.
  4. type="module" tells the browser to treat the file as a module.

Real-world use case#

Every modern project — React, Vue, Node.js apps — is organised as hundreds of small modules.

Common mistakes#

Opening module pages from file://

Browsers block modules on file:// URLs. Use a local dev server (Vite, VS Code Live Server).

Missing file extensions in the browser

import './math' fails in browsers without a bundler. Write './math.js'.

Best practices#

  • Prefer named exports for clarity and tooling
  • One main responsibility per module
  • Use relative paths with extensions in plain browser code
  • Let a bundler (Vite) handle production builds

Remember this#

export = share it; import = use it.

Named → { exactName }. Default → anyName.

Modules have their own scope and are always strict.

Practice exercise#

Your task: Create greet.js exporting a named function hello(name), and import it in app.js to log hello("Asha").

Show solution
JavaScript Illustrative
// greet.js
export function hello(name) { return `Hello, ${name}!`; }


// app.js
import { hello } from './greet.js';
console.log(hello('Asha'));

Mini quiz#

ES Modules quizMultiple choice Question 1 of 1

How many default exports can a module have?

Score so far: 0/0

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.