# default export

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [module](https://lochiwei.gitbook.io/web/js/module) ⟩ [ES](https://lochiwei.gitbook.io/web/js/module/es) ⟩ [export](https://lochiwei.gitbook.io/web/js/module/es/export) ⟩ export default

{% hint style="success" %} <mark style="color:purple;">**export default**</mark> is used if <mark style="color:yellow;">**only one variable**</mark> is being <mark style="color:yellow;">**exported**</mark> from a file, also used to create a <mark style="color:yellow;">**fallback value**</mark> for a file or module.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %} <mark style="color:red;">**unlike**</mark> [commonjs](https://lochiwei.gitbook.io/web/js/module/commonjs "mention"), <mark style="color:purple;">**default export**</mark> in [..](https://lochiwei.gitbook.io/web/js/module/es "mention") <mark style="color:red;">**cannot**</mark> be [destructured](https://lochiwei.gitbook.io/web/js/grammar/op/assign/destruct/obj)❗️  👉 example：[es module](https://replit.com/@pegasusroe/es-module#index.js)

```javascript
// "default export" cannot be destructured
import { name } from './default_export.js';    // ⛔ error
//       ^^^^
// ⛔ SyntaxError: 
//    The requested module './default_export.js' 
//    does not provide an export named 'name'
```

{% endhint %}
{% endtab %}

{% tab title="💈 範例" %}
{% hint style="warning" %} <mark style="color:purple;">**export default**</mark> is <mark style="color:yellow;">**imported**</mark>**&#x20;**<mark style="color:red;">**differently**</mark>,&#x20;

* there are <mark style="color:red;">**no**</mark>**&#x20;**<mark style="color:yellow;">**curly braces**</mark> around the imported value.

* <mark style="color:yellow;">**imported name**</mark> <mark style="color:orange;">**can be different**</mark> from the default export name.
  {% endhint %}

* replit：[export default](https://replit.com/@pegasusroe/export-default#index.js)

```javascript
// 📁 module.js
export default A;        // ⭐️ export default

// ⭐️ import without `{}` ( not `{B}`❗️)
import B from "./module.js";    // ⭐️ use nay name of your choice
import defaultExport, {otherExport, ...} from "./module.js";
```

* another example：[es module](https://replit.com/@pegasusroe/es-module#index.js)

```javascript
// ⭐️ import "named export"
import { pi } from './named_export.js';

// ⭐️ import "default export"
import who from './default_export.js';    // OK

// ⭐️ "default export" cannot be destructured
//
//     import { name } from './default_export.js';    // ⛔ error
//              ^^^^
// ⛔ SyntaxError: 
//    The requested module './default_export.js' 
//    does not provide an export named 'name'
```

* 📁 <mark style="color:yellow;">`named_export.js`</mark>

```javascript
const pi = Math.PI;
export { pi };        // ⭐️ named export
```

* 📁 <mark style="color:yellow;">`default_export.js`</mark>

```javascript
const joy = {
    name: 'Joy',
    age: 17,
};

export default joy;    // ⭐️ default export
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] MakeUseOf ⟩ [How to Import and Export Functions in JavaScript](https://www.makeuseof.com/how-to-import-and-export-functions-in-javascript/)
  {% endtab %}
  {% endtabs %}