# function expression

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [value](https://lochiwei.gitbook.io/web/js/val) ⟩ [function](https://lochiwei.gitbook.io/web/js/val/func) ⟩ expression

{% hint style="success" %}
an [expr](https://lochiwei.gitbook.io/web/js/grammar/statement/expr "mention") that <mark style="color:yellow;">**evaluates to**</mark> a [](https://lochiwei.gitbook.io/web/js/val/func "mention") as [..](https://lochiwei.gitbook.io/web/js/val "mention").

```javascript
//           ╭─── 🔸 function expression ───╮
const area = function (w, h) { return w * h };
```

{% endhint %}

*

{% tabs %}
{% tab title="🔴 主題" %}

* <mark style="color:yellow;">**different forms of**</mark>**&#x20;**<mark style="color:purple;">**F.E.**</mark>
  * [arrow](https://lochiwei.gitbook.io/web/js/val/func/arrow "mention")
  * [iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention")
* <mark style="color:yellow;">**features of**</mark>**&#x20;**<mark style="color:purple;">**F.E.**</mark>
  * [implied](https://lochiwei.gitbook.io/web/js/scope/implied "mention")
  * [fe-not-hoisted](https://lochiwei.gitbook.io/web/js/scope/hoist/variable/var/fe-not-hoisted "mention"):exclamation:
  * [readonly-id](https://lochiwei.gitbook.io/web/js/val/func/expr/readonly-id "mention"):exclamation:
* <mark style="color:yellow;">**roles of**</mark>**&#x20;**<mark style="color:purple;">**function expression**</mark><mark style="color:yellow;">**：**</mark>
  * as [variable](https://lochiwei.gitbook.io/web/js/variable "mention") ( 👉 more about：function expression [as-variable](https://lochiwei.gitbook.io/web/js/val/func/expr/as-variable "mention"))
  * as [argument](https://lochiwei.gitbook.io/web/js/val/func/argument "mention") (also called a [callback](https://lochiwei.gitbook.io/web/js/val/func/kind/callback "mention"))
  * as [method](https://lochiwei.gitbook.io/web/js/val/obj/method "mention")
    {% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
[fe-not-hoisted](https://lochiwei.gitbook.io/web/js/scope/hoist/variable/var/fe-not-hoisted "mention").
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %} <mark style="color:yellow;">**roles**</mark> of "<mark style="color:purple;">**function expression**</mark>"：

* <mark style="color:yellow;">**as**</mark> [variable](https://lochiwei.gitbook.io/web/js/variable "mention") ( 👉 function expression [as-variable](https://lochiwei.gitbook.io/web/js/val/func/expr/as-variable "mention"))
* <mark style="color:yellow;">**as**</mark> [argument](https://lochiwei.gitbook.io/web/js/val/func/argument "mention") (also called a [callback](https://lochiwei.gitbook.io/web/js/val/func/kind/callback "mention"))
* <mark style="color:yellow;">**as**</mark> [method](https://lochiwei.gitbook.io/web/js/val/obj/method "mention")
* <mark style="color:yellow;">**as**</mark> [iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention")
  {% endhint %}

{% hint style="warning" %} <mark style="color:red;">**only**</mark> <mark style="color:purple;">**function expression**</mark> can be [anonymous-function](https://lochiwei.gitbook.io/web/js/val/func/name/anonymous-function "mention").
{% endhint %}

{% hint style="warning" %} <mark style="color:yellow;">**(**</mark> 👉 [implied](https://lochiwei.gitbook.io/web/js/scope/implied "mention")<mark style="color:yellow;">**)**</mark>

the <mark style="color:yellow;">**name**</mark> ([id](https://lochiwei.gitbook.io/web/js/grammar/token/id "mention")) of a "<mark style="color:purple;">**function expression**</mark>" is in <mark style="color:yellow;">**its own**</mark> [implied](https://lochiwei.gitbook.io/web/js/scope/implied "mention"), <mark style="color:yellow;">**nested**</mark> <mark style="color:orange;">**between**</mark> the <mark style="color:orange;">**outer**</mark>**&#x20;**<mark style="color:yellow;">**enclosing scope**</mark> and the <mark style="color:orange;">**inner**</mark>**&#x20;**<mark style="color:yellow;">**function scope**</mark>. &#x20;
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* :point\_right:[func-star](https://lochiwei.gitbook.io/web/js/iteration/generator/func/func-star "mention")
* :star:[arrow](https://lochiwei.gitbook.io/web/js/val/func/arrow "mention") <mark style="color:yellow;">**is**</mark> a [expr](https://lochiwei.gitbook.io/web/js/val/func/expr "mention").
  {% endtab %}

{% tab title="💈範例" %}

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

```javascript
//           ╭─── 🔸 function expression ───╮
const area = function (w, h) { return w * h };    // ⭐️ 1. as "variable"

const math = {                        // ⭐️ 2. as "method"
                                      // 🔸 "named" function expression
    //       ⤷╭──────────────╮ <-------- 🔸 function name: "f" (local)
    factorial: function f(n) {        //     available only in function body.
        // ...
    }
};

//  ╭── 🔸 FE ──╮
  ( function(){ } )();          // ⭐️ 3. as "IIFE" (form 1)

// ╭─── 🔸 FE ──╮
   !function(){ }();            // ⭐️ 3. as "IIFE" (form 2)

//          ╭─── 🔸 FE ────╮
f('click',  function (e) { } ); // ⭐️ 4. as "callback"
```

{% endtab %}

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

* [x] JS.info ⟩ [function expressions](https://javascript.info/function-expressions)
  {% endtab %}

{% tab title="📘 手冊" %}

* [x] [Function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
* [ ] [Function declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
* [ ] [different types of functions](https://developer.mozilla.org/en-US/docs/Glossary/Function#different_types_of_functions)
  {% endtab %}
  {% endtabs %}