// component.js
export default function Button({ label }) { ... }

// app.js
import Button from './component.js';
import MyBtn from './component.js'; // rename freely

Deep Dive Course

A module can have exactly **one default export**. It's typically used for the primary thing a module provides (a class, component, or function). The importer can give it any name — unlike named exports which must match. Common pattern: `export default class MyComponent`.

1Understanding Default Export

A module can have exactly one default export. It's typically used for the primary thing a module provides (a class, component, or function). The importer can give it any name — unlike named exports which must match. Common pattern: export default class MyComponent.

💡

Default exports can't be tree-shaken as effectively as named exports. Prefer named exports for utility libraries.

editor.html

// userService.js - one main concern
class UserService {
  async getUser(id) { /* ... */ }
  async updateUser(id, data) { /* ... */ }
}

export default new UserService(); // singleton

// ─────────────────────────
// main.js
import userService from './userService.js';

const user = await userService.getUser(1);

localhost:3000

2Practical Example

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

editor.html

// Named default export (best practice)
export default function fetchUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

// vs anonymous (avoid)
export default (id) => fetch(`/api/users/${id}`); // no name in stack trace

localhost:3000

3Best Practices

Follow these guidelines when working with Default Export:

1. Use default for the one primary thing a module does

2. Prefer named exports for utility modules (better tree-shaking)

3. Avoid anonymous default exports — they hurt debugging

⚠️

Tip: Default exports can't be tree-shaken as effectively as named exports. Prefer named exports for utility libraries.

editor.html

// userService.js - one main concern
class UserService {
  async getUser(id) { /* ... */ }
  async updateUser(id, data) { /* ... */ }
}

export default new UserService(); // singleton

// ─────────────────────────
// main.js
import userService from './userService.js';

const user = await userService.getUser(1);

localhost:3000

Examples

Example 01Basic Usage

// userService.js - one main concern
class UserService {
  async getUser(id) { /* ... */ }
  async updateUser(id, data) { /* ... */ }
}

export default new UserService(); // singleton

// ─────────────────────────
// main.js
import userService from './userService.js';

const user = await userService.getUser(1);

Example 02Advanced Example

// Named default export (best practice)
export default function fetchUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

// vs anonymous (avoid)
export default (id) => fetch(`/api/users/${id}`); // no name in stack trace

Best Practices

Use default for the one primary thing a module does
Prefer named exports for utility modules (better tree-shaking)
Avoid anonymous default exports — they hurt debugging

Interview Question

Why might named exports be better than default exports for libraries?▼

Hint: Tree shaking and tooling.

Named exports are statically analyzable — bundlers can determine exactly which exports are used and eliminate unused ones (tree shaking). Default exports are harder to tree-shake because they could be used in any form. Named exports also enforce consistent naming across the codebase and provide better IDE autocomplete.

Exercises

MediumPractice using Default Export in a real scenario.

View Solution

// userService.js - one main concern
class UserService {
  async getUser(id) { /* ... */ }
  async updateUser(id, data) { /* ... */ }
}

export default new UserService(); // singleton

// ─────────────────────────
// main.js
import userService from './userService.js';

const user = await userService.getUser(1);

Frequently Asked Questions

Why might named exports be better than default exports for libraries?▼

Related Functions

Import-ExportExport-NamedModules