---
description: an expression that evaluates to a function object.
---

# function expression

[JS](../..) ⟩ [value](..) ⟩ [function]() ⟩ expression

{% hint style="success" %}
an [expr](../../grammar/statement/expr "mention") that <mark style="color:yellow;">**evaluates to**</mark> a [](<> "mention") as [..](.. "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](arrow "mention")
  * [iife](expr/iife "mention")
- <mark style="color:yellow;">**features of**</mark>**&#x20;**<mark style="color:purple;">**F.E.**</mark>
  * [implied](../../scope/implied "mention")
  * [fe-not-hoisted](../../scope/hoist/variable/var/fe-not-hoisted "mention"):exclamation:
  * [readonly-id](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](../../variable "mention") ( 👉 more about：function expression [as-variable](expr/as-variable "mention"))
  * as [argument](argument "mention") (also called a [callback](kind/callback "mention"))
  * as [method](../obj/method "mention")
{% endtab %}

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

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

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

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