Lesson 69 - Introduction to JavaScript Modules

JavaScript modules allow you to break up your code into separate files, making it easier to manage and reuse. Modules are a key feature of modern JavaScript, helping developers organize their code better.

Why Use Modules?

• Maintainability: Easier to read and manage code.
• Reusability: Code can be shared between different files.
• Encapsulation: Prevents global scope pollution.

Creating a Module

A JavaScript module is simply a file that exports functions, objects, or variables.

Example: Creating a module

Let's create a simple module that exports a function:

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

export function multiply(a, b) {
    return a * b;
}

Importing a Module

To use the functions from a module in another file, we use the import statement.

// main.js
import { add, multiply } from './mathUtils.js';

console.log(add(2, 3)); // Output: 5
console.log(multiply(4, 5)); // Output: 20

Default Exports vs Named Exports

There are two types of exports in JavaScript modules:

1. Named Exports - Used when exporting multiple values.
2. Default Exports - Used when exporting a single value.

Example of Default Export:

// greet.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

Importing a Default Export:

// main.js
import greet from './greet.js';

console.log(greet('Alice')); // Output: Hello, Alice!

Summary

• JavaScript modules help structure and manage code better.
• Use export to define reusable functions or variables.
• Use import to bring those functions or variables into another file.
• Named exports allow multiple exports, while default exports allow a single main export.

Try Your Hand

1. Create a module calculator.js with functions for subtraction and division.
2. Import the module into a new file and call the functions.