Modules and Import/Export in JavaScript

In JavaScript, modules allow you to break your code into smaller, reusable pieces, improving organization, maintainability, and readability. Modules are essential for creating scalable applications, especially when the codebase grows larger. With the introduction of ES6 (ECMAScript 2015), JavaScript gained a native module system that allows you to import and export code between different files.

Understanding Modules in JavaScript

A module is essentially a piece of code that is stored in its own file. This code can define variables, functions, classes, or any other construct that you want to make available for use in other parts of the application.

Exporting from a Module

To make variables, functions, or classes from one file available in another file, you use the export keyword. There are two ways to export from a module in JavaScript: named exports and default exports.

1. Named Exports

Named exports allow you to export multiple items (variables, functions, etc.) from a module. You export them by specifying their names.

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2. Default Exports

A default export allows you to export a single value, which could be a function, class, or object. The default export is typically used when you want to export one main feature of the module.

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

Importing a Module

To access the exported values from a module in another file, you use the import keyword. There are two types of imports: named imports and default imports.

1. Named Imports

When importing named exports, you must use the exact name that was used in the export statement.

// app.js (Main File)
import { add, subtract } from './math.js';

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

2. Default Imports

When importing a default export, you can choose any name for the imported value.

// app.js (Main File)
import multiply from './math.js';

console.log(multiply(2, 3));  // Output: 6

3. Combining Named and Default Imports

You can also combine named imports with a default import from the same module.

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

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

console.log(multiply(2, 3));  // Output: 6
console.log(add(2, 3));  // Output: 5

Exporting and Importing Classes

You can export and import classes in the same way as functions and variables.

Example: Exporting and Importing a Class

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Dynamic Imports

JavaScript also supports dynamic imports, which allow you to load modules conditionally at runtime. This can be useful for code splitting, where you load modules only when needed, reducing initial loading time.

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

Modules in the Browser

In modern browsers, you can use ES6 modules natively. You just need to add the type="module" attribute to your

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Agnes Tachyon Build Guide | A Pretty Derby Musume

2 weeks ago By Jack chen

Oguri Cap Build Guide | A Pretty Derby Musume

2 weeks ago By Jack chen

Palia: Rasquellywag's Riches Quest Walkthrough

4 weeks ago By DDD

Peak: How To Revive Players

3 weeks ago By DDD

Grass Wonder Build Guide | Uma Musume Pretty Derby

1 weeks ago By Jack chen

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

8641

17

Java Tutorial

1787

16

CakePHP Tutorial

1730

56

Laravel Tutorial

1581

29

PHP Tutorial

1448

31

Show More