• JavaScript Video Tutorials

JavaScript - Modules

What is a Module?

A module in JavaScript is a single file containing a JavaScript code or script. Rather than adding the code for the whole application in a single file, we can break down the code and create separate files for the code having the same functionalities.

In short, the module contains the code to perform the specific task. It can contain variables, functions, classes, etc.

When the size of the application grows, number of lines in the code also grows. Even real-time applications contain millions of lines of code. Now, think about if developers have only a single file containing millions of lines of code. Are they able to manage it properly? The simple answer is no. Here, using the module comes into the picture.

Syntax

Users can follow the syntax below to export and import the modules.

export function func_name(parameters) {
// function code
}

import {func_name} from filename

In the above syntax, the export keyword is used to export the function from the module, and the import keyword is used to import the function from the module.

Example

Filename: mul.js

In the code below, we defined the 'mul()’ function in the 'mul.js' file, which takes two integers as a parameter and returns the multiplication of them. Also, we used the 'export' keyword before the 'function' keyword to export the function from the module.

//  exporting mul() function
export function mul(a, b) {
    return a * b;
}

Filename: test.html

<html>
   <body>
   <div> JavaScript - Modules </div>
   <div id = "output"> </div>
   <script type="module">
      import { mul } from './mul.js';
      document.getElementById('output').innerHTML = 
		"The multiplication of 2 and 3 is " + mul(2, 3);
   </script>
</body>
</html>

Output

JavaScript - Modules
The multiplication of 2 and 3 is 6

In the above code, we have imported the module in an HTML file. However, we can also import the module in another JavaScript file.

Export Multiple Objects from a Single Module

You can also export multiple variables, functions, etc., from a single module. Let's understand it via the example below.

Example

FileName: math.js

In the code below, we have exported the mul() and sum() functions. Also, we have exported the variable containing the value of PI. In short, we are exporting the multiple objects from the single module.

// exporting mul() function
export function mul(a, b) {
    return a * b;
}
// exporting sum() function
export function sum(a, b) {
    return a + b;
}
// export value of PI
export let PI = Math.PI;

FileName: test.html

In the code below, we import multiple objects from a single module and use them to perform the mathematical operations.

<html>
   <body>
   <div> Exporting Multiple Objects from a Single Module </div>
   <div id = "output"> </div>
   <script type="module">
      import { mul, sum, PI } from './math.js';
      document.getElementById('output').innerHTML = 
		"The multiplication of 2 and 3 is " + mul(2, 3 + 
      "<br> The addition of 2 and 3 is " + sum(2, 3) + 
      "<br> The value of PI is " + PI;
   </script>
</body>
</html>

Output

Exporting Multiple Objects from a Single Module
The multiplication of 2 and 3 is 6
The addition of 2 and 3 is 5
The value of PI is 3.141592653589793

Default Exports

You can use the 'default' keyword to define the default export in the module. After that, whenever you try to import the object that is not defined in the module, it returns the object that is exported by default. The default export helps in avoiding the import error.

Syntax

Users can follow the syntax below to use the default exports in the module.

export default function func_name(params) {
// function body
}
import random_name from filename;

In the above syntax, the 'default' keyword is used after the export keyword to export the 'func_name' function by default.

Example

FileName: test.js

In the code below, we export the 'v1' variable by default, and we also export the 'v2' variable.

const v1 = "Version 1";
// default export
export default v1;
// other modules
export const v2 = "Version 2";

FileName: test.html

In the code below, we have imported the 'v3' and 'v2' from the test.js file. As 'v3' is not exported from the test.js file, it imports the default object, which is 'v1’.

<html>
<body>
   <div> Default Export </div>
   <div id = "output"> </div>
   <script type="module">
      // V3 is not defined in the module, so it returns V1.
      import v3, { v2 } from './test.js';

      document.getElementById('output').innerHTML = 
		"The value of v3 is : " + v3 + "<br>" +
      "The value of v2 is : " + v2;
   </script>
</body>
</html>

Output

Default Export
The value of v3 is : Version 1
"The value of v2 is : Version 2

Rename Import and Export

Sometimes, it happens that the code file and module file contain the same name of the object. In such cases, if the developer imports the module in the code file, it can raise conflicts and errors. To resolve this issue, we can change the name of the module either while exporting or importing.

Syntax to Rename Exports

Users can follow the syntax below to rename the exports.

export {
    func1 as N1,
    func2 as N2
};
// import in the code file
import { N1, N2 } from './module.js';

In the above syntax, we have changed the name of func1 to N1 and func2 to N2 at the time of exporting from the module. We used the 'as' keyword to change the name of the function.

Syntax to Rename Imports

Users can follow the syntax below to rename the imports.

export {
    func1,
    func2
};
// import in the code file
import { func1 as N1, func1 as N2 } from './module.js';

In the above syntax, we change the function name while importing it.

Advertisements