JavaScript Modules:

Organizing code is exactly like organizing a big, traditional Indian wedding. If you try to make one person handle catering, DJ, panditji , and flower decorations all at once, you get absolute chaos—a khichdi. But if you assign different responsibilities to different persons, everything runs smoothly.

In JavaScript, this concept of distributing specific tasks to separate, organized files is called Modularity. Lets dive into how imports and exports work in modern JavaScript.

Why Modules are needed

The Problem

Before we talk about modules, we need to understand the problem they solve. In early days of web, developers used to write thousands of lines of code in a single app.js file. Which created many problems like variable name clashes, finding a bug was difficult, and the code has no reusability.

How Modules solved this Problem

A module is simply a JavaScript file that contains code for a specific purpose. Instead of one massive file, we break our code into smaller, independent files.

How does this improve your code?

1. Maintainability: If the login button breaks, you only need to check the auth.js file, not the entire application.

2. Reusability: Write your code once, and pull it into any other file or project.

3. Encapsulation: Variables and functions inside a module stay inside that module unless you explicitly share them. No more accidental name clashes!

How to Share : Export

Think of export as packing a tiffin box to share with your neighbors. By default, everything inside a JavaScript file is private. If you want another file to be able to use a function or a variable, you have to export it.

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

Named Exports

Use named exports when you have multiple things in a file that you want to share. You have to use their exact names when importing them later.

// utilities.js
export const calculateGST = (amount) => amount * 0.18;

export function printWelcomeMessage(name) {
  return `Welcome, ${name}! Grab some chai.`;
}

export const shopName = "Sharma Ji Sweets";

Default Exports

Use a default export when a file has one main job. A module can only have one default export.

// UserProfile.js
class UserProfile {
  constructor(name) {
    this.name = name;
  }
  display() {
    console.log(`Displaying profile for ${this.name}`);
  }
}

export default UserProfile;

How to Receive : Import

If exporting is packing the dabba, import is receiving it and opening it up.

Importing Named Exports

When importing named exports, you use curly braces {}. It is like picking specific dishes from a buffet. You only take what you need, and the names must match exactly

// app.js
import { calculateGST, shopName } from './utilities.js';

let billAmount = 1000;
let tax = calculateGST(billAmount);

console.log(`Thank you for visiting \({shopName}. Your tax is ₹\){tax}.`);

Importing Default Exports

Because there is only one default export per file, you don't need curly braces. You can even rename it whatever you want when you import it (though it's best practice to keep the name sensible).

// app.js
import UserProfile from './UserProfile.js'; 
// You could also do: import ProfileMaker from './UserProfile.js';

const newUser = new UserProfile("Rahul");
newUser.display();

Mixing Both

Sometimes a file has a main default export and some extra named exports. You can import them together like this:

import React, { useState, useEffect } from 'react';

Folder Structure flow Diagram

---

Summary: Rules to Remember

• One file = One module. Keep them focused on a single task.

• Use Named Exports (export const...) for utility files with lots of helper functions. (Import with { }).

• Use Default Exports (export default...) for files that contain a major component, class, or one main function. (Import without { }).

• Remember to add .js at the end of your file paths when working with standard vanilla JavaScript in the browser.

By organizing your code with imports and exports, your projects will scale beautifully.

Thanks for reading