---
title: "What are modules in JavaScript and how do you use them?"  
description: "What are modules in JavaScript and how do you use them?"  
author: "Sandra Emily"  
published: 2024-06-18  
updated: 2024-06-19  
canonical: https://www.mindstick.com/forum/160762/what-are-modules-in-javascript-and-how-do-you-use-them  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 4 minutes  

---

# What are modules in JavaScript and how do you use them?

What are modules in JavaScript and how do you use them?

## Replies

### Reply by Ravi Vishwakarma

[Modules in JavaScript](https://www.freecodecamp.org/news/javascript-modules-explained-with-examples/) are used to encapsulate code into **reusable**, **disconnected pieces**, making the code more **maintainable**, **testable**, and **manageable**. Modules allow you to **export functions, objects, or values** from one **module** so they can be imported and used in other modules.

This concept is essential for organizing large codebases and is supported by both the **ES6 (ECMAScript 2015)** module syntax and earlier module systems like **CommonJS**.

###

#### ES6 Modules

The ES6 module system, also known as ECMAScript modules (ESM), is the standard way to work with modules in modern JavaScript. It uses the `import` and `export` keywords.

## Example: Creating and Using ES6 Modules

**math.js** (Module file)

```javascript
// Exporting individual features
export const pi = 3.14159; // Exporting a constant named 'pi' with value 3.14159

export function add(x, y) {
  return x + y; // Exporting a function named 'add' that returns the sum of two parameters
}

// Exporting a default feature
export default function multiply(x, y) {
  return x * y; // Exporting a default function named 'multiply' that returns the product of two parameters
}

```

**main.js** (Importing and using the module)

```javascript
// Importing named exports
import { pi, add } from './math.js';

// Importing the default export
import multiply from './math.js';

console.log(`Pi is ${pi}`); // Pi is 3.14159
console.log(`2 + 3 = ${add(2, 3)}`); // 2 + 3 = 5
console.log(`2 * 3 = ${multiply(2, 3)}`); // 2 * 3 = 6
```

## Key Features of ES6 Modules

- **Strict Mode**: Modules are always executed in **strict mode**.
- **Single Instance**: Each module is evaluated only once and the result is cached.
- **Top-Level** `this`: The value of `this` at the top level of a module is `undefined`.
- **Static Structure**: Imports and exports are statically analyzable, meaning you can determine the structure of a module at compile time.

#### CommonJS Modules

CommonJS is a module system used primarily in Node.js. It uses `require` to import modules and `module.exports` to export them.

## Example: Creating and Using CommonJS Modules

**math.js** (Module file)

```javascript
// Define a constant 'pi'
const pi = 3.14159;

// Define a function 'add' that takes two parameters and returns their sum
function add(x, y) {
  return x + y;
}

// Define a function 'multiply' that takes two parameters and returns their product
function multiply(x, y) {
  return x * y;
}

// Export the constants and functions as an object using module.exports
module.exports = {
  pi,
  add,
  multiply
};

```

**main.js** (Importing and using the module)

```javascript
const math = require('./math.js');

console.log(`Pi is ${math.pi}`); // Pi is 3.14159
console.log(`2 + 3 = ${math.add(2, 3)}`); // 2 + 3 = 5
console.log(`2 * 3 = ${math.multiply(2, 3)}`); // 2 * 3 = 6
```

## Key Features of CommonJS Modules

- **Synchronous Loading**: Modules are loaded **synchronously**.
- **Single Instance**: Each module is evaluated only once and the result is cached.
- **Dynamic Module Loading**: Modules can be loaded dynamically at runtime.

#### Differences Between ES6 and CommonJS Modules

- **Syntax**: ES6 modules use `import` and `export`, while CommonJS uses `require` and `module.exports`.
- **Loading**: ES6 modules are loaded asynchronously, while CommonJS modules are loaded synchronously.
- **Environment**: ES6 modules are the standard for modern JavaScript environments, whereas CommonJS is primarily used in Node.js.

#### Note

- **Modules**: Encapsulate code into reusable pieces.
- **ES6 Modules**: Use `import` and `export`, supported in modern JavaScript environments.
- **CommonJS Modules**: Use `require` and `module.exports`, primarily used in Node.js.
- **Differences**: Syntactic and behavioral differences, such as loading mechanisms and environment compatibility.
- **Browser Usage**: Use the `type="module"` attribute in `<script>` tags for ES6 modules.


---

Original Source: https://www.mindstick.com/forum/160762/what-are-modules-in-javascript-and-how-do-you-use-them

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.