JavaScript Modules

1. What are JavaScript Modules?

As your application grows, keeping all code in a single file becomes unmanageable. Modules allow you to break up your code into separate files. This makes it easier to maintain the code-base, reuse logic, and keep the global namespace clean.

ES6 Modules (also known as ECMAScript Modules or ESM) are the official standard format to package JavaScript code for reuse.

2. Named Exports

You can export multiple values (functions, variables, classes) from a module using named exports. You must use the exact same name when importing them.

In-line Export

// file: math.js
export const PI = 3.14159;

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

Export All at Once

// file: user.js
const name = "Ragini";
const age = 25;

export { name, age };
        

3. Default Exports

You can have only one default export per file. This is useful for modules that export a single class or a main function. You can name it whatever you want when importing.

// file: message.js
const message = () => {
    const name = "Jesse";
    const age = 40;
    return name + ' is ' + age + ' years old.';
};

export default message;
        

4. Importing Modules

You import modules into a file using the import keyword.

Importing Named Exports

Named exports must be destructured using curly braces {}.

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

console.log(PI);
console.log(add(5, 10));
        

Importing Default Exports

Default exports do not use curly braces.

import message from "./message.js";

console.log(message());
        

Importing Everything (Namespace)

You can import all exported values as an object.

import * as MathUtils from "./math.js";

console.log(MathUtils.PI);
console.log(MathUtils.add(2, 3));
        

5. Comparison Table: Module vs Non-Module

Feature	Modules	Non-Modules (Scripts)
Scope	File Scoped (Variables are private by default)	Global Scoped (Variables can pollute window)
Strict Mode	Always enabled ("use strict")	Optional
Loading	Deferred by default (doesn't block HTML)	Blocks HTML parsing unless defer is used
Execution	Executed only once	Executed every time included