1. Introduction

This tutorial aims to provide a comprehensive guide on working with JavaScript modules. By the end of this tutorial, you'll have a good understanding of how to create, import, and export modules in JavaScript. This will help you keep your code clean, organized, and easy to manage.

What you'll learn:
- What are JavaScript modules
- How to create a module
- How to import a module
- How to export a module

Prerequisites:
- Basic knowledge of JavaScript
- Familiarity with ES6 syntax

2. Step-by-Step Guide

What are JavaScript Modules?

In JavaScript, a module is a file containing code that performs a specific task. Modules help in breaking down large programs into small manageable and organized files. Furthermore, modules provide reusability of code.

Creating a Module

To create a module, simply create a new .js file and write your JavaScript code in it. For example, let's create a module named math.js which performs basic mathematical operations:

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

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

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

function divide(a, b) {
    if(b != 0){
        return a / b;
    }else{
        return 'Error: Division by zero is not allowed.';
    }
}

Exporting a Module

To use functions or variables in other modules, they need to be exported using export keyword.

Let's export the functions in our math.js module:

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

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

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

export function divide(a, b) {
    if(b != 0){
        return a / b;
    }else{
        return 'Error: Division by zero is not allowed.';
    }
}

Importing a Module

To use an exported module, it needs to be imported using import keyword.

Let's create another file app.js and import our math.js module into it:

// app.js
import { add, subtract, multiply, divide } from './math.js';

console.log(add(5, 3));       // Output: 8
console.log(subtract(5, 3));  // Output: 2
console.log(multiply(5, 3));  // Output: 15
console.log(divide(5, 3));    // Output: 1.6666666666666667

3. Code Examples

Example 1: Exporting and Importing a Single Function

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

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

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

In the above example, we are exporting and importing a single function add.

Example 2: Exporting and Importing Multiple Functions

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

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

// app.js
import { add, subtract } from './math.js';

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

In the above example, we are exporting and importing multiple functions add and subtract.

Example 3: Exporting and Importing an Entire Module

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

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

export { add, subtract };

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

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

In the above example, we are exporting an entire module and importing it using the * operator.

4. Summary

In this tutorial, we learned how to create, export, and import modules in JavaScript. We now know that modules help in breaking down large programs into small, manageable, and organized files, and they offer reusability of code.

5. Practice Exercises

Exercise 1:
Create a module stringOperations.js that exports three functions: concatenate (joins two strings), firstChar (returns the first character of a string), and toUpperCase (converts a string to uppercase). Import and use this module in another file app.js.

Exercise 2:
Modify the stringOperations.js module to export an object with the three functions as methods. Import and use this module in app.js.

Exercise 3:
Create a module arrayOperations.js that exports three functions: sum (adds all the numbers in an array), max (returns the maximum number in an array), and min (returns the minimum number in an array). Import and use this module in app.js to perform operations on an array of numbers.

Enjoy practicing and remember, consistency is the key to mastering JavaScript modules!