Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Exports & Imports in JavaScript
We will learn how to utilise imports and exports in javascript in this post, as well as how to use them to break our code into different modules in order to better organise it.
To facilitate modular development in programming, which enables us to organise our code into reusable modules, JavaScript provides exports and imports. To achieve this sharing and reusability of code, we can use different types of exports and imports.
Exports allow us to make functions, variables, objects, or any values available outside of a module. By marking components as exports, we can expose them for use in other parts of our application codebase.
Imports are used to bring exported components from other modules into the current module. They allow us to access and use code functionalities defined in external modules.
Let’s look at some of the examples to understand the concept better −
Example 1 - Using named exports and import
In this example, to import named exports from a module, we will −
use the import keyword followed by the names of the components we want to import.
import the add and subtract functions, as well as the PI constant, from the module.js module, and using them in the main.js module.
Filename - index.html
<html> <head> <title>Exports & Imports in JavaScript</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Exports & Imports in JavaScript</h1> </body> </html>
Filename - main.js
// main.js module
import { add, subtract, PI } from './module.js';
console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6
console.log(PI); // Output: 3.14159
FIlename - module.js
// module.js module
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export const PI = 3.14159
Output
The result will like the image below.
Example 2 - Using default exports and import
In this example, to import the default export from a module, we will −
use the import keyword followed by a name of our choice to assign the default export to.
import the default export from the module.js module and assign it the name sayHello. We will then use the imported function within the main.js module.
Filename - index.html
<html> <head> <title>Exports & Imports in JavaScript</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Exports & Imports in JavaScript</h1> </body> </html>
Filename - main.js
// main.js module
import sayHello from './module.js';
sayHello("John"); // Output: Hello, John!
Filename - module.js
// module.js module
export default function sayHello(name) {
console.log("Hello, " + name + "!");
}
Output
The result will like the image below.
Conclusion
Exports and imports are important features in JavaScript that allow modular development and code encapsulation, thereby promoting code reusability and maintainability. Named exports to allow the selective exposure of multiple components, while the default export simplifies the usage of a primary component. We learned how to do exports and imports in javascript using different methods and saw some examples explaining the same.
196 Views
