JavaScript Modules: Import and Export Explained

In the software industry, maintaining and organizing code is a challenging task. It is very important to manage code properly because it improves readability, enhances structure, and makes debugging easier.

However, if we write a large amount of code in a single file, it becomes very difficult to maintain, read, and detect bugs. That’s why we use modules in JavaScript.

What is a module in java script :

A module is a self-contained independent file that performs a specific task.

It has its own private scope.

How to Manage Code Efficiently in JavaScript

JavaScript modules allow us to break our code into smaller, manageable files, making it easier to organize and maintain. Each file contains a specific functionality that can be imported and exported anywhere in the application.

How to use modules in JavaScript :

named export statement : It available your module and in any part of your application.

You just need to import that module.

You can export multiple things from a file using named export statement .

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

export const PI = 3.14;

import statement : It is used to import a module in any part of your code.

You can import multiple things from a file .

import add from './math.js';

You imported add function from math.js file.

default export statement : You can export only one thing from a file.

// greet.js 
export default function greet()
 { 
    console.log("Hello bhai!"); 
 }

import greet from "./greet.js";
greet();

Don't use {} in default export.

You can change name while importing.

import sayHello from "./greet.js";

export at bottom : you can export from bottom. Works same as named export.

function add(a, b) { return a + b; }

const PI = 3.14;

export { add, PI };

(Named + Default) :

export const PI = 3.14;

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

import add, { PI } from "./math.js";

Key Benefits of Using Modules :

Encapsulation : Modules have their own private scope preventing variables from leaking

in global scope causing naming conflicts.

Code Reusability : Modules properly follows DRY Principle (Don't repeat yourself).You can share your module in any part of your project and use it many times as you need it.

Dependency Management : It shows that which part of code is rely on which module by using explicit import and export statements.

Performance : Modern module systems ((like ES Modules) use the concept of tree shaking and remove unused code from bundle.

What is bundle and tree shaking :

Bundle :You write you code in multiple files but browser don't like this because more files more processing. So browser combine all your code in single file called bundle.

Tree shaking :Tree shaking is a process that removes unused code from bundle.

Code Example :

// you declare three functions
export function add() {} 
export function subtract() {} 
export function multiply() {}

//But use only one
import { add } from "./math.js";

Tree shaking will keep add function and remove subtract and multiply.

Conclusion :

In this blog, we learned how to write manageable and organized code in JavaScript using modules. We also explored how to use modules effectively with practical examples.

Additionally, we discussed the benefits of modular code and how it improves performance internally.