Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript Importing and Exporting Modules
JavaScript modules allow you to split code into separate files and share functionality between them using import and export statements. This promotes code reusability and better organization.
Note: To run module examples, you need a localhost server since modules use CORS policy.
Export Types
There are two main ways to export from a module:
- Default Export: One main export per module
- Named Export: Multiple exports with specific names
Default Export Example
math.js (module file):
// Default export - only one per module
export default function add(a, b) {
return a + b;
}
main.js (importing file):
// Import default export (can use any name) import calculate from './math.js'; console.log(calculate(5, 3)); // 8
Named Export Example
utils.js (module file):
// Named exports - multiple exports allowed
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return a / b;
}
export const PI = 3.14159;
main.js (importing file):
// Import specific named exports
import { multiply, divide, PI } from './utils.js';
console.log(multiply(4, 3)); // 12
console.log(divide(10, 2)); // 5
console.log(PI); // 3.14159
Complete Working Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Modules</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
margin: 10px 0;
padding: 10px;
background: #f0f0f0;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<h1>JavaScript Importing and Exporting Modules</h1>
<button class="default-btn">Import Default</button>
<button class="named-btn">Import Named</button>
<div class="result"></div>
<h3>Click buttons to import and use modules</h3>
<script src="main.js" type="module"></script>
</body>
</html>
calculator.js
// Default export
export default function greet(name) {
return `Hello, ${name}! Module imported successfully.`;
}
// Named exports
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
main.js
// Import both default and named exports
import greet, { add, multiply } from './calculator.js';
const resultDiv = document.querySelector('.result');
const defaultBtn = document.querySelector('.default-btn');
const namedBtn = document.querySelector('.named-btn');
defaultBtn.addEventListener('click', () => {
resultDiv.innerHTML = greet('User');
});
namedBtn.addEventListener('click', () => {
resultDiv.innerHTML = `
Addition: 5 + 3 = ${add(5, 3)}
Multiplication: 4 × 7 = ${multiply(4, 7)}
`;
});
Import Variations
| Import Type | Syntax | Use Case |
|---|---|---|
| Default Import | import myFunc from './module.js' |
Single main function/class |
| Named Import | import { func1, func2 } from './module.js' |
Multiple specific exports |
| Rename Import | import { func as myFunc } from './module.js' |
Avoid naming conflicts |
| Import All | import * as utils from './module.js' |
All exports as object |
Key Points
- Use
type="module"in script tags for module support - Module files must be served from a web server (not file://)
- Modules are automatically in strict mode
- Each module has its own scope
- Imports are hoisted and executed first
Conclusion
JavaScript modules provide a clean way to organize and share code across files. Use default exports for single main functionality and named exports when you need multiple specific functions or variables from a module.
Updated on: 2026-03-15T23:18:59+05:30
338 Views
Advertisements