Chapter 7: Modules

Welcome back to "Mastering JavaScript"! In the previous chapter, we explored asynchronous programming using Promises and async/await. Now, let's dive into JavaScript modules, a powerful feature that helps you write cleaner, more organized, and maintainable code

7.1 Introduction to Modules

Modules are a way to split your code into separate files, each containing specific functionality. This modular approach makes your code more organized and easier to maintain. JavaScript modules allow you to export functions, objects, or variables from one file and import them into another.

7.2 Creating and Exporting Modules

To create a module, you simply need to write your code in a separate file and use the export keyword to make parts of it available to other files.

Example: mathUtils.js

// mathUtils.js

// Named export
export function add(a, b) {
    return a + b;
}

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

// Default export
const PI = 3.14159;
export default PI;

In this example, we have two named exports (add and subtract) and one default export (PI). Named exports allow you to export multiple values, while default exports export a single value per module.

7.3 Importing Modules

To use the exported functions or variables in another file, you use the import keyword.

Example: main.js

// main.js

// Import named exports
import { add, subtract } from './mathUtils.js';

// Import default export
import PI from './mathUtils.js';

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6
console.log(PI);             // Output: 3.14159

Notice how we import named exports inside curly braces ({}) and default exports without curly braces.

7.4 Practical Examples

Let's create a simple project that uses modules to calculate areas of different shapes.

Example: areaUtils.js

// areaUtils.js

// Named export
export function calculateCircleArea(radius) {
    return Math.PI * radius * radius;
}

// Named export
export function calculateRectangleArea(length, width) {
    return length * width;
}

Example: main.js

// main.js

import { calculateCircleArea, calculateRectangleArea } from './areaUtils.js';

let circleRadius = 5;
let rectangleLength = 10;
let rectangleWidth = 4;

console.log(`Area of circle: ${calculateCircleArea(circleRadius)}`);      // Output: Area of circle: 78.53981633974483
console.log(`Area of rectangle: ${calculateRectangleArea(rectangleLength, rectangleWidth)}`); // Output: Area of rectangle: 40

Here, we have two modules: areaUtils.js for calculating areas and main.js for using these calculations. This separation of concerns makes the code more modular and easier to manage.

In this chapter, we explored JavaScript modules, a feature that helps you write cleaner, more organized, and maintainable code. By breaking your code into separate modules, you can manage complexity and collaborate more effectively on larger projects.

To summarize:

• Use the export keyword to make parts of your code available to other files.

• Use the import keyword to use exported values in another file.

• Named exports allow you to export multiple values, while default exports export a single value per module.

In the next chapter, we'll dive into error handling in JavaScript, an essential skill for building robust applications.

Happy coding!