Javascript modules

In the early days of javascript, before introducing modules, Developers faced several critical organisation problems

Monolithic files: Developers often wrote thousands of lines in a single file, make code unreadable and nearly impossible to navigate
Redundancy: Reusing logic required manual copy-pasting across different files, leading to ‘code rot’ where bugs has to be fixed in multiple places
Global Scope pollution: All variables lived in the global namespace, causing frequent naming conflicts and silent overwrites
Dependency Fragility: Without formal imports, maintaining the correct loading order of multiple

Why modules are needed

Modules in JS are crusial for organising code in to smaller reusable pieces, which make large applications more scalable and maintainable.
They provide a system to export functions and values from one file and import into another file, avoiding global scope pollution. This leads to better code structure
Modules address several challenges in javascript development, particularly for large projects
- Code organisation
- Preventing naming conflits
- Reusability
- Maintainability
- Dependency management
- Performance

There is a keyword called export and it is used to make variables, functions, classes, or objects available into other modules

You can export multiple items by name

// utils.js
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}

Each module can have one default export, which is often module's primary functionality

// utils.js
export default function divide(a, b) {
  return a / b;
}

The import statement is used to access the exported components from another module

import { PI, multiply } from "./utils.js"

Importing Default Exports: You can give the default export any name you like when importing it

import divide from './utils.js';

Combining Imports: Its possible to import a default export and named imports in a single statement

import divide, { PI, multiply } from './utils.js';

Feature	Named Imports	Default Exports
Quantity	Can have multiple named exports per module	Can only have one default export for module
Import name	Must use the exact name as exported	Can be renamed during the import leading to potential inconsistency,
Tracing	Easier to trace references in a large codebase due to consistant naming	Tracing can be slightly harder due to arbitrary naming upon import
Usage intent	Good for exporting many utilities or supplementary values	Clearly indicates the module’s primary function or a component

The primary benefit of modular code is the creation of clean, efficient and resilient code base that is easier to work with, especially in team environment or on complex projects
It enhances productivity by allowing developers to focus on individual pieces of logic without worrying about side effects in unrelated parts of the application, ultimately building scalable applications