-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
JavaScript modules are a way to organize and reuse code by splitting it into separate files. Modules help developers encapsulate functionality, avoid polluting the global scope, and maintain clean and maintainable code.
Before ES6, JavaScript had no built-in module system. Developers relied on immediately invoked function expressions (IIFEs) or libraries like CommonJS and AMD. ES6 introduced native modules with import
and export
, which are now widely supported in modern browsers and Node.js.
A module is any JavaScript file that exports variables, functions, or classes so that other modules can import and use them.
Exporting: Make code available to other files.
Importing: Use code from another module.
Modules help in code reuse, separation of concerns, and maintainability.
There are two types of exports: named exports and default exports.
Named exports allow multiple items to be exported from a module.
// mathUtils.js
export const pi = 3.14159;
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
Each exported item must be imported with the same name.
A module can have one default export, which can be imported with any name:
// calculator.js
export default class Calculator {
add(a, b) {
return a + b;
}
}
Default exports are useful when a module exports a single main functionality.
Use curly braces {}
to import named exports:
// app.js
import { pi, add } from './mathUtils.js';
console.log(pi); // 3.14159
console.log(add(5, 10)); // 15
The imported names must match the exported names.
Default exports can be imported with any name:
// app.js
import Calculator from './calculator.js';
const calc = new Calculator();
console.log(calc.add(5, 10)); // 15
You can also combine default and named imports from a single module:
import Calculator, { pi, multiply } from './calculator.js';
Sometimes you want to rename imports to avoid conflicts:
import { add as sum } from './mathUtils.js';
console.log(sum(5, 10)); // 15
Similarly, exports can be renamed:
const subtract = (a, b) => a - b;
export { subtract as minus };
ES2020 introduced dynamic imports using the import()
function, which returns a promise.
async function loadModule() {
const module = await import('./mathUtils.js');
console.log(module.add(5, 10)); // 15
}
loadModule();
Dynamic imports are useful for lazy-loading modules, improving performance.
Modules have their own scope, meaning variables declared inside a module are not added to the global scope:
// myModule.js
const secret = "hidden"; // Not accessible outside
export const visible = "public";
Only exported items can be accessed outside the module.
This prevents global namespace pollution, a common problem in large applications.
You can re-export items from another module, making a central module for imports:
// utilities.js
export { add, multiply } from './mathUtils.js';
export { default as Calculator } from './calculator.js';
Consumers can import everything from utilities.js
without worrying about individual modules.
Use named exports when a module exports multiple functionalities.
Use default exports when a module has a single main feature.
Keep modules small and focused, following the single-responsibility principle.
Use dynamic imports for lazy loading large modules.
Organize modules in directories by feature to improve maintainability.
Avoid polluting the global scope; rely on module encapsulation.
Use consistent file extensions (.js
) and module paths.
Modules help in organizing JavaScript code into reusable, maintainable pieces.
Use export
to expose variables, functions, or classes.
Use import
to consume code from other modules.
Modules prevent global scope pollution and allow code separation.
Dynamic imports enable lazy-loading for performance.
Mastering modules is crucial for modern JavaScript development and framework usage.
Understanding JavaScript modules is key for scalable web development, as it promotes code reuse, maintainability, and performance optimization in real-world applications.
Basic Named Export and Import
Create a module mathUtils.js
that exports a function add(a, b)
and a constant pi
. Import them in another file and log their values.
Default Export
Create a module calculator.js
with a default exported class Calculator
that has an add()
method. Import it in another file and create an instance to use the method.
Combining Named and Default Imports
Export a default class Calculator
and a named function multiply
from the same module. Import both in another file and use them.
Renaming Imports
Export a function subtract
from a module and import it as minus
in another file. Call the function to verify it works.
Dynamic Import
Use import()
to dynamically load a module mathUtils.js
and call an exported function add()
asynchronously.
Module Scope
Create a variable in a module that is not exported, and another that is exported. Try accessing both from another file and observe which is accessible.
Re-exporting Modules
Create two modules mathUtils.js
and calculator.js
, then create a third module utilities.js
that re-exports everything. Import everything from utilities.js
in another file.
Multiple Named Exports
Export multiple functions (add
, multiply
, divide
) from a single module. Import them individually and log their outputs.
Default Export with Renaming
Export a default class Person
and import it with a different name in another file. Instantiate and use the class.
Organizing Modules
Create a folder structure with separate modules for math
and string
utilities. Import functions from both modules in a main file and use them together.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts