---
description: 🚧 under construction -> named function
---

# function

[JS](..) ⟩ [value]() ⟩ [object](obj) ⟩ function

{% hint style="success" %}
an [obj](obj "mention") 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**](obj/prop/internal)).

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

```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:[vs-arg](func/vs-arg "mention")
{% endhint %}

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

* is actually a [func](builtin/func "mention") object.
* is a [closure](func/closure "mention").
{% endhint %}

{% hint style="warning" %}
In JavaScript, <mark style="color:yellow;">**function**</mark> [argument](func/argument "mention")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>. \
([](<> "mention")s of the [variable](../variable "mention")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](class "mention") ( 👉 [class](class "mention") ⟩ [#zhong-dian](../class#zhong-dian "mention"), [func](func "mention") 的「💾 程式」 )
* <mark style="color:purple;">**function**</mark> <mark style="color:yellow;">**vs.**</mark> [constructor](func/constructor "mention")
{% endhint %}

{% hint style="info" %}
[method](obj/method "mention") is a [func](func "mention").
{% endhint %}

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

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

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**creating functions**</mark>
  * [declare](func/declare "mention")
  * using [func](builtin/func "mention") constructor
  * [expr](func/expr "mention") - an [expr](../grammar/statement/expr "mention") that evaluates to a <mark style="color:purple;">**function**</mark>.
    * [arrow](func/arrow "mention")
    * [iife](func/expr/iife "mention") - immediately invoked function expression
* <mark style="color:yellow;">**types of functions**</mark>
  * [anonymous-function](func/name/anonymous-function "mention") vs. named function 🚧
  * [functions](../async/async/functions "mention")
  * [callback](func/kind/callback "mention") - a function as an argument.
  * [recursive](func/kind/recursive "mention") - a function that calls itself.
  * [nested](func/kind/nested "mention")
  * [closure](func/closure "mention")
  * [constructor](func/constructor "mention")
* <mark style="color:yellow;">**accessing functions**</mark>
  * function name  🚧
* <mark style="color:yellow;">**calling functions**</mark>
  * [param](func/param "mention") / [argument](func/argument "mention")
  * [default-parameter](func/param/default-parameter "mention")
* <mark style="color:yellow;">**features of functions**</mark>
  * [function](../scope/function "mention") - [scope](../scope "mention") created by <mark style="color:purple;">**function**</mark>.
  * [new.target](obj/create/new/new.target "mention") - 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).
  * [boundary](func/boundary "mention")
* <mark style="color:yellow;">**function transformers**</mark>
  * [decorator](func/kind/higher/decorator "mention")
  * [memoize](func/kind/higher/decorator/memoize "mention") <mark style="color:yellow;">**-**</mark> make a function "remember" its return values.
* <mark style="color:yellow;">**other topics**</mark>
  * [helper-functions](../../appendix/custom/helper-functions "mention")
{% endtab %}

{% tab title="👥 相關" %}
* a <mark style="color:purple;">**function**</mark>&#x20;
  * is an [obj](obj "mention").
  * is a [closure](func/closure "mention").
* the following are <mark style="color:purple;">**functions**</mark>：
  * every [method](obj/method "mention")
  * every [class](class "mention")
  * every [constructor](func/constructor "mention") (supports the [\[\[Construct\]\]](https://tc39.es/ecma262/#table-additional-essential-internal-methods-of-function-objects) [**internal method**](obj/prop/internal)).&#x20;
* [closure](func/closure "mention") can be used as a [func](func "mention") with <mark style="color:red;">**private**</mark> [prop](obj/prop "mention") (functions/variables):exclamation:(:point\_right: [grades](func/closure/examples/grades "mention"))
{% 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 %}
