Suggest an edit

Improve this article

Refine the answer for “Named vs default export”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What "export" means in general

> **Export** is the mechanism that lets a module "hand out" functions, variables, classes, and so on, so they can be **imported** in other files.

ES Modules have **two types of exports**:

1. **Named export**
2. **Default export**

## 2. Named exports

> Lets you export **several values** from a module, each with its own name.

**math.js**

```javascript
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}
```

**app.js**

```javascript
import { PI, add, sub } from './math.js';

console.log(PI);       // 3.14
console.log(add(2, 3)); // 5
```

You can export **several items** from one file.
The import must use **the exact same names** as the export.

### An alternative form:

```javascript
const PI = 3.14;
function add(a, b) { return a + b; }
function sub(a, b) { return a - b; }

export { PI, add, sub };
```

This is equivalent to the previous example, just a grouped export.

## 3. Default exports

> Lets you export **only one value** as the module's "main content".

**logger.js**

```javascript
export default function log(message) {
  console.log('LOG:', message);
}
```

**app.js**

```javascript
import log from './logger.js'; // no braces!
log('Hello'); // LOG: Hello
```

With a **default export**:

- a module can have **only one** default export;
- you can name it **anything you like** on import.

### Another example:

```javascript
export default class User {
  constructor(name) {
    this.name = name;
  }
}
```

Import:

```javascript
import Person from './User.js'; // any name works
const user = new Person('Tim');
```

## 4. The key differences

| Criterion | **Named export** | **Default export** |
|---|---|---|
| Count | Can export many values | Only one value |
| Import | With braces `{}` | Without braces |
| Name on import | Must match the original | Any name works |
| Syntax | `export const foo = ...` / `export { foo }` | `export default ...` |
| Importing everything | `import * as lib from './file.js'` | Not directly applicable |
| Semantics | Exports "many different parts" of a module | Exports the module's "main entity" |
| Examples | Utilities, constants, functions | The main class, function, or component |

## 5. They can be combined

One module can hold **both a named and a default** export:

**math.js**

```javascript
export const PI = 3.14;
export function add(a, b) { return a + b; }

export default function multiply(a, b) {
  return a * b;
}
```

**app.js**

```javascript
import multiply, { PI, add } from './math.js';

console.log(multiply(2, 3)); // 6
console.log(PI);             // 3.14
console.log(add(5, 5));      // 10
```

## 6. Importing "everything" from a module

You can import **the whole content** under one name:

```javascript
import * as math from './math.js';

console.log(math.PI);            // 3.14
console.log(math.add(2, 3));     // 5
console.log(math.default(2, 3)); // 6, the default is reached via .default
```

## 7. Common mistakes

| Mistake | Cause | Fix |
|---|---|---|
| `SyntaxError: The requested module ... does not provide an export named` | The wrong name when importing a named export | Use the exact names |
| `default is not exported` | Trying to import a default that doesn't exist | Check that you export it via `export default` |
| `Cannot use import statement outside a module` | The file isn't ESM | Add `"type": "module"` to `package.json` or use `.mjs` |

## 8. When to use which

| Scenario | Export type |
|---|---|
| A module with several utilities | **Named** |
| One main class / component | **Default** |
| A library with an API | Combined (default + named) |

Examples:

- **React** → `export default React; export { useState, useEffect }`
- **Axios** → `export default axios; export { AxiosError }`

## 9. Conceptually

- **Named exports** are "many tools from a set"
(everything is explicit, the IDE helps, autocomplete works).
- **A default export** is "the module's main entity"
(convenient when a file is responsible for one central object).

## Quick summary

| Characteristic | Named export | Default export |
|---|---|---|
| Count | Several | One |
| Import | `import { x } from` | `import x from` |
| Name | Must match | Any name |
| IDE hints | Works great | Sometimes lost |
| Use case | Utilities, functions, constants | The main class or component |
| Combining them | Works together | Works together |

## In one sentence

> **Named exports** let you export several entities under their own names,
> while a **default export** is for the module's single "main" entity, which can be imported under any name.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts795 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.