> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/func/expr.md).

# function expression

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [function](/web/js/val/func.md) ⟩ expression

{% hint style="success" %}
an [expression](/web/js/grammar/statement/expr.md) that <mark style="color:yellow;">**evaluates to**</mark> a [function](/web/js/val/func.md) as [value](/web/js/val.md).

```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 function](/web/js/val/func/arrow.md)
  * [IIFE](/web/js/val/func/expr/iife.md)
* <mark style="color:yellow;">**features of**</mark>**&#x20;**<mark style="color:purple;">**F.E.**</mark>
  * [function name scope](/web/js/scope/implied.md)
  * [function expression not hoisted](/web/js/scope/hoist/variable/var/fe-not-hoisted.md):exclamation:
  * [read-only identifier](/web/js/val/func/expr/readonly-id.md):exclamation:
* <mark style="color:yellow;">**roles of**</mark>**&#x20;**<mark style="color:purple;">**function expression**</mark><mark style="color:yellow;">**：**</mark>
  * as [variable](/web/js/variable.md) ( 👉 more about：function expression [as variable](/web/js/val/func/expr/as-variable.md))
  * as [argument](/web/js/val/func/argument.md) (also called a [callback](/web/js/val/func/kind/callback.md))
  * as [method](/web/js/val/obj/method.md)
    {% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
[function expression not hoisted](/web/js/scope/hoist/variable/var/fe-not-hoisted.md).
{% 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](/web/js/variable.md) ( 👉 function expression [as variable](/web/js/val/func/expr/as-variable.md))
* <mark style="color:yellow;">**as**</mark> [argument](/web/js/val/func/argument.md) (also called a [callback](/web/js/val/func/kind/callback.md))
* <mark style="color:yellow;">**as**</mark> [method](/web/js/val/obj/method.md)
* <mark style="color:yellow;">**as**</mark> [IIFE](/web/js/val/func/expr/iife.md)
  {% endhint %}

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

{% hint style="warning" %} <mark style="color:yellow;">**(**</mark> 👉 [function name scope](/web/js/scope/implied.md)<mark style="color:yellow;">**)**</mark>

the <mark style="color:yellow;">**name**</mark> ([identifier](/web/js/grammar/token/id.md)) of a "<mark style="color:purple;">**function expression**</mark>" is in <mark style="color:yellow;">**its own**</mark> [function name scope](/web/js/scope/implied.md), <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:[function\*](/web/js/iteration/generator/func/func-star.md)
* :star:[arrow function](/web/js/val/func/arrow.md) <mark style="color:yellow;">**is**</mark> a [function expression](/web/js/val/func/expr.md).
  {% 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 %}