JavaScript Modules

In the previous lesson, we learned how to give function parameters fallback values. Now let’s step back and look at how to organize larger projects by splitting code across multiple files using modules.

📦 What is a Module?

A module is simply a JavaScript file that holds part of your code. Instead of writing everything in one huge file, you break the code into smaller files, and each file is a module that focuses on one job.

Each module can share its code with other modules. One file exports the pieces it wants to make available, and another file imports them. We will cover that export and import syntax in depth in the next lesson, so here we focus on the idea behind modules and why they matter.

Here we split a tiny program across two files and let one use the other:

// math.js — a module that does math
export function add(a, b) {
  return a + b;
}

// app.js — a module that uses the math module
import { add } from "./math.js";

console.log(add(2, 3)); // 5

Let’s walk through what each file does:

• export function add(a, b) in math.js defines the add function and marks it with export, which makes it available to other files.
• import { add } from "./math.js" in app.js pulls that exact function in from the math.js file.
• console.log(add(2, 3)) then calls the imported function and prints 5, even though add was written in a different file.

🤔 Why Modules Exist

As a project grows, putting all your code in one file becomes hard to read and hard to change. Modules let you keep each part of the project in its own file, so the code stays organized and easy to find.

🔒 Each Module Has Its Own Scope

Inside a module, the variables and functions you create are private to that file. They do not leak out into other files or into the page, which means two modules can use the same variable name without any conflict.

Here two separate files each declare a variable with the very same name:

const name = "Alex";

// product.js
const name = "Laptop"; // ✅ no conflict — this name belongs only to product.js

Let’s see why these two lines never clash:

• const name = "Alex" lives inside user.js, so that name belongs only to user.js.
• const name = "Laptop" lives inside product.js, so that name belongs only to product.js.
• Because each module keeps its own scope, the two name variables stay completely separate and neither overwrites the other.

This is different from old scripts, where every variable lived in one shared global space and could overwrite another. With modules, the only things shared are the ones you choose to export.

🌐 Turning On Modules in the Browser

To use a file as a module in the browser, you add type="module" to the script tag. This tells the browser to treat the file as a module and allows it to use import and export.

This single script tag is what switches a file into module mode:

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

Let’s break down this tag:

• src="app.js" points the browser at the file we want to load.
• type="module" tells the browser to run that file as a module instead of an ordinary script.
• With that attribute in place, app.js is now allowed to use import and export.

Without type="module", the browser treats the file as an ordinary script, and import or export will cause an error.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ A module is a single file that holds part of your code
• ✅ Modules keep large projects organized and let you reuse code
• ✅ Each module has its own scope, so variable names never collide
• ✅ You add type="module" to the script tag to enable modules in the browser
• ✅ Modules need a local server, not a file:// path

🚀 What’s Next?

Now that you understand why modules exist, we will learn the exact syntax for sharing code between files. Let’s continue to Import and Export.