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

# compilation

🚧 施工中

[JS](/web/js.md) ⟩ compile

{% hint style="success" %} <mark style="color:yellow;">**3 stages of compilation：**</mark>

* [lexing](/web/js/compile/lexing.md): <mark style="color:orange;">**source code**</mark> -> [token](/web/js/grammar/token.md)s.\
  (e.g.,  <mark style="color:blue;">`var a = 2;`</mark> -> <mark style="color:blue;background-color:green;">`var`</mark> , <mark style="color:blue;background-color:green;">`a`</mark> , <mark style="color:blue;background-color:green;">`=`</mark> , <mark style="color:blue;background-color:green;">`2`</mark> , <mark style="color:blue;background-color:green;">`;`</mark> )
* [parsing](/web/js/compile/parsing.md): [token](/web/js/grammar/token.md)s -> <mark style="color:orange;">**AST**</mark> (<mark style="color:yellow;">**abstract syntax tree**</mark>).
* [code generation](/web/js/compile/code-generation.md): <mark style="color:orange;">**AST**</mark> -> <mark style="color:orange;">**executable code**</mark>.
  {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
JavaScript code is <mark style="color:purple;">**compiled**</mark> first, and then <mark style="color:yellow;">**execute**</mark>. (not interpreted line by line)
{% endhint %}

{% hint style="info" %}
while [scope](/web/js/scope.md)s are <mark style="color:yellow;">**identified**</mark> during [compilation](/web/js/compile.md), they're <mark style="color:red;">**not**</mark> actually <mark style="color:yellow;">**created**</mark> <mark style="color:red;">**until**</mark> [runtime](/web/js/compile/runtime.md) (each time a scope needs to run).
{% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**compilation**</mark>&#x20;

* <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**do anything**</mark> in terms of <mark style="color:yellow;">**reserving memory**</mark> for [scope](/web/js/scope.md)s and [variable](/web/js/variable.md)s, <mark style="color:red;">**none**</mark> of the program has been <mark style="color:yellow;">**executed**</mark> yet.
* creates a <mark style="color:yellow;">**map**</mark> of all the [lexical scope](/web/js/scope/lexical-scope.md)s of the program.&#x20;
  {% endhint %}

{% hint style="info" %} <mark style="color:yellow;">**runtime**</mark>

* all the [scope](/web/js/scope.md)s (aka, "<mark style="color:purple;">**lexical environments**</mark>") and [identifier](/web/js/grammar/token/id.md)s ([variable](/web/js/variable.md)s) for each scope are created at <mark style="color:red;">**runtime**</mark>.
  {% endhint %}
  {% endtab %}

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

* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ [Ch. 1: What's the Scope?](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#chapter-1-whats-the-scope)
* [ ] Osman ⟩ [Javascript — How the Engine Compiles?](https://medium.com/@osmanakar_65575/javascript-how-the-engine-compiles-6df6d5c6439c)
  {% endtab %}

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

* <mark style="color:yellow;">**stages of compilation：**</mark>
  * [lexing](/web/js/compile/lexing.md) <mark style="color:orange;">**- source code ->**</mark> [token](/web/js/grammar/token.md)s.
  * [parsing](/web/js/compile/parsing.md) <mark style="color:orange;">**-**</mark> [token](/web/js/grammar/token.md)s -> AST
    * [⛔️ early errors](/web/js/err/compile/early-errors.md) - errors on code <mark style="color:yellow;">**parsing**</mark> stage.
  * [code generation](/web/js/compile/code-generation.md) <mark style="color:orange;">**- AST -> executable code.**</mark>
* <mark style="color:yellow;">**other topics**</mark>
  * [JS is compiled](/web/js/compile/js-compiled.md) language.
  * [LHS reference](/web/js/variable/access/lhs.md)
  * [RHS reference](/web/js/variable/access/rhs.md)
  * [LHS vs. RHS reference](/web/js/variable/access/lhs-vs-rhs.md)
  * [hoisting](/web/js/scope/hoist.md)
    {% endtab %}

{% tab title="🗺️ 圖表" %} <img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FbOhtr4sbZOP3NTLHGCvF%2Ffile.drawing.svg?alt=media&amp;token=bddd2d95-b3bd-4452-b75c-522a37703511" alt="3 steps of compilation" class="gitbook-drawing">
{% endtab %}

{% tab title="🚧" %}

* [ ] abstract syntax tree (AST)
* [ ] lexical environments
  {% endtab %}
  {% endtabs %}