Skip to main content

JavaScript Modules

JavaScript modules are a way of organizing and sharing code between different files in a more efficient and modular way.

In the past, JavaScript relied on global variables and functions to share code, which could lead to naming conflicts and other issues.

How to create Module​

To create a module in JavaScript, you can use the export keyword to make certain functions or variables available to other modules, and the import keyword to import functions or variables from other modules.

As an example:

// module.js
const PI = 3.14;

function calculateArea(radius) {
  return PI * radius * radius;
}

export {PI, calculateArea};

In this example:

  • We define a module called module.js that exports two functions, PI and calculateArea.
  • The PI variable is a constant that is not meant to be changed, and the calculateArea function uses PI to calculate the area of a circle.

The import keyword​

To use this module in another file, we can import the functions we need using the import keyword:

// main.js
import {PI, calculateArea} from "./module.js";

const radius = 5;
const area = calculateArea(radius);

console.log(`The area of a circle with radius ${radius} is ${area}.`);
console.log(`The value of PI is ${PI}.`);

In this example:

  • We import the PI and calculateArea functions from the module.js file using the import keyword.
  • Then we use them to calculate the area of a circle with a radius of 5.
  • We also log the value of PI to the console.

Why Use Modules​

Here are some reasons why you might want to use modules in your JavaScript code:

Encapsulation​

Modules allow you to encapsulate your code within a self-contained unit, which can help prevent naming conflicts and other issues.

Organization​

Modules make it easier to organize your code into logical units, which can make it easier to read, understand, and maintain.

Reusability​

Modules make it easier to reuse code between different parts of your application, which can save time and reduce the amount of code you need to write.

Performance​

Modules can improve performance by allowing you to load only the code you need, rather than loading everything at once.

Collaboration​

Modules can make it easier to collaborate with other developers by providing clear interfaces for interacting with your code.

Testing​

Modules make it easier to test your code in isolation, which can help ensure that your code is reliable and predictable.