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
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 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. |
| Can be imported with any name. | Must be imported with exact names or use aliases. |
Let's look at some examples 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 main.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);
Hello, World!
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 main.js, we will import these named exports using 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));
console.log(subtract(5, 2));
5 3
Combining Default and Named Exports
A module can have both default and named exports. Here's how to use them together:
Filename - utils.js
// utils.js - both default and named exports
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return a / b;
}
// Default export
const calculator = {
name: "Basic Calculator",
version: "1.0"
};
export default calculator;
Filename - app.js
// app.js - importing both types
import calculator, { multiply, divide } from './utils.js';
console.log(calculator.name);
console.log(multiply(4, 3));
console.log(divide(10, 2));
Basic Calculator 12 5
Import Aliases
You can rename imports using aliases to avoid naming conflicts:
import { add as sum, subtract as minus } from './module.js';
console.log(sum(5, 3)); // 8
console.log(minus(5, 3)); // 2
Conclusion
Default exports are ideal for modules with a single primary export, while named exports allow multiple exports from one module. Understanding both approaches helps create modular, maintainable JavaScript applications with better code organization.
1K+ Views
