What are modules and why are they useful?

TL;DR

Modules provide file-level scope and explicit dependencies for sharing code without adding globals. In JavaScript ES modules, use import and export statements to share values between files.

// myModule.js
export const myFunction = () => {
  console.log('Hello, World!');
};

// main.js
import { myFunction } from './myModule.js';
myFunction(); // Outputs: Hello, World!

Definition of modules

Modules are self-contained units of code that encapsulate functionality and can be imported and exported between different parts of an application. They allow developers to break down complex applications into smaller, manageable pieces.

Benefits of using modules

Code organization

Modules help in organizing code by grouping related functionalities together. This makes the codebase easier to navigate and understand.

Maintainability

By breaking down the code into smaller modules, it becomes easier to maintain and update. Changes in one module are less likely to affect other parts of the application.

Reusability

Modules can be reused across different parts of an application or even in different projects. This reduces code duplication and promotes the DRY (Don't Repeat Yourself) principle.

Avoiding global namespace pollution

Modules help in avoiding global namespace pollution by encapsulating variables and functions within their own scope. This reduces the risk of naming conflicts and makes the code more robust.

Dependency management

Modules make it easier to manage dependencies between different parts of an application. You can explicitly declare what a module depends on and what it exports, making the code more predictable and easier to debug.

Working with modules in JavaScript

Exporting from a module

You can export variables, functions, or classes from a module using the export keyword.

// myModule.js
export const myVariable = 42;
export function myFunction() {
  console.log('Hello, World!');
}
export class MyClass {
  constructor() {
    console.log('MyClass instance created');
  }
}

Importing into a module

You can import variables, functions, or classes from another module using the import keyword.

// main.js
import { myVariable, myFunction, MyClass } from './myModule.js';

console.log(myVariable); // Outputs: 42
myFunction(); // Outputs: Hello, World!
const myClassInstance = new MyClass(); // Outputs: MyClass instance created

Default exports

A module can have a default export, which can be imported without using curly braces.

// myModule.js
const myDefaultFunction = () => {
  console.log('Default export function');
};
export default myDefaultFunction;

// main.js
import myDefaultFunction from './myModule.js';
myDefaultFunction(); // Outputs: Default export function

Exercises

Beta