ES6 Modules

1What are ES6 Modules?✨

ES6 Modules are a way to organize and structure your JavaScript code by splitting it into separate files. This makes your code easier to manage and reusable across different parts of your application.

2Why Use Modules?🎯

• ✓ Keeps your code organized and clean
• ✓ Allows for better collaboration on larger projects
• ✓ Makes it easier to reuse code
• ✓ Enhances maintainability by isolating functionality

3Creating a Module💡

To create a module, you simply need to export functions, objects, or values from one file and import them into another. Here’s how you can do it:

In a file named `math.js`, you can export a function like this:

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

4Then, in another file, you can import and use this function:🚀

import { add } from './math.js';

console.log(add(5, 3)); // Outputs: 8

5Importing Modules🔍

You can import entire modules or specific parts of them. Here’s how to import everything from a module:

import * as math from './math.js';

console.log(math.add(5, 3)); // Outputs: 8

6Using Default Exports⭐

You can also export a single value as the default export. Here’s an example:

7In `greeting.js`:🧩

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

8And in your main file:🎈

import greet from './greeting.js';

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

9What You'll Build This Grade✨

• ✓ Modular applications for better organization
• ✓ Interactive web pages using multiple files
• ✓ Reusable components for larger projects
• ✓ Improved collaboration with peers on coding tasks