> 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.md).

# function

🚧 under construction -> named function

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ function

{% hint style="success" %}
an [object](/web/js/val/obj.md) that <mark style="color:yellow;">**can be called**</mark> (supports the [\[\[Call\]\]](https://tc39.es/ecma262/#table-additional-essential-internal-methods-of-function-objects) [**internal method**](/web/js/val/obj/prop/internal.md)).

* its [**name**](/web/js/val/func/name.md) (or a [**variable**](/web/js/variable.md) that <mark style="color:yellow;">**refers to it**</mark>) is an [identifier](/web/js/grammar/token/id.md).

```javascript
// function declarations
function  f() { ... }          // normal function
function* f() { ... }          // generator function
async function  f() { ... }    // async function
async function* f() { ... }    // async generator function
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
:scales:[parameter vs. argument](/web/js/val/func/vs-arg.md)
{% endhint %}

{% hint style="success" %}
every <mark style="color:purple;">**function**</mark>&#x20;

* is actually a [Function](/web/js/val/builtin/func.md) object.
* is a [closure](/web/js/val/func/closure.md).
  {% endhint %}

{% hint style="warning" %}
In JavaScript, <mark style="color:yellow;">**function**</mark> [argument](/web/js/val/func/argument.md)s are <mark style="color:red;"><mark style="color:orange;">**always**<mark style="color:orange;"></mark> <mark style="color:orange;"><mark style="color:red;">**passed by value**<mark style="color:red;"></mark>. \
([value](/web/js/val.md)s of the [variable](/web/js/variable.md)s are <mark style="color:red;">**copied**</mark> into the function arguments)

👉 [JavaScript Tutorial](https://www.javascripttutorial.net/) » [Understanding JavaScript Pass-By-Value](https://www.javascripttutorial.net/javascript-pass-by-value/)
{% endhint %}

{% hint style="danger" %}

* <mark style="color:purple;">**function**</mark> <mark style="color:yellow;">**vs.**</mark> [class](/web/js/val/class.md) ( 👉 [class](/web/js/val/class.md) ⟩ [class](/web/js/val/class.md#zhong-dian), [function](/web/js/val/func.md) 的「💾 程式」 )
* <mark style="color:purple;">**function**</mark> <mark style="color:yellow;">**vs.**</mark> [constructor](/web/js/val/func/constructor.md)
  {% endhint %}

{% hint style="info" %}
[method](/web/js/val/obj/method.md) is a [function](/web/js/val/func.md).
{% endhint %}

{% hint style="info" %}
a [closure](/web/js/val/func/closure.md) (or [IIFE](/web/js/val/func/expr/iife.md)) can be used to create a [scope](/web/js/scope.md) to <mark style="color:yellow;">**hide**</mark> [variable](/web/js/variable.md)s/<mark style="color:purple;">**functions**</mark>.
{% endhint %}

{% hint style="info" %}
A "[variable](/web/js/variable.md)" is just a [property](/web/js/val/obj/prop.md) of the [environment record](/web/js/concept/execution-context/lexical-environment/environment-record.md) (associated with the <mark style="color:yellow;">**currently executing**</mark> [block](/web/js/grammar/statement/other/block.md) /[function](/web/js/val/func.md) /[module](/web/js/module.md) /<mark style="color:yellow;">**script**</mark>).&#x20;
{% endhint %}
{% endtab %}

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

* <mark style="color:yellow;">**creating functions**</mark>
  * [function declaration](/web/js/val/func/declare.md)
  * using [Function](/web/js/val/builtin/func.md) constructor
  * [function expression](/web/js/val/func/expr.md) - an [expression](/web/js/grammar/statement/expr.md) that evaluates to a <mark style="color:purple;">**function**</mark>.
    * [arrow function](/web/js/val/func/arrow.md)
    * [IIFE](/web/js/val/func/expr/iife.md) - immediately invoked function expression
* <mark style="color:yellow;">**types of functions**</mark>
  * [anonymous function](/web/js/val/func/name/anonymous-function.md) vs. named function 🚧
  * [async function](/web/js/async/async/functions.md)
  * [callback](/web/js/val/func/kind/callback.md) - a function as an argument.
  * [recursive function](/web/js/val/func/kind/recursive.md) - a function that calls itself.
  * [nested function](/web/js/val/func/kind/nested.md)
  * [closure](/web/js/val/func/closure.md)
  * [constructor](/web/js/val/func/constructor.md)
* <mark style="color:yellow;">**accessing functions**</mark>
  * function name  🚧
* <mark style="color:yellow;">**calling functions**</mark>
  * [parameter](/web/js/val/func/param.md) / [argument](/web/js/val/func/argument.md)
  * [default parameter](/web/js/val/func/param/default-parameter.md)
* <mark style="color:yellow;">**features of functions**</mark>
  * [function scope](/web/js/scope/function.md) - [scope](/web/js/scope.md) created by <mark style="color:purple;">**function**</mark>.
  * [new.target](/web/js/val/obj/create/new/new.target.md) - detect whether a <mark style="color:yellow;">**function**</mark>/<mark style="color:yellow;">**constructor**</mark> was called using [new](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new).
  * [function boundary](/web/js/val/func/boundary.md)
* <mark style="color:yellow;">**function transformers**</mark>
  * [decorator](/web/js/val/func/kind/higher/decorator.md)
  * [memoization](/web/js/val/func/kind/higher/decorator/memoize.md) <mark style="color:yellow;">**-**</mark> make a function "remember" its return values.
* <mark style="color:yellow;">**other topics**</mark>
  * [helper functions](/web/appendix/custom/helper-functions.md)
    {% endtab %}

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

* a <mark style="color:purple;">**function**</mark>&#x20;
  * is an [object](/web/js/val/obj.md).
  * is a [closure](/web/js/val/func/closure.md).
* the following are <mark style="color:purple;">**functions**</mark>：
  * every [method](/web/js/val/obj/method.md)
  * every [class](/web/js/val/class.md)
  * every [constructor](/web/js/val/func/constructor.md) (supports the [\[\[Construct\]\]](https://tc39.es/ecma262/#table-additional-essential-internal-methods-of-function-objects) [**internal method**](/web/js/val/obj/prop/internal.md)).&#x20;
* [closure](/web/js/val/func/closure.md) can be used as a [function](/web/js/val/func.md) with <mark style="color:red;">**private**</mark> [property](/web/js/val/obj/prop.md) (functions/variables):exclamation:(:point\_right: [closure: manage grades](/web/js/val/func/closure/examples/grades.md))
  {% endtab %}

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

* [ ] JS.info ⟩ [Proxy](https://javascript.info/proxy#proxy) ⟩ internal method <mark style="color:blue;">`[[Call]]`</mark>.
  {% endtab %}

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

* [ ] [function declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
* [ ] [Function](https://developer.mozilla.org/en-US/docs/Glossary/Function)
* [ ] [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) - object method/getter/setter are all functions.
  {% endtab %}

{% tab title="🚧" %}

* [ ] named function&#x20;
  {% endtab %}
  {% endtabs %}