JavaScript Modules Import Export: A Beginner’s Complete Guide

Introduction

If you have ever written a long JavaScript file and thought, “this is getting really messy,” you are not alone. Every beginner reaches a point where their code grows so large that it becomes hard to read, fix, or share with others. That is exactly where JavaScript modules come to the rescue. JavaScript modules allow you to split your code into separate files, each handling a specific task. You can then share pieces of code between those files using two simple keywords: export and import. Think of it like organizing your closet — instead of throwing everything into one giant pile, you put shirts in one drawer and pants in another. In this guide, you will learn what JavaScript modules are, how to export code from one file, and how to import it into another. By the end, you will feel confident using modules in your own projects.

What Are JavaScript Modules?

A JavaScript module is simply a JavaScript file that shares its code with other files. Before modules existed, developers had to load dozens of separate script tags in their HTML files, and variables from one script could accidentally overwrite variables in another. It was messy and error-prone. Modules solve this problem by creating a private scope for each file. Nothing inside a module is available to the outside world unless you deliberately export it.

Modules became an official part of JavaScript with ES6, also called ES2015, which was released in 2015. Today, all modern browsers support ES6 modules natively. When you use a module in an HTML file, you simply add type="module" to your script tag, like this: <script type="module" src="app.js"></script>. That small addition tells the browser to treat the file as a module. Modules are also the foundation of popular JavaScript tools like React, Vue, and Node.js, so learning them early will pay off in a big way as you grow as a developer.

There are two types of exports you need to know: named exports and default exports. We will cover both in detail so you have a solid understanding before writing any code.

How to Use Named Exports and Imports

Named exports let you export multiple values from a single file. You use the export keyword right before a function, variable, or class that you want to share. Here is a simple example. Imagine you have a file called mathHelpers.js:

// mathHelpers.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export const PI = 3.14159;

In this file, we are exporting two functions and one constant. Now, in another file called app.js, you can import exactly what you need using curly braces:

// app.js
import { add, subtract, PI } from './mathHelpers.js';

console.log(add(5, 3));       // 8
console.log(subtract(10, 4)); // 6
console.log(PI);              // 3.14159

The curly braces tell JavaScript which specific exports you want to bring in. The ./ before the file name means the file is in the same folder as your current file. You can also rename imports using the as keyword. For example, import { add as addition } from './mathHelpers.js' lets you call the function as addition() in your new file. This is handy when two different modules export something with the same name and you need to avoid conflicts. Named exports are great when a file has several useful pieces that other files might want to pick and choose from.

How to Use Default Exports and Imports

Default exports work a little differently from named exports. Each file can have only one default export. You use export default before the value you want to set as the main thing a file provides. Default exports are commonly used when a file is focused on delivering one main thing, like a single class or a primary function. Here is an example with a file called greet.js:

// greet.js
export default function greet(name) {
  return `Hello, ${name}! Welcome to JavaScript modules.`;
}

To import a default export, you do not use curly braces, and you can name it anything you like:

// app.js
import greet from './greet.js';

console.log(greet('Alex')); // Hello, Alex! Welcome to JavaScript modules.

Because there is only one default export per file, JavaScript knows exactly what you mean when you import without curly braces. You can even name the import something completely different, like import sayHello from './greet.js', and it will still work. You can also combine both named and default imports in a single import statement. For example: import greet, { add, PI } from './helpers.js'. This imports the default export as greet and the named exports add and PI at the same time. Understanding when to use default versus named exports comes with practice, but a good rule of thumb is to use default exports for the main purpose of a file and named exports for helper utilities.

Common Mistakes Beginners Make with Modules

Learning modules is straightforward, but there are a few common mistakes that trip up beginners. The first is forgetting to add type="module" to the script tag in your HTML file. Without it, your browser will not recognize the import and export syntax and will throw an error. Always double-check your script tag when modules are not working as expected.

The second common mistake is using incorrect file paths. When you write import { add } from 'mathHelpers.js' without the ./ at the beginning, the browser looks for a built-in module by that name rather than your local file. Always use ./ for files in the same directory, ../ for files one folder up, or a full path when needed.

Third, some beginners try to use modules in a local HTML file opened directly in the browser. Modules require a server environment due to security restrictions called CORS policies. If you open an HTML file by double-clicking it, you may see a CORS error. The easy fix is to use a simple local server. If you have Node.js installed, you can run npx serve in your project folder. Alternatively, the VS Code extension called Live Server works perfectly and is very beginner-friendly.

Finally, remember that modules always run in strict mode automatically. This means some older JavaScript habits, like using undeclared variables, will throw errors inside modules. That is actually a good thing because strict mode helps you write cleaner, more reliable code from the start.

Frequently Asked Questions

What is the difference between named exports and default exports in JavaScript?

Named exports allow a single file to export multiple values, and each one must be imported using its exact name inside curly braces. Default exports allow only one main export per file, and that export can be imported without curly braces using any name you choose. Use named exports when your file provides several utilities, and use default exports when your file is centered around one primary feature or class.

Can I use JavaScript modules in all browsers?

Yes, all modern browsers including Chrome, Firefox, Safari, and Edge support ES6 modules. However, older browsers like Internet Explorer do not support them. For most beginner projects targeting current users, you can use modules without worry. If you need to support older browsers, tools like Webpack or Babel can convert your module code into a format that older browsers understand.

Do I need Node.js to use JavaScript modules?

You do not need Node.js to use modules in the browser, but you do need to serve your files through a local server rather than opening them directly as files. Node.js does support modules as well, though it uses a slightly different setup. In a Node.js environment, you either use the .mjs file extension or add "type": "module" to your package.json file to enable ES6 module syntax.

Conclusion

JavaScript modules import export is one of the most valuable tools you can add to your beginner skill set. By splitting your code into organized, reusable files, you make your projects easier to read, easier to debug, and much easier to scale as they grow. You learned how named exports let you share multiple values from a single file, how default exports highlight the primary feature of a file, and how to avoid the most common mistakes beginners face when working with modules. The best way to truly learn this is to practice. Start a small project, create two or three JavaScript files, and experiment with exporting functions and importing them elsewhere. The more you use modules, the more natural they will feel. Soon you will wonder how you ever wrote JavaScript without them.