JavaScript Modules

In this tutorial, you will learn about modules in JavaScript with the assistance of examples.

What is a module?

JavaScript has had modules for quite a while. In any case, they were actualized by means of libraries, not built into the language. ES6 is the first time that JavaScript has built-in modules.

A module is only a file. One script is one module. As straightforward as that.

Modules can load each other and use special directives export and import to interchange functionality, call functions of one module from another:

• export catchphrase labels variables and functions that ought to be open from outside the current module.
• import allow the import of functionality from different modules.

---

As our program grows bigger, it might contain numerous lines of code. Rather than placing everything in a single file, you can use modules to separate codes in separate files according to their functionality This makes our code coordinated and simpler to keep up.

The module is a file that contains code to play out a particular errand. A module may contain variables, functions, classes, and so on. Let’s see an example,

Assume, a file named greet.js contains the accompanying code:

// exporting a function
export function greetPerson(name) {
    return `Hello ${name}`;
}

Now, to use the code of greet.js in another file, you can use the following code:

// importing greetPerson from greet.js file
import { greetPerson } from './greet.js';

// using greetPerson() defined in greet.js
let displayName = greetPerson('Salman');

console.log(displayName); // Hello Salman

Here,

The greetPerson() function in the greet.js is exported using the export keyword

export function greetPerson(name) {
    ... 
}

At that point, we imported greetPerson() in another file using the import catchphrase. To import functions, objects, and so on, you need to wrap them over { }.

import { greet } from '/.greet.js';

Note: You can just access exported functions, objects, and so on from the module. You need to use the export watchword for the specific function, objects, and so forth to import them and use them in different files.

---

Export Multiple Objects

It is additionally conceivable to export various objects from a module. For instance,

In the file module.js

// exporting the variable
export const name = 'JavaScript Program';

// exporting the function
export function sum(x, y) {
    return x + y;
}

In main file,

import { name, sum } from './module.js';

console.log(name);
let add = sum(4, 9);
console.log(add); // 13

Here,

import { name, sum } from './module.js';

This imports both the name variable and the sum() function from the module.js file.

---

Renaming imports and exports

In the event that the objects (variables, functions, and so forth) that you need to import are now present in your primary file, the program may not carry on as you need. For this situation, the program takes an incentive from the primary file rather than the imported file.

To try not to name clashes, you can rename these functions, objects, and so on during the export or during the import.

1. Rename in the module (export file)

// renaming import inside module.js
export {
    function1 as newName1,
    function2 as newName2
};

// when you want to use the module
// import in the main file
import { newName1, newName2 } from './module.js';

Here, while exporting the function from module.js file, new names (here, newName1 and newName2 ) are given to the function. Thus, when importing that function, the new name is used to reference that function.

---

2. Rename in the import file

// inside module.js
export {
    function1,
    function2
};

// when you want to use the module
// import in the required file with different name

import { function1 as newName1, function2 as newName2 } from './module.js';

Here, while importing in the function, the new names (here, newName1 and newName2 ) are used for the function name. Presently you use the new names to reference these functions.

---

Default Export

You can also perform default export of the module. For example,

In the file greet.js:

// default export
export default function greet(name) {
    return `Hello ${name}`;
}

export const age = 23;

Then when importing, you can use:

import random_name from './greet.js';

While performing default export,

• random_name is imported from greet.js. Since random_name isn’t in greet.js, the default export (greet() for this situation) is traded as random_name.
• You can straightforwardly use the default export without enclosing curly brackets {}.

Note: A file can contain numerous exports. Nonetheless, you can just have one default export in a file.

---

Modules Always use Strict Mode

By default, modules are in strict mode. For example,

// in greet.js
function greet() {
    // strict by default
}

export greet();

---

Advantage of Using Module

• The code base is simpler to keep up on the grounds that distinctive code having various functionalities are in various files.
• Makes code reusable. You can characterize a module and use it various occasions according to your requirements.

---

The use of import/export may not be supported in some browsers. To learn more, visit JavaScript import/export Support.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Exceptions and Modules