Topic 11918 min readStructured Tutorial

JavaScript Modules

Quick Answer

JavaScript modules allow developers to split code into reusable pieces by exporting and importing functionality between files. This modular approach improves code organization, maintainability, and reuse in modern JavaScript development.

Learning Objectives

Explain the purpose of Introduction to Modules in a practical learning context.
Identify the main ideas, terms, and decisions involved in Introduction to Modules.
Apply Introduction to Modules in a simple real-world scenario or practice task.

Introduction

JavaScript modules are a way to organize and reuse code by splitting it into separate files.

Modules help keep code clean, maintainable, and easier to understand by encapsulating functionality.

Modularity is the key to maintainable and scalable code.

What Are JavaScript Modules?

JavaScript modules allow you to break your code into smaller, reusable pieces.

Each module can export variables, functions, or classes that other modules can import and use.

Modules promote code reuse and separation of concerns.
They help avoid polluting the global namespace.
Modules are supported natively in modern browsers and Node.js.

Exporting and Importing

To share code from one module, you use the export statement.

To use exported code in another module, you use the import statement.

Named exports allow exporting multiple values by name.
Default exports allow exporting a single value as the default.
Imports must match the exported names or use aliases.

Named Exports

Named exports allow you to export multiple values by their names.

Use `export` before declarations or `export { name1, name2 }` syntax.
Import using curly braces with matching names.

Default Exports

Default exports allow exporting a single value as the default export of a module.

Use `export default` before a value or declaration.
Import without curly braces and can rename the import.

Benefits of Using Modules

Modules improve code organization and readability.

They help manage dependencies explicitly.

Modules enable better tooling support like tree shaking.

Avoid global scope pollution.
Easier to maintain and test code.
Facilitates collaboration in large projects.

Practical Example

This example shows how to export a named function and import it in another module.

This example shows how to export a default function and import it without curly braces.

Examples

Named Export and Import Example

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

// In another file
import { greet } from './greet.js';
console.log(greet('Alice'));

This example shows how to export a named function and import it in another module.

Default Export and Import Example

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

// In another file
import greet from './greet.js';
console.log(greet('Bob'));

This example shows how to export a default function and import it without curly braces.

Best Practices

Use named exports when exporting multiple values from a module.
Use default exports for modules that export a single main value.
Keep modules focused on a single responsibility.
Use consistent naming conventions for imports and exports.
Avoid circular dependencies between modules.

Common Mistakes

Forgetting to include file extensions in import paths when required.
Mixing default and named imports incorrectly.
Polluting the global scope by not using modules.
Not using modules in large projects, leading to unmanageable code.

Hands-on Exercise

Create and Use a Module

Create a module that exports two functions: one named export and one default export. Then create another file that imports and uses both functions.

Expected output: The imported functions should work correctly when called.

Hint: Use `export` and `export default` in the module file, and use appropriate import syntax in the consumer file.

Interview Questions

What is the difference between named exports and default exports in JavaScript modules?

Interview

Named exports allow exporting multiple values by name and must be imported using the same names inside curly braces. Default exports export a single value as the default and can be imported without curly braces, allowing renaming.

Why are JavaScript modules important?

Interview

Modules help organize code into reusable, maintainable pieces, avoid global scope pollution, and manage dependencies explicitly, improving code quality and scalability.

What is Introduction to Modules, and why is it useful?

Beginner

JavaScript modules allow developers to split code into reusable pieces by exporting and importing functionality between files.