JavaScript Modules

What are JavaScript Modules?

JavaScript modules are a way to organize and structure code into separate, reusable files. They allow developers to encapsulate functions, variables, or classes in distinct files and make them accessible to other parts of the program through export and import statements. This practice helps maintain clean, modular code and prevents naming conflicts. Modules are useful for keeping code manageable and for promoting reusability across applications.

Why Use JavaScript Modules?

JavaScript modules offer several benefits:

• Code Organization: Breaking code into smaller modules makes it easier to manage, especially in large projects.
• Collaboration: Different developers can work on separate modules without interfering with one another's work.
• Reusability: Once a module is created, it can be reused in different parts of the project or in future projects.
• Ease of Maintenance: Changes to individual modules won’t affect the entire codebase, making updates smoother.

Basics of JavaScript Modules

To use JavaScript modules, you need to:

1. Create separate files for different functionalities.
2. Use export to share code and import to bring in code from other modules.
3. Ensure that modules don’t pollute the global scope, keeping the codebase clean.

Module Files and File Extensions

When working with Node.js or browser environments, it is important to include file extensions in module paths. For example:

import { myFunction } from './module.js';


This ensures that Node.js or the browser can correctly locate and load the file.

Separating Code into Modules

To organize code, split it into different files based on their functionality. Use meaningful names like utils.js for utility functions. Then, export the relevant parts:

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

In another file, you can import the function:

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


This keeps each module self-contained and prevents variable conflicts across files.

Export Statements

The export keyword allows you to share code across modules. For example:

export const myVariable = 10;
export function myFunction() {
  return myVariable;
}

You can also use default exports for single values:‍


export default function() {
  return 'Default Export';
}

Importing Code into a Module

To use code from other modules, use the import statement. You can import specific items:

import { myFunction } from './module.js';


Or the entire module:

import * as Utils from './utils.js';


For default exports, you don’t need curly braces:

import myDefaultFunction from './module.js';


Dynamic Import

With dynamic imports, you can load modules at runtime using the import() syntax. This is useful for optimizing performance by loading code only when needed:

const module = await import('./module.js');


Default Exports vs. Named Exports

• Default exports: A module can have only one default export, and it doesn’t require a specific name when importing.
• Named exports: Multiple named exports are allowed, and they require exact names when imported.‍


// Named exports
export const x = 10;
export function sayHello() {
  return 'Hello';
}

// Default export
export default function() {
  return 'Default Export';
}

The import Keyword

Use import to bring in code from other modules:

import { sayHello } from './module.js';


You can also rename imports to avoid naming conflicts:

import { sayHello as greet } from './module.js';