REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Named Exports

AI & DATA SCIENCE // export-named

Named exports allow a module to export multiple values by name. Imported with curly braces and must match the export name (or be aliased).

Syntax

// Named inline
export const PI = 3.14;
export function add(a, b) {}

// Or export list at bottom
export { PI, add, subtract };

Deep Dive Course

Named exports are the backbone of modular JavaScript. They enable **tree shaking** in bundlers (unused exports are removed from the bundle). You can **rename on export** (`export { fn as utility }`) or **rename on import** (`import { fn as utility }`). Re-exporting from an index file creates clean public APIs.

1Understanding Named Exports

Named exports are the backbone of modular JavaScript. They enable tree shaking in bundlers (unused exports are removed from the bundle). You can rename on export (export { fn as utility }) or rename on import (import { fn as utility }). Re-exporting from an index file creates clean public APIs.

💡

Create an index.js that re-exports from multiple files to give consumers a clean single import point.

editor.html

// helpers.js
export function debounce(fn, delay) { /* ... */ }
export function throttle(fn, interval) { /* ... */ }
export function memoize(fn) { /* ... */ }

// index.js (re-export aggregator)
export { debounce, throttle, memoize } from './helpers.js';
export { default as UserService } from './userService.js';

// consumer.js
import { debounce, UserService } from './index.js';

localhost:3000

2Practical Example

Here is a real-world application of Named Exports showing how it is used in production JavaScript code.

editor.html

// Renaming exports
export { longFunctionName as shortName };
export { internalName as publicName };

// Import with alias
import { debounce as debounceFn } from './helpers.js';

localhost:3000

3Best Practices

Follow these guidelines when working with Named Exports:

1. Export at declaration for clarity

2. Use export lists at the bottom for a clear module summary

3. Create index.js files to aggregate and re-export

⚠️

Tip: Create an index.js that re-exports from multiple files to give consumers a clean single import point.

editor.html

// helpers.js
export function debounce(fn, delay) { /* ... */ }
export function throttle(fn, interval) { /* ... */ }
export function memoize(fn) { /* ... */ }

// index.js (re-export aggregator)
export { debounce, throttle, memoize } from './helpers.js';
export { default as UserService } from './userService.js';

// consumer.js
import { debounce, UserService } from './index.js';

localhost:3000

Examples

Example 01Basic Usage

// helpers.js
export function debounce(fn, delay) { /* ... */ }
export function throttle(fn, interval) { /* ... */ }
export function memoize(fn) { /* ... */ }

// index.js (re-export aggregator)
export { debounce, throttle, memoize } from './helpers.js';
export { default as UserService } from './userService.js';

// consumer.js
import { debounce, UserService } from './index.js';

Example 02Advanced Example

// Renaming exports
export { longFunctionName as shortName };
export { internalName as publicName };

// Import with alias
import { debounce as debounceFn } from './helpers.js';

Best Practices

Export at declaration for clarity
Use export lists at the bottom for a clear module summary
Create index.js files to aggregate and re-export

Interview Question

How do you re-export from another module?▼

Hint: export { ... } from syntax.

export { name } from './module.js' re-exports a named export without importing it into the current scope. export { default } from './module.js' re-exports the default. export * from './module.js' re-exports ALL named exports. This is the basis of index.js barrel files.

Exercises

MediumPractice using Named Exports in a real scenario.

View Solution

// helpers.js
export function debounce(fn, delay) { /* ... */ }
export function throttle(fn, interval) { /* ... */ }
export function memoize(fn) { /* ... */ }

// index.js (re-export aggregator)
export { debounce, throttle, memoize } from './helpers.js';
export { default as UserService } from './userService.js';

// consumer.js
import { debounce, UserService } from './index.js';

Frequently Asked Questions

How do you re-export from another module?▼

Related Functions

Import-ExportExport-by-DefaultModules