JavaScript Modules
What are Modules?
Modules arecode blocks that canexport and/orimport functions and values.
export function add(a, b) {
return a + b;
}
import { add } from './math.js';
let result = add(2, 3);
Modules let you to break up code intoseparate files.
Modules is a fundamental feature inmodern JavaScript.
Module Files
A JavaScript module isusually a file, but it can also bean HTML script.
A module file is a .js file using import / export.
A module script is an HTML script using import / export.
How to Use Modules
Mudules useexport andimport to interchange functionalities between modules.
An HTML script usingtype="module" is treated as a module:
Module File "math.js:
export function add(a, b) {
return a + b;
}
Module Script:
// Import the add function
import { add } from './math.js';
let result = add(2, 3);
</script>
Note
Module files must bestored on a server.
Modules only work with theHTTP(s) protocol.
A web-page opened via the file:// protocol cannot use import / export.
Module File "person.js"
export const name = "Jesse";
export const age = 40;
Module Script
// Import name and age
import { name, age } from "./person.js";
</script>
Modules Can Export
- Variables
- Functions
- Objects
- Classes
Module File "message.js"
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Module Script:
import message from "./message.js";
</script>
Note
Modules operate instrict mode by default.
Why Modules?
Modules helporganizing code.
Modules let you break down large codebases into small self-contained files, each focused on a specific task.Modules are essential for large and complex applications.
Modulesprevent naming conflicts.
Before modules, developers had only the global scope, which can lead to "namespace pollution"where unrelated code can accidentally overwrite other global variables.Modules has a private scope. Variables and functions are not exposed globally,unless explicitly exported.
Modules havebetter readability
Modules improves code organization, making it easier to navigate, understand, and manage,especially in larger projects or team environments.
Modules areeasily reused across different parts of an application and in entirely new projects.
Modules promote reusability by enabling the export of functions, variables, or objects from onefile and their import into other files or projects. This eliminates redundant code and fostersa more efficient development process.
A module can be easily reused across different parts of a project or in entirely new projects.This promotes the "Don't Repeat Yourself" (DRY) principle, reducing code duplication and saving time.
Modules areeasier to maintain and debug.
By dividing code into distinct modules, modifications or bug fixes in one part of the applicationcan be isolated to a specific module, minimizing the impact on other parts of the system.this makes the codebase easier to maintain and scale as the project grows.
Modules allow multiple developers to work on different parts of the codebase simultaneouslywith less risk of conflicts. Clear module boundaries enhance communication and make it easierto add new features with minimal impact on existing code.
Modules havebetter encapsulation and isolation
Variables and functions defined within a module are private by default,only becoming accessible to other modules when explicitly exported.This enhances code isolation, reduces the risk of unintended side effects, and makes code easier to reason about.
Modules havebetter dependency management.
Modules use explicit import and export statements to manage dependencies.This makes it easier to understand the relationships between different partsof the application and to manage external libraries or components.
Modules are much more reliable than the older, manual process of ensuring scripts were loadedin the correct order.
