JavaScript Modules 101: import & export Without Confusion

As JavaScript project grows managing code become more important than just writing it.

Modules provide a simple way to organize, reuse and maintain code efficiently.

In this blog we will cover :

• Why modules are needed


• Exporting functions or values


• Importing modules


• Default vs named exports


• Benefits of modular code

Modules

Before modules JavaScript don't have a proper way to organize code. Everything lived in global scope which often caused conflicts and messy code.

Developers used tricks like global variables or IFFE to manage this.

// Global variable (problem: can be overwritten)



var count = 0;

function increment() {

  count++;

}

// IIFE (used to avoid global pollution)



(function(){

var count = 0 



function increment(){

 count++

console.log(count())



increment()

})()

But these were just workarounds, not a real solution.

Here comes the modules

A module is simply a separate piece of code with its own scope. It helps to keep the code organized , reusable and avoid conflicts that used to happen with global variable.

JavaScript supports various modules system. Here we only focus on the two most important types

Types of modules

1. ES6 Modules

ES6 modules (ECMA Script 6) it is a native module in this you can group and only share what's needed using import and export keywords.

Exporting a Module

To create a module you define the code you want to expose using the export keyword.

You can export individually or entire module object

 export const PI = 3.14 

 export function add(a , b){

        return a + b

 }

You can also export multiple things as a group:

const MULTIPLY = 'multiply';

const SUBTRACT = 'subtract';



export { MULTIPLY, SUBTRACT };

Importing a Module

To use the exported functionalities in another file, you use the import keyword. Here’s how you can import both named and default exports:

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



// Default export

import myFunction from './myFunction.js';

1. CommonJS Modules

Before ES6 modules, JavaScript (especially in Node.js) used CommonJS to manage code between files. Instead of import and export, it used require to bring code in and module.exports to send code out.

Exporting with CommonJS

const PI = 3.14;

function add(a, b) {

    return a + b;

}



module.exports = { PI, add };

Importing with CommonJS

const math = require('./math.js');

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

Default Modules

Modern JavaScript lets you load files only when you actually need them using dynamic imports.

Instead of loading everything at once, you can load parts later making your app faster and lighter, especially in big projects.

// math.js (module)

export default function add(a, b) {

  return a + b;

}

// app.js (using it)

import add from './math.js';



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

Default vs named exports

Benefits of modular code

1. Better Organization

Modules keep your code clean and structured, so it’s easier to read and manage as your project grows.

1. Reusability

You can reuse modules anywhere in your app (or even in other projects), saving time and effort.

1. No Naming Conflicts

Each module has its own scope, so same variable names won’t clash with each other.

1. Easy Testing

Smaller modules are easier to test individually, which makes your code more reliable.

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠