What is a module?

Learn what the ES module system provides and file scope.

What is a module?

A module is a JavaScript file with its own scope. The ES module system lets you export values from one file and use them in another with import.

In the browser you load a module by writing type="module" on the script tag. This makes the file follow module rules.

Modules help you split code into reusable pieces and keep files tidy in larger projects.

File scope

Each module file has its own scope. A variable declared at the top level of a module is not added to the window object; other files cannot see it.

This differs from old-style script files, where top-level variables become global and may clash. Modules remove this problem.

To use a value in another module you must explicitly export it.

Exercise Module loading tag

Write a <script> tag that loads app.js as a module. The type attribute is module and the src attribute is app.js.

Show example solution

Use type and src attributes in the same script tag.
Example solution:
<script type="module" src="app.js"></script>

Test yourself

Which attribute enables ES modules?
- type="module"
- type="es"
- type="import"
- type="mod"
Show answer

type="module" — Correct! type="module" loads a script as a module.

Complete the script tag

<script type="____" src="app.js"></script>

Show answer

<script type="module" src="app.js"></script>

Match the concepts

module

file with own scope
file scope

each file separate
type='module'

enables module mode
global scope

shared by all scripts

Next lesson: Named export

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies