JavaScript Essentials - Modules

Introduction to JavaScript modules

JavaScript modules allow you to organize and reuse your code by splitting it into separate files and functions. This tutorial covers the basics of JavaScript modules, including how to create and import/export modules using ES6 syntax.

Creating a Module

To create a module, you can use the export keyword to export variables, functions, or classes from a JavaScript file. Here is an example:

// math.js

export const PI = 3.14;

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

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

Importing a Module

To import a module, you can use the import keyword followed by the exported variables, functions, or classes you want to import. Here is an example:

// main.js

import { PI, add, Calculator } from './math.js';

console.log('PI:', PI); // Output: PI: 3.14
console.log('Add:', add(2, 3)); // Output: Add: 5

const calculator = new Calculator();
console.log('Multiply:', calculator.multiply(4, 5)); // Output: Multiply: 20
                

Default Exports

You can use the export default keyword to export a single default value from a module. Here is an example:

// utils.js

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

To import a default export, you can use the import keyword followed by any name you choose. Here is an example:

// main.js

import greet from './utils.js';

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

Named Exports

You can use named exports to export multiple values from a module. Here is an example:

// constants.js

export const MAX_USERS = 100;
export const MIN_AGE = 18;
                

To import named exports, you can use the import keyword followed by the names of the exports you want to import. Here is an example:

// main.js

import { MAX_USERS, MIN_AGE } from './constants.js';

console.log('Max Users:', MAX_USERS); // Output: Max Users: 100
console.log('Min Age:', MIN_AGE); // Output: Min Age: 18
                

Re-exporting Modules

You can re-export modules to consolidate multiple modules into a single module. Here is an example:

// math.js

export const PI = 3.14;

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

// utils.js

export { PI, add } from './math.js';

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

// main.js

import { PI, add, greet } from './utils.js';

console.log('PI:', PI); // Output: PI: 3.14
console.log('Add:', add(2, 3)); // Output: Add: 5
console.log(greet('Alice')); // Output: Hello, Alice!
                

Dynamic Imports

You can use dynamic imports to load modules conditionally or on-demand. Here is an example:

// main.js

if (condition) {
    import('./module.js').then(module => {
        module.doSomething();
    });
}
                

Summary

In this tutorial, you learned about JavaScript modules, including how to create and import/export modules using ES6 syntax. You explored default exports, named exports, re-exporting modules, and dynamic imports. Understanding modules is essential for writing clean, maintainable, and modular JavaScript code.