When you want to export a single function, class, object, variable, array, or any other stuff, use default export. You can import the default exported component with any name. JavaScript provides two ways of using default exports:
export default at the beginning of the component that you want to export as the default export.Note: To learn about named exports, visit How to export modules in JavaScript?
//template.js file
export default function add(a, b){
return a+b;
}
var msg = 'Hello, World!';
let arr = [21, 5, 69];
class Rectangle{
constructor(length, width){
this.length = length;
this.width = width;
}
area(){
return this.length*this.width;
}
}
let person = {
firstName: 'Mohit',
lastName: 'Natani'
}
In the above code, add() function is exported as a default export. Instead of exporting like this, you can use a list.
//template.js file
function add(a, b){
return a+b;
}
var msg = 'Hello, World!';
let arr = [21, 5, 69];
class Rectangle{
constructor(length, width){
this.length = length;
this.width = width;
}
area(){
return this.length*this.width;
}
}
let person = {
firstName: 'Mohit',
lastName: 'Natani'
}
export {add as default};
Note: You can only export one thing as a default. You cannot export multiple items as the default exports.
To import the default exported component, all you have to do is use the import statement and import it with any name you want.
//app.js file
import sum from './template';
console.log(`Sum of 2 and 3 is ${sum(2, 3)}`);
Output
Sum of 2 and 3 is 5
Here, add() function is imported with a name sum.
With the help of a list, you can use named and default exports at the same time. Let's create a module that export add() function as a default export. person object and Rectangle class are exported as named exports.
//template.js file
function add(a, b){
return a+b;
}
var msg = 'Hello, World!';
let arr = [21, 5, 69];
class Rectangle{
constructor(length, width){
this.length = length;
this.width = width;
}
area(){
return this.length*this.width;
}
}
let person = {
firstName: 'Mohit',
lastName: 'Natani'
}
export {person, add as default, Rectangle as Rect};
Here, Rectangle class is exported as Rect.
It is essential to understand that there is no specific order that you have to follow while using named and default exports together. You can have default export first and then named exports; you can have named exports first and then default export or have default export between named exports. You can adopt any order you want.
JavaScript provides two different ways of importing named and default exports. You can import named and default exports separately.
//app.js file
import sum from './template';
import {person, Rect} from './template';
console.log(`Sum of 5 and 10 is ${sum(5, 10)}`);
console.log(`Full Name: ${person.firstName} ${person.lastName}`);
let rect = new Rect(15, 10);
console.log(`Area of rectangle: ${rect.area()}`);
Output
Sum of 5 and 10 is 15 Full Name: Mohit Natani Area of rectangle: 150
In the above code, add() function, a default export in template.js file, is imported as sum.
On the other hand, you can have default and named imports in a single statement.
//app.js file
import sum, {person, Rect} from './template';
console.log(`Sum of 5 and 10 is ${sum(5, 10)}`);
console.log(`Full Name: ${person.firstName} ${person.lastName}`);
let rect = new Rect(15, 10);
console.log(`Area of rectangle: ${rect.area()}`);
There is another way of using them in a single statement.
//app.js file
import {default as sum, person, Rect} from './template';
console.log(`Sum of 5 and 10 is ${sum(5, 10)}`);
console.log(`Full Name: ${person.firstName} ${person.lastName}`);
let rect = new Rect(15, 10);
console.log(`Area of rectangle: ${rect.area()}`);
