# function

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

{% hint style="success" %}
an [obj](https://lochiwei.gitbook.io/web/js/val/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**](https://lochiwei.gitbook.io/web/js/val/obj/prop/internal)).

* its [**name**](https://lochiwei.gitbook.io/web/js/val/func/name) (or a [**variable**](https://lochiwei.gitbook.io/web/js/variable) that <mark style="color:yellow;">**refers to it**</mark>) is an [id](https://lochiwei.gitbook.io/web/js/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](https://lochiwei.gitbook.io/web/js/val/func/vs-arg "mention")
{% endhint %}

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

* is actually a [func](https://lochiwei.gitbook.io/web/js/val/builtin/func "mention") object.
* is a [closure](https://lochiwei.gitbook.io/web/js/val/func/closure "mention").
  {% endhint %}

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

{% hint style="info" %}
[method](https://lochiwei.gitbook.io/web/js/val/obj/method "mention") is a [func](https://lochiwei.gitbook.io/web/js/val/func "mention").
{% endhint %}

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

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

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

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

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

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