21 Modules

Module is a self-contained unit of code that encapsulates related functions, variables, classes, or objects.

• It allows you to organize and separate the code into reusable and maintainable units.
• Usually modules are code blocks written in a file.
• Modules have their own scope, meaning the variables and functions defined within a module are not accessible outside unless explicitly exported.
• Conversely, other modules can import and use the exported elements from a module.
• JavaScript modules are supported natively in modern browsers and in Node.js, starting from version 12.
• The ES6 module syntax introduced the import and export statements, which are used to import and export elements between modules.
• The import and export statements are used to control the module system
• To make variables, functions, or classes available to other modules, you can use the export keyword.

1. Basic Example

Keep the below code into two separate files and run the main.js

// module.js
export const PI = 3.14159;

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

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

console.log(PI); // Output: 3.14159
console.log(calculateArea(5)); // Output: 78.53975

2. Default Export:

• We can export a single element as the default export.
• Only one default export is allowed per module.

// module.js
export default function add(a, b) {
  return a + b;
}

// main.js
import customAdd from './module.js';

console.log(customAdd(2, 3)); // Output: 5

3. Named Export:

You can export multiple elements using named exports. Each named export needs to be explicitly defined.

• To import named exports, we need to use the exact names used during export:

// module.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from "./module.js";

console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3

4. Renaming Exports:

We can also rename named exports during import using the as keyword.

• This can be useful to avoid naming conflicts or provide more descriptive names.
• To import the named export with a different name, we can use the as keyword

// module.js
export function multiply(a, b) {
  return a * b;
}

// main.js
import { multiply as product } from './module.js';

console.log(product(2, 3)); // Output: 6

5. Importing All Exports

You can import all exports from a module using the * character. This is known as a namespace import.

• To import all exports, you can use the * as

// module.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`);
}

// main.js
import * as utils from './module.js';

utils.greet('John'); // Output: Hello, John!
utils.sayGoodbye('John'); // Output: Goodbye, John!

6. Debugging

If we encounter the error SyntaxError: Cannot use import statement outside a module

• That means it's not supporting ES6 module systems.
• Go to package.json and add "type":"module",
• Or while running the file add experimental option node --experimental-modules calculate.js
• Or don't use the import/export

//module.js
exports.PI = 3.14159;

exports.calculateArea = function(radius) {
  return exports.PI * radius * radius;
};

//main.js
const { PI, calculateArea } = require('./module.js');

console.log(PI); // Output: 3.14159
console.log(calculateArea(5)); // Output: 78.53975