JavaScript Modules: Import and Export Explained

When you first start writing JavaScript, it is very common to put all of your code into one single file, usually called something like app.js or index.js.

This works fine when your project is small. But as your website grows, that single file gets longer and longer. Soon, you might have 2,000 lines of code! Trying to find a specific function in a file that big is like trying to find a needle in a haystack. It becomes very messy and hard to fix if something breaks.

To solve this problem, JavaScript gives us Modules. Today, we are going to learn what they are and how to use them in plain English.

What Are Modules and Why Do We Need Them?

Imagine reading a book that has no pages and no chapters. It is just one giant, endless scroll of paper. That would be terrible, right? Books use chapters to organize information so it is easy to read.

In JavaScript, modules are just chapters for your code. A module is simply a separate JavaScript file. Instead of one giant app.js file, you can split your code into smaller files, like math.js for your math functions and user.js for your user profiles.

Diagram: File Dependency

(Smaller, organized files)        (Your main file)
   [ math.js ] ----------------\
                                \
   [ user.js ] ----------------->  [ app.js ]
                                /
   [ weather.js ] -------------/

Your main file just collects the pieces it needs from the smaller files!

To make these files talk to each other, we use two very important keywords: export and import.

1. Exporting: Sharing Your Code

If you create a variable or a function inside math.js, your app.js file cannot see it. By default, files are completely private. If you want another file to be able to use your code, you have to export it. It is like giving the code a passport so it can travel.

There are two main ways to export code: Named Exports and Default Exports.

Named Exports

Use this when you have multiple things in a file that you want to share. You just put the word export in front of them.

// Inside math.js

export const pi = 3.14;

export function addNumbers(a, b) {
  return a + b;
}

Default Exports

Use this when your file really only has one main thing to share. A file can only have one default export.

// Inside user.js

function createNewUser(name) {
  return "Welcome, " + name;
}

// We share it at the bottom using 'export default'
export default createNewUser;

2. Importing: Bringing Code In

Now that our smaller files are sharing their code, we need to bring that code into our main app.js file. We do this using the import keyword.

How you import depends entirely on how you exported it!

Importing Named Exports

When you import a named export, you must use curly braces { }, and you must use the exact same name.

// Inside app.js

// We ask for the exact names wrapped in curly braces
import { pi, addNumbers } from './math.js';

console.log(pi); // Output: 3.14
console.log(addNumbers(5, 10)); // Output: 15

Importing Default Exports

When you import a default export, you do not use curly braces. Because it is the only default thing coming from that file, you can actually name it whatever you want!

// Inside app.js

// No curly braces! 
import createNewUser from './user.js';

console.log(createNewUser("Sarah")); // Output: Welcome, Sarah

Diagram: Module Import/Export Flow

[ File A: The Sender ]                       [ File B: The Receiver ]

export const age = 25;       ----------->    import { age } from './fileA.js';
export default function()    ----------->    import myFunc from './fileA.js';

Default vs. Named Exports: A Quick Cheat Sheet

It is easy to mix these up when you are a beginner. Here is a quick guide:

• Named Exports:

  • Good for utility files that have many small functions (like math tools).

  • Requires curly braces { } when importing.

  • You must use the exact name.

• Default Exports:

  • Good for files that do one big job (like a main User component).

  • No curly braces when importing.

  • You can name it whatever you want when you import it.

The Benefits of Modular Code

Why should you go through the trouble of creating all these files?

1. Easier to Read: A file with 50 lines of code is much less scary than a file with 2,000 lines of code.

2. Easier to Fix Bugs: If the math is broken on your website, you don't have to search your entire app. You know exactly where to look: math.js.

3. Code Reuse: If you build a great weather.js module for one project, you can easily copy that exact file and drop it into a brand new project!

Conclusion

Modules are just a way to keep your code clean and organized. By using export to send code out, and import to bring code in, you can build massive, complex websites by snapping together small, simple files like Lego bricks.