Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Default exports vs Named exports in JavaScript
In this article, we will learn the difference between default exports and named exports in javascript, and how we can use them to effectively organize our code structure.
In javascript, we can use default exports and named exports so as to have separate files or modules for separate pieces of code. This helps in enhancing code readability and tree shaking to a great extent.
Default exports |
Named exports |
|---|---|
A default export allows us to export a single value or function as the default export of a module. |
A named export allows us to export multiple values or functions from a module. |
Only a single value will be available to use from a file that uses default export. |
We can use one or more than one values from a file that uses named exports |
Let's look at some of the examples and methods to understand the concept better ?
Example 1 - Using default exports
In this example, we will ?
create a module called module.js that exports a default value (message).
In script.js, we will import the default export using the import statement and assign it to the variable message. The value is then logged to the console.
Filename - index.html
<html> <head> <title>Default Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Default Export Example</h1> </body> </html>
Filename - module.js
// module.js const message = 'Hello, World!'; export default message;
Filename - main.js
// main.js import message from './module.js'; console.log(message); // Output: Hello, World!
Output
The result will like the image below.
Example 2 - Using named exports
In this example, we will ?
create a module called module.js that exports two named functions (add and subtract).
In script.js, we will import these named exports using the curly braces {} and call the functions accordingly.
Filename - index.html
<html> <head> <title>Named Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Named Export Example</h1> </body> </html>
Filename - module.js
// module.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
Filename - main.js
// main.js
import { add, subtract } from './module.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3
Output
The result will like the image below.
Conclusion
Default exports and named exports offer different approaches for exporting and importing values in JavaScript modules. Default exports are useful for providing a single primary export, while named exports allow us to export multiple values from a javascript module. These features allow us to introduce modular programming in our code, and enhance code readability and tree shaking to a great extent. We learned the difference between default exports and named exports in javascript using different methods and saw some examples explaining the same.
942 Views
