Suggest an edit

Improve this article

Refine the answer for “import/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)

## What are import and export

Starting with **ES6 (2015)**, JavaScript gained a **built-in module system**:
the ability to **split code into files (modules)** and **exchange variables, functions, classes, and so on between them**.

---

### export

> Lets you *send* something (a function, object, class, etc.) **out of a module**, so other files can use it.

### import

> Lets you *load* data, functions, or classes **from another module**, where they were exported.

---

## A basic example

### math.js

```javascript
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}
```

### app.js

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

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

---

## Kinds of exports

### 1. Named export (`export`)

You can export several entities from a single file.

```javascript
// math.js
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}
```

You import it **by name**, in curly braces:

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

The names must match!

---

### 2. Default export (`export default`)

Lets you export **one main entity** from a file.
Most often it's the "main object" or function.

```javascript
// math.js
export default function add(a, b) {
  return a + b;
}
```

You can import it **under any name**, without curly braces:

```javascript
import sum from './math.js';
console.log(sum(2, 3)); // 5
```

`export default` → you can name the import however you like.

---

## Differences between `export` and `export default`

| Criterion | `export` (named) | `export default` |
|---|---|---|
| Count per file | As many as you like | Only one |
| Import | In curly braces `{}` | Without curly braces |
| Name | Must match | Can be anything |
| Renaming on import | Through `as` | Just change the name |
| Example | `import { add } from './file.js'` | `import add from './file.js'` |

---

## Examples of the differences

### Named export:

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

```javascript
// app.js
import { PI, add } from './math.js';
console.log(add(1, 2)); // 3
```

### Default export:

```javascript
// math.js
export default function(a, b) { return a * b; }
```

```javascript
// app.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6
```

### Mixed export:

```javascript
// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }
```

```javascript
// app.js
import add, { PI } from './math.js';
console.log(add(1, 2), PI); // 3 3.14
```

---

## 3. Renaming on import and export

### Renaming on export:

```javascript
function sum(a, b) { return a + b; }
export { sum as add };
```

### Renaming on import:

```javascript
import { add as plus } from './math.js';
plus(2, 3); // 5
```

---

## 4. Importing an entire module

You can import *everything at once* as an object:

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

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

Handy when a module has many exports.

---

## 5. Re-exporting (forwarding from another file)

Sometimes one module simply "repackages" others:

```javascript
// utils.js
export { add, multiply } from './math.js';
```

Now you can:

```javascript
import { add } from './utils.js';
```

---

## Important to remember

| Feature | Description |
|---|---|
| Works **only in modules** (`type="module"` in HTML or `.mjs` in Node) | Otherwise you get a `SyntaxError` |
| Import/export are **always static** | Cannot be used inside `if`, `for`, `function` |
| Modules are **cached** | Loaded once and reused |
| `import` is **always asynchronous** | You can use `await import()` for dynamic loading |

---

## Dynamic import

You can load a module *on demand*:

```javascript
const math = await import('./math.js');
console.log(math.add(2, 3)); // 5
```

Works inside an `async` function or modules (with `type="module"`).

---

## Summary

| Keyword | What it does | Example |
|---|---|---|
| `export` | Sends variables/functions out | `export const PI = 3.14;` |
| `export default` | Sends the "main" object/function | `export default class User {}` |
| `import` | Brings in exported entities | `import { PI } from './math.js';` |

---

Put simply:

> `export`: "send out"
> `import`: "load in"
> `export default`: "send the one main thing"

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.