JavaScript's ES6 standard has provided a new way of exporting modules. It offers export keyword to export modules. With the help of export keyword, you can export classes, functions, variables, constants, arrays, objects, and others. The majority of the Front-End frameworks like React, Vue, Angular, etc., use the export keyword to export different components. However, Node.js uses CommonJS to export modules. If you are interested in learning how to export modules in Node.js, then visit Node.js export modules.
Note: You will find a commonality between CommonJS and ES6's export. And this is a source of confusion for beginners. If you are using Node.js, then follow the CommonJS way of exporting modules. And if you are working with React and other JavaScript frameworks, then use the ES6 form of exporting modules.
You will also come across two concepts around exporting modules: named exports and default exports. This tutorial explains named exports. To learn about default exports, visit How to use export default in JavaScript?
You can implement named exports in two ways:
You can export individual parts of the module just by writing export at the beginning of the statement. In this way, you will be able to export components individually. Let's create a module that will export class, function, object, variable, and array. The filename is template.js.
//template.js file
export function add(a, b){
return a+b;
}
export var msg = 'Hello, World!';
export let arr = [21, 5, 69];
export class Rectangle{
constructor(length, width){
this.length = length;
this.width = width;
}
area(){
return this.length*this.width;
}
}
export let person = {
firstName: 'Mohit',
lastName: 'Natani'
}
Instead of exporting individual components, you can create a list of exported members in one place using curly braces.
//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 {Rectangle, add as sum, msg, arr as ar, person};
In the above code, add() function is exported as sum, array arr is exported as ar, Rectangle class is exported as Rectangle, msg variable is exported as msg, and person object is exported as person. In this way, you can change the name of exported components.
Now, you will learn the two different ways of importing module in JavaScript.
//app.js file
import * as anyName from './template';
let rect = new anyName.Rectangle(10, 20);
console.log(`Area of rectangle: ${rect.area()}`);
console.log(`Array: ${anyName.ar}`);
console.log(`Variable: ${anyName.msg}`);
console.log(`Sum of 2 and 3 is ${anyName.sum(2, 3)}`);
console.log(`Full Name: ${anyName.person.firstName} ${anyName.person.lastName}`);
Note: You can use template.js instead of template. But since the filename has .js extension, there is no need to add .js at the end of the module name.
In this code, the entire module is imported and exported class, function, variable, object, and array are accessed using dot notation.
Output
Area of rectangle: 200 Array: 21,5,69 Variable: Hello, World! Sum of 2 and 3 is 5 Full Name: Mohit Natani
With the help of object destructuring, you can import a specific class, function, array, variable, object and others. Let's import function, array, class, and object. As you know that the template.js has exported add() function as sum. So, you have to use sum, not add. Similarly, array arr is exported as ar, so you have to import it as ar, not arr. Rest, you can import Rectangle class and person object as it is.
import {sum, person, ar, Rectangle} from './template';
let rect = new Rectangle(10, 20);
console.log(`Area of rectangle: ${rect.area()}`);
console.log(`Array: ${ar}`);
console.log(`Sum of 2 and 3 is ${sum(2, 3)}`);
console.log(`Full Name: ${person.firstName} ${person.lastName}`);
Output
Area of rectangle: 200 Array: 21,5,69 Sum of 2 and 3 is 5 Full Name: Mohit Natani
As msg variable is not imported, so you cannot use it in your code.
If you want, you can change the name of the imported function, class, object, etc. Suppose you want to change the name of Rectangle class to Rect and person object to employee, use the below method.
import {sum, person as employee, ar, Rectangle as Rect} from './template';
let rect = new Rect(10, 20);
console.log(`Area of rectangle: ${rect.area()}`);
console.log(`Array: ${ar}`);
console.log(`Sum of 2 and 3 is ${sum(2, 3)}`);
console.log(`Full Name: ${employee.firstName} ${employee.lastName}`);
In this way, you can change the name of any exported values.
